工具提示可根据用户选择隐藏数据

Question

我正在研究angularjs googlecharts。当用户点击图例时，隐藏图表上的相应数据。问题在于工具提示。当用户点击图例中的图例笔记本电脑（蓝色）和鼠标悬停在图表中的任何一个栏上时，应隐藏显示笔记本电脑的工具提示上的数据，但工具提示也显示笔记本电脑的信息。当用户单击桌面图例并在栏上鼠标悬停时，同样正常工作，显示桌面的工具提示上的数据被隐藏。 无法跟踪问题，当用户选择Legend Laptop隐藏笔记本电脑信息时，有关如何隐藏显示笔记本电脑信息的工具提示信息的任何建议。 请找到演示here

js code：

angular.module('myApp', ['googlechart'])
  .controller('myController', function($scope) {
    var colorIndex = 0,
        chart1 = {};
    chart1.type = "ColumnChart";
    chart1.displayed = false;
    chart1.data = {
      "cols": [{
        id: "month",
        label: "Month",
        type: "string"
      }, {
        id: "laptop-id", 
        label: "Laptop",
        type: "number",
        colorIndex: colorIndex++
      }, {
        role: "tooltip", 
        type: "string",
        p: {
            'html': true
        }
      }, {
        id: "desktop-id",
        label: "Desktop",
        type: "number",
        colorIndex: colorIndex++
      }],
      "rows": [ {
        c: [{
          v: "Jan"
        }, {
          v: 13
        },{
          v: "laptop tooltip bar1"
        }, {
          v: 1,
          f: "1 unit (Out of stock this month)"
        }]
      } ,{
        c: [{
          v: "February"
        }, {
          v: 13
        },{
          v: "laptop tooltip bar2"
        }, {
          v: 1,
          f: "1 unit (Out of stock this month)"
        }]
      }, {
        c: [{
            v: "March"
          }, {
            v: 24
          },{
            v: "laptop tooltip bar3"
          }, {
            v: 5
          }]
      }]
    };
    chart1.options = {
      "title": "Sales per month",
      "colors": ['#0000FF', '#009900'],
      "defaultColors": ['#0000FF', '#009900'],
       focusTarget: 'category',
      "isStacked": "true",
      "fill": 20,
      "displayExactValues": true,
      tooltip: {textStyle: {fontName: '"Arial"', bold: "true", fontSize: "14"}},
      "vAxis": {
        "title": "Sales unit",
        "gridlines": {
          "count": 10
        }
      },
      "hAxis": {
        "title": "Date"
      }
    };
    chart1.view = {
     columns: [0, 1, 2,3]
    };
    $scope.myChart = chart1; 

    var hidden = [];
  $scope.reset = function() {
        for (var i = 0; i < hidden.length; i++) {
            var hiddenCol = hidden[i];
            $scope.myChart.view.columns[hiddenCol] = hiddenCol;
            $scope.myChart.options.colors[hiddenCol - 1] = $scope.myChart.options.defaultColors[hiddenCol - 1];

        }
        hidden = [];
    };

    $scope.seriesSelected = function(selectedItem) { 
      if (selectedItem.row === null) {
            var col = selectedItem.column,
                colIndex = hidden.indexOf(col),
                colorIndex = chart1.data.cols[col].colorIndex;

            if (hidden.length === ($scope.myChart.view.columns.length - 3) && colIndex == -1) {
                window.alert("One seies of data should be available all time");
            }
            else{
                if(colIndex == -1){
                    hidden.push(col);
                }
                else{
                    hidden.splice(colIndex, 1);
                }

                if ($scope.myChart.view.columns[col] == col) {
                    $scope.myChart.view.columns[col] = $scope.myChart.data.cols[col];
                    $scope.myChart.options.colors[colorIndex] = '#CCCCCC';
                }
                else {
                    $scope.myChart.view.columns[col] = col;
                    $scope.myChart.options.colors[colorIndex] = $scope.myChart.options.defaultColors[colorIndex];
                }
            }
        }  

    };
  });