如何通过行标题（类别）而不是第一列来过滤Google可视化图表

Question

我有一个google折线图，在x轴上显示月份，在y轴上显示金额。

我正在尝试创建一个类别过滤器，该过滤器将根据列类别过滤图表（在我的示例中是：

column1, column2, column3, column4, column5

我所有创建类别过滤器的尝试都导致第一列是过滤器（月），而不是类别是过滤器。

google.charts.load('current', {
  packages: ['line','controls','corechart']
}).then(function () {
  var jsonData = [{"month":"February","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"March","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"April","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"May","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"June","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"July","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"August","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"September","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"October","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"November","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"December","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"Total","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{}];

  // create blank data table
  var data = new google.visualization.DataTable();

  // parse json
  jsonData.forEach(function (jsonRow, indexRow) {
    // add columns
    if (indexRow === 0) {
      for (var column in jsonRow) {
        if (column === 'month') {
          data.addColumn('string', column);
        } else {
          data.addColumn('number', column);
        }
      }
    }

    // add row
    var dataRow = [];
    for (var column in jsonRow) {
      if (column === 'month') {
        dataRow.push(jsonRow[column]);
      } else {
        // convert string to number
        dataRow.push(parseFloat(jsonRow[column]));
      }
    }
    if (dataRow.length > 0) {
      data.addRow(dataRow);
    }
  });

  var dashboard = new google.visualization.Dashboard(
            document.getElementById('dashboard'));
var categoryPicker = new google.visualization.ControlWrapper({
            controlType: 'CategoryFilter',
            containerId: 'line_top_x_control',
            options: {
                filterColumnIndex: 0,
            }
        });

  var chart  = new google.visualization.ChartWrapper({
        'chartType': 'Line',
        'containerId': 'line_top_x',
        'options': {
          'width': 900,
          'height': 200,
        }
      });
 // var chart = new google.charts.Line(document.getElementById('line_top_x'));
  
  dashboard.bind(categoryPicker, chart);
  dashboard.draw(data);
  //chart.draw(data, google.charts.Line.convertOptions(options));
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
<div id="line_top_x_control"></div>
<div id="line_top_x"></div>
</div>

Answer 1

您收到的错误来自复选框的值。该值必须是列的索引->1不是列名-> column1

此外，您还需要手动设置颜色，因为当您隐藏系列时，该系列的其余部分将更改颜色。

此外，您将要使用vAxis.ticks或vAxis.viewWindow，将y轴锁定到位。否则，当您隐藏系列时，y轴将重新缩放，系列将移动。

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

google.charts.load('current', {
  packages: ['line','controls','corechart']
}).then(function () {
  var jsonData = [{"month":"February","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"March","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"April","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"May","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"June","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"July","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"August","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"September","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"October","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"November","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"December","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{"month":"Total","column1":"1","column2":"2","column3":"3","column4":"4","column5":"5"},{}];

  // create blank data table
  var data = new google.visualization.DataTable();

  // parse json
  jsonData.forEach(function (jsonRow, indexRow) {
    // add columns
    if (indexRow === 0) {
      for (var column in jsonRow) {
        if (column === 'month') {
          data.addColumn('string', column);
        } else {
          data.addColumn('number', column);
        }
      }
    }

    // add row
    var dataRow = [];
    for (var column in jsonRow) {
      if (column === 'month') {
        dataRow.push(jsonRow[column]);
      } else {
        // convert string to number
        dataRow.push(parseFloat(jsonRow[column]));
      }
    }
    if (dataRow.length > 0) {
      data.addRow(dataRow);
    }
  });

  var colors = ['red', 'yellow', 'green', 'blue', 'purple'];
  colors.forEach(function (color, index) {
    data.setColumnProperty(index + 1, 'color', color);
  });

  var options = {
    chartArea: {
      top: 12,
      right: 0,
      bottom: 72,
      left: 72
    },
    legend: {
      position: 'bottom'
    },
    colors: colors,
    hAxis: {
      slantedText: true
    },
    vAxis: {
      ticks: [0, 1, 2, 3, 4, 5],
      title: 'Amount'
    },
    bar: {
      groupWidth: '90%'
    },
    height: 400
  };

  var chart = new google.visualization.LineChart(document.getElementById('line_top_x'));

  $('.series-chk').on('change', drawChart);
  $(window).resize(drawChart);
  drawChart();

  function drawChart() {
    var chartColors = [];
    var chartColumns = [0];
    var view = new google.visualization.DataView(data);

    $.each($('.series-chk'), function (index, checkbox) {
      var seriesColumn = parseInt(checkbox.value);
      if (checkbox.checked) {
        chartColumns.push(seriesColumn);
        chartColors.push(data.getColumnProperty(seriesColumn, 'color'));
      }
    });

    view.setColumns(chartColumns);
    options.colors = chartColors;
    chart.draw(view, options);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<input class="series-chk" id="chk-0" type="checkbox" value="1" checked /><label for="chk-0">Column 1</label>
<input class="series-chk" id="chk-1" type="checkbox" value="2" checked /><label for="chk-1">Column 2</label>
<input class="series-chk" id="chk-2" type="checkbox" value="3" checked /><label for="chk-2">Column 3</label>
<input class="series-chk" id="chk-3" type="checkbox" value="4" checked /><label for="chk-3">Column 4</label>
<input class="series-chk" id="chk-4" type="checkbox" value="5" checked /><label for="chk-4">Column 5</label>
<div id="line_top_x"></div>