Question

在 Google 图表中启用/禁用图例及其对应的行点击

2013-07-15

2208

javascript html google-visualization

我的要求是，

加载 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>

我基本上将选定值的 Value 设置为 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 的一段代码非常棒（抱歉，我不能 +1，因为我还是 SO 的新手），正是我要找的，谢谢，只是根据 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)

再次感谢