自定義具有多個值的工具提示

Question

我正在研究angularjs谷歌圖表堆積欄。我想定製堆疊欄上顯示的工具提示數據，想要在堆疊欄上的鼠標懸停上顯示該欄的所有堆棧信息（目前只顯示當前鼠標懸停在堆棧上的信息）。工具提示應顯示狀態1：30，狀態2：60，狀態3：40，並且在第二欄上的鼠標懸停時，工具提示應顯示狀態1：9，狀態2：33，狀態3：狀態2：狀態2： 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} })