Question

我正在研究angularjs google chart-stacked bar。我想自定义堆叠条上显示的工具提示数据，想要在堆叠条上鼠标悬停时显示该条的所有堆栈信息（目前它只显示当前鼠标在堆栈上的信息）。请找到演示http://plnkr.co/edit/ahg7JiBpOfIGIy0f3Mat?p=preview

对于鼠标悬停时的第一个堆栈，工具提示应显示Status1：30，status2：60，status3：40，鼠标悬停在第二个工具栏上的工具提示应显示status1：9，status2：33，status3：12。请指教。我尝试使用以下选项，但它不起作用。

tooltip: {
                shared:true
            }

js code：

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轴值的所有类别值...

Answer 2

你可以覆盖＆＃34; ngChart＆＃34;通过创建仅具有链接功能的新指令的行为如下 app.directive("ngChart",function(){ return function (scope,elem,attr){ //and here you can customizing "ngChart" as needed} })

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

2 个答案: