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

Question

我正在研究 angularjs 谷歌图表堆叠栏。我想自定义堆叠栏上显示的工具提示数据，想要在鼠标悬停在堆叠栏上时显示该栏的所有堆栈信息(目前仅显示当前鼠标悬停在堆栈上的信息)。请查看演示http://plnkr.co/edit/ahg7JiBpOfIGIy0f3Mat?p=preview

对于鼠标悬停时的第一个堆栈，工具提示应显示 Status1:30、status2:60、status3:40，而当鼠标悬停在第二个栏上时，工具提示应显示 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

尝试以下图表选项...

focusTarget: 'category'

工具提示将显示给定 x 轴值的所有类别值...