2

我的要求是，

  1. 谷歌图表加载后，如果我点击图例，图例应该是灰色的，并且它在图表中的对应值应该被删除。

  2. 当我单击灰色的图例时，应该像以前一样突出显示图例，并且应该再次将删除的值添加到图表中。

我可以使用以下代码完成第一部分的 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 并在再次单击时尝试重置。但只要设置为零，图例和数据就会被删除。但我想要的是让传说变灰。ow 来实现这一点。请帮我。

4

2 回答 2

2

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

        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

于 2013-07-16T06:17:57.370 回答
1

很棒的一段代码 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)

再次感谢

于 2014-02-26T08:04:07.047 回答