自定义具有多个值的工具提示

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} })