Question

我是javascript的新手，正在尝试使用googlecharts。现在我有关于源列的问题。现在，我可以隐藏我需要的某些列，但是当我在“隐藏”和“显示”之间切换时，不再显示sourcecolumn。

<html>   <head>    <script type="text/javascript"    src="https://www.gstatic.com/charts/loader.js"></script>   <script    type="text/javascript">    google.charts.load("current", {packages:['corechart']});    google.charts.setOnLoadCallback(drawChart);    function drawChart() {
         var data = google.visualization.arrayToDataTable([
           ['Year', 'Sales', 'Expenses'],
         ['2004', 1000, 400],
         ['2005', 1170, 460],
         ['2006', 660, 1120],
         ['2007', 1030, 540]
         ]);

         var view = new google.visualization.DataView(data);
         view.setColumns([  0,
                            1,{ calc: "stringify",sourceColumn: 1,type: "string",role: "annotation" },
                            2,{ calc: "stringify",sourceColumn: 2,type: "string",role: "annotation" }]);




         var options = {
           title: "Density of Precious Metals, in g/cm^3",
           width: 600,
           height: 400,
           bar: {groupWidth: "95%"},
           legend: { position: "/" },
         };
         var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
         chart.draw(view, options);
              console.log(view); 
              var columns = [];         var series = {};        for (var i = 0; i < data.getNumberOfColumns(); i++) {           columns.push(i);            if (i > 0) {
                    series[i - 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 (sel[0].row === null) {
                        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);
                        console.log(view);
                        chart.draw(view, options);
                    }           }       });







             }   </script>   </head>   <body>    <div id="columnchart_values" style="width: 900px; height: 500px;"></div>   </body> </html>

这是我的SouceCode -https://jsfiddle.net/vpz2a4nc/

请帮助我。

Answer 1

您正在使用data来构建列，
但使用view作为初始抽奖。
data不包括注释列，仅包含view。
所以当一个被隐藏时，列索引不对齐。

一个简单的解决方法是将视图转换为数据表，
并在第一次绘制之前替换data。

var view = new google.visualization.DataView(data);
view.setColumns([0,
  1, {calc: "stringify", sourceColumn: 1, type: "string", role: "annotation"},
  2, {calc: "stringify", sourceColumn: 2, type: "string", role: "annotation"}
]);
data = view.toDataTable();

请参阅以下工作片段...

google.charts.load('current', {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses'],
    ['2004', 1000, 400],
    ['2005', 1170, 460],
    ['2006', 660, 1120],
    ['2007', 1030, 540]
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0,
    1, {calc: "stringify", sourceColumn: 1, type: "string", role: "annotation"},
    2, {calc: "stringify", sourceColumn: 2, type: "string", role: "annotation"}
  ]);
  data = view.toDataTable();

  var options = {
    title: "Density of Precious Metals, in g/cm^3",
    width: 600,
    height: 400,
    bar: {groupWidth: "95%"},
    legend: { position: "/" },
  };
  var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
  chart.draw(data, options);

  var columns = [];
  var series = {};
  for (var i = 0; i < data.getNumberOfColumns(); i++) {
    columns.push(i);
    if (i > 0) {
      series[i - 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 (sel[0].row === null) {
        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);
      }
    }
  });
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchart_values" style="width: 900px; height: 500px;"></div>

Google Chart单击图例以隐藏列

1 个答案: