Question

我的要求是，

加载Google图表后，如果单击图例，图例应显示为灰色，并且应删除图表中的相应值。
当我点击灰色的图例时，图例应该像之前一样突出显示，并且应该再次将删除的值添加到图表中。

我可以使用以下代码执行第一部分的50％：

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      var duplicateChartData = new Array();
       var unSelectedArray = new Array();
      function drawChart() {

        // Create the data table.
        var data = new google.visualization.DataTable();
        duplicateChartData = new Array();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['Mushrooms', 3],
          ['Onions', 1],
          ['Olives', 1],
          ['Zucchini', 1],
          ['Pepperoni', 2]
        ]);

        // Set chart options
        var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':400,
                       'height':300};

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        duplicateChartData = data;

         function selectHandler() {
          var selectedItem = chart.getSelection()[0];
          var selectedRow = selectedItem.row;
            var isUnSelected = unSelectedArray[selectedRow]
          if (selectedItem && !isUnSelected) {

          data.setValue(selectedRow, 1, 0);
          chart.draw(data, options);
          unSelectedArray[selectedRow] = true;
          }
          if(isUnSelected){
          data.setValue(selectedRow, 1, duplicateChartData.getValue(selectedRow,1));
           unSelectedArray[selectedRow] = false;
          }
        }

        google.visualization.events.addListener(chart, 'select', selectHandler);    
        chart.draw(data, options);
      }
    </script>
  </head>

  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
  </body>
</html>

对于所选值，我基本上将值设置为0，并在再次单击时尝试重置。但是，只要设置为零，图例和数据就会被删除。但我想要的只是灰白的传说。要做到这一点。请帮帮我。

Answer 1

我为折线图做了这个。它满足您的两个要求。希望这会对你有所帮助。

        google.visualization.events.addListener(chart, 'select', function () {
        var sel = chart.getSelection();
        // if selection length is 0, we deselected an element
        if (sel.length > 0) {
            // if row is undefined, we clicked on the legend
            if (typeof sel[0].row === 'undefined') {
                var col = sel[0].column;
                if (columns[col] == col) {
                    // hide the data series
                    columns[col] = {
                        label: data.getColumnLabel(col),
                        type: data.getColumnType(col),
                        calc: function () {
                            return null;
                        }
                    };

                    // grey out the legend entry
                    series[col - 1].color = '#CCCCCC';
                }
                else {
                    // show the data series
                    columns[col] = col;
                    series[col - 1].color = null;
                }
                var view = new google.visualization.DataView(data);
                view.setColumns(columns);
                chart.draw(view, options);
            }
        }
    });

以下是工作示例jqfaq.com

Answer 2

令人敬畏的一段代码Abinaya（对不起，我在这里仍然不是一名新手），正是我所寻找的，谢谢，只是一个小小的修正，基于jqfaq.com的评论。尝试了它，它100％工作。

        // if row is undefined, we clicked on the legend
        //if (typeof sel[0].row === 'undefined') { *** doesn't seem to work
        if (sel[0].row === null) {           // this works

结帐修改后的jsfiddle

我一直在搜索有关如何获取所选图例标签的代码，您的代码也使用此行代码执行此操作

//get selected legend label
data.getColumnLabel(col)

再次感谢

在Google图表中启用/禁用图例及其相应的行

2 个答案: