customizing tooltip with multiple values

问题

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

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

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.

回答1:

try the following chart option...

focusTarget: 'category'

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

回答2:

you can override a "ngChart" behavior by creating a new directive with only link function as the following app.directive("ngChart",function(){ return function (scope,elem,attr){ //and here you can customizing "ngChart" as needed} })

来源：https://stackoverflow.com/questions/43631567/customizing-tooltip-with-multiple-values

标签

javascript

html

angularjs