複数の値を持つツールチップをカスタマイズする

Question

私はangularjs google charts-stacked barに取り組んでいます。スタックバーに表示されるツールチップデータをカスタマイズし、スタックバーのマウスオーバー時にそのバーのすべてのスタック情報を表示したい（現在はスタック上の現在のマウス情報のみを表示します）。デモをご覧くださいhttp://plnkr.co/edit/ahg7JiBpOfIGIy0f3Mat?p=preview

ツールチップには、ステータス1：30、ステータス2：60、ステータス3：40が表示され、2番目のバーのマウスオーバー時にツールチップにstatus1：9、status2：33、status3： 12。ご意見をお聞かせください。私は、以下のオプションを使用してみましたが、動作しません。

tooltip: { 
       shared:true 
      } 

JSコード：

var app = angular.module('myApp', ["googlechart"]); 
app.controller('myController', function ($scope) { 
     $scope.chart = {}; 
     $scope.chart.options = { 
      'fontSize': '12', 
      "isStacked": "true", 

     }; 
     $scope.chart.type = "ColumnChart"; 
     $scope.chart.cssStyle = "height:500px; width:600px;"; 
     var annotations={ 
       role : "annotation", 
       type : "string", 
       p : { 
        role : "annotation" 
       } 
      }; 

     $scope.chart.data = { 
      "cols": [ 
       { id: "status", label: "Status", type: "string" }, 
       { id: "statusCount", label: "status1", type: "number"}, 
       { id: "statusCount2", label: "status2", type: "number"}, 
       { id: "statusCount3", label: "status3", type: "number"}, 
     ] 
     }; 

    $scope.loadDataToDrawChart = 
       function(response) { 
        $scope.responseData = response; 
         var rows = []; 
         var row = null; 
         var jsonData = [{"spID":100,"spValue":30,"spStatus":"recent","name":"jtest"}, 
    {"spID":100,"spValue":60,"spStatus":"old","name":"jtest"},{"spID":100,"spValue":40,"spStatus":"recent","name":"jtest"}, 
    {"spID":222,"spValue":9,"spStatus":"done","name":"mtest"}, 
{"spID":222,"spValue":33,"spStatus":"inprogress","name":"mtest"}, 
    {"spID":222,"spValue":12,"spStatus":"inprogress","name":"mtest"}]; 
    var rows = []; 
         var row = null; 
         var id = null; 
         jsonData.forEach(function (value, key) { 
          if (id !== value.spID) { 
           id = value.spID; 
           if (row !== null) { 
            rows.push(row); 
           } 
           row = {c: [{v: value.spID}]}; 
          } 
          row.c.push({v: value.spValue}); 
         }); 
         rows.push(row); 
         $scope.chart.data.rows = rows; 
       } 
     $scope.loadDataToDrawChart(); 

    $scope.$on('loadChart',function(event){ 
     $scope.loadDataToDrawChart(); 
    }); 
    $scope.chart.formatters = {}; 

    $scope.switch = function (chartType) { 
     $scope.chart.type = chartType; 
     AxisTransform(); 
    }; 
    AxisTransform = function() { 
     tempvAxis = $scope.chart.options.vAxis; 
     temphAxis = $scope.chart.options.hAxis; 
     $scope.chart.options.vAxis = temphAxis; 
     $scope.chart.options.hAxis = tempvAxis; 
    }; 
    }); 

私はリンクhttps://developers.google.com/chart/interactive/docs/customizing_tooltip_content#enabling_html_tooltipを経ていますが、私はチャートを表示するgoogle.visualizationを使用していないとして、彼らは実装されている方法を実装することができませんでした。提案が役に立ちます。

Answer 1

としてのみリンク機能を使用して新しいディレクティブを作成することによって、「ngChart」動作をオーバーライドすることができます...

focusTarget: 'category' 

ツールチップがすべて表示されます指定されたx軸値のカテゴリ値...

Answer 2

次のグラフのオプションを試してみてください、次の app.directive("ngChart",function(){ return function (scope,elem,attr){ //and here you can customizing "ngChart" as needed} })