具有多个值的定制工具提示 [英] customizing tooltip with multiple values

问题描述

我正在使用angularjs谷歌图表堆积条形图.我想自定义显示在堆叠条上的工具提示数据，要在堆叠条上的鼠标悬停时显示该条的所有堆叠信息(当前，它仅显示当前鼠标在堆叠上的信息).请找到演示 http://plnkr.co/edit/ahg7JiBpOfIGIy0f3Mat?p=preview

I'm working on angularjs google charts-stacked bar. I want to customize the tooltip data displayed on the stacked bar, want to show all the stacks information of that bar on mouseover on the stacked bar(currently it only displays the information of the current mouse over stack). Please find the demo http://plnkr.co/edit/ahg7JiBpOfIGIy0f3Mat?p=preview

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

For the first stack on mouse over, tooltip should display Status1:30,status2:60,status3:40 and on mouseover on second bar tooltip should display status1:9,status2:33,status3:12. Please advice. I tried using the below option, but its not working.

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来显示图表，因此无法实现其实现方式.建议会有所帮助.

I have gone through the link https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#enabling_html_tooltip , but could not able to implement the way they are implementing as i'm not using google.visualization to display the charts. Suggestions would be helpful.

推荐答案

尝试以下图表选项...

try the following chart option...

focusTarget: 'category'

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

the tooltip will display all the category values for the given x-axis value...

这篇关于具有多个值的定制工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！