Google Visualization API - 格式化可过滤的双轴组合图

Question

我使用 Google Visualization API 创建了一个双轴组合图表，将数据显示为柱形图和折线图。

该页面还具有一组用于列的过滤器，这些过滤器根据所选的列过滤器从数据库返回一个新数据集。

为了指定哪些值是条和线，我使用了 jsfiddle 中显示的系列选项和下面的代码：

google.charts.load('current',
        {
            callback: drawChart,
            packages: ['corechart', 'controls', 'charteditor']
        });

    var chart;

    function drawChart() {

        var data = new google.visualization.arrayToDataTable([['Outcomes','Abstinent','Improved','Unchanged','Deteriorated','Average no. of days use at start','Average no. of days of use at review'],['2015/16',18036,11414,14430,1880,21.6,8.3],['2016/17',17642,11688,14010,1738,22.2,8.5],['2017/18',17282,10796,13542,1686,22.1,8.6]]);
        var width = Math.min(document.documentElement.clientWidth, window.innerWidth || 0) + 'px';

        var columnsTable = new google.visualization.DataTable();
        columnsTable.addColumn('number', 'colIndex');
        columnsTable.addColumn('string', 'colLabel');
        var initState = { selectedValues: [] };
        // put the columns into this data table (skip column 0)
        for (var i = 1; i < data.getNumberOfColumns(); i++) {
            columnsTable.addRow([i, data.getColumnLabel(i)]);
            // you can comment out this next line if you want to have a default selection other than the whole list
            initState.selectedValues.push(data.getColumnLabel(i));
        }
        // you can set individual columns to be the default columns (instead of populating via the loop above) like this:
        // initState.selectedValues.push(data.getColumnLabel(4));

        var options = {
            title: 'Treatment outcomes',
            hAxis: {
                slantedText: true,
                slantedTextAngle: 30,
                title: 'Reporting Period'
            },
            vAxes: {
                0: { logScale: false, title: 'No. of clients' },
                1: { logScale: false, title: 'Average no. of days use', maxValue: 28 }
            },
            series: {
                0: { type: "bars", targetAxisIndex: 0, color: '#FF9900' },
                1: { type: "bars", targetAxisIndex: 0, color: '#FF6400' },
                2: { type: "bars", targetAxisIndex: 0, color: '#FF0000' },
                3: { type: "bars", targetAxisIndex: 0, color: '#9A0033' },
                4: { type: "line", targetAxisIndex: 1 },
                5: { type: "line", targetAxisIndex: 1 }
            },
            chartArea: {
                top: 40,
                left: 100,
                width: "65%"
            },
            pointSize: 5,
            legend: { position: 'top' },
            width: width,
            height: '300px'
        }

        var chart = new google.visualization.LineChart(document.getElementById("chart_div"));

        chart.draw(data, options);
    }

https://jsfiddle.net/uLwtbvn5/5/

我希望拥有它，以便在删除一个或多个值时，列名为 Abstinent、Improved、Unchanged 或 Deteriorated 的任何值始终显示为条形，并使用 targetAxisIndex: 0 和平均值为 no 的值。开始时使用天数或平均天数。审查时的使用天数始终为行并使用 targetAxisIndex：1。

有没有办法使用 Google Visualization API 做到这一点？

Answer 1

在columnsTable 上，使用行属性来存储系列选项。

然后当过滤器更改时，从列表中拉出行属性以绘制图表。

请参阅以下工作 sn-p...

google.charts.load('current', {
  packages: ['corechart', 'controls', 'charteditor']
}).then(function () {
  var data = google.visualization.arrayToDataTable([['Outcomes','Abstinent','Improved','Unchanged','Deteriorated','Average no. of days use at start','Average no. of days of use at review'],['2015/16',18036,11414,14430,1880,21.6,8.3],['2016/17',17642,11688,14010,1738,22.2,8.5],['2017/18',17282,10796,13542,1686,22.1,8.6]]);
  var width = Math.min(document.documentElement.clientWidth, window.innerWidth || 0) + 'px';

  // define bars series colors
  var colors = ['#ff9900', '#ff6400', '#ff0000', '#9a0033'];

  // define filter columns
  var columnsTable = new google.visualization.DataTable();
  columnsTable.addColumn('number', 'Series #');
  columnsTable.addColumn('string', 'Select series: ');
  var initState = { selectedValues: [] };
  for (var i = 1; i < data.getNumberOfColumns(); i++) {
    var colIndex = columnsTable.addRow([i, data.getColumnLabel(i)]);
    initState.selectedValues.push(data.getColumnLabel(i));

    // assign series type, axis, and color -- store using row properties
    switch (data.getColumnLabel(i)) {
      case 'Abstinent':
      case 'Improved':
      case 'Deteriorated':
      case 'Unchanged':
        columnsTable.setRowProperty(colIndex, 'type', 'bars');
        columnsTable.setRowProperty(colIndex, 'targetAxisIndex', 0);
        columnsTable.setRowProperty(colIndex, 'color', colors[colIndex]);
        break;

      default:
        columnsTable.setRowProperty(colIndex, 'type', 'line');
        columnsTable.setRowProperty(colIndex, 'targetAxisIndex', 1);
    }
  }

  // define chart
  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

  // define filter
  var filter = new google.visualization.ControlWrapper({
    controlType: 'CategoryFilter',
    containerId: 'filter_div',
    dataTable: columnsTable,
    options: {
      filterColumnIndex: 1,
      ui: {
        caption: 'Series',
        sortValues: false
      }
    },
    state: initState
  });

  // draw chart when filter is ready or changed
  google.visualization.events.addListener(filter, 'ready', drawChart);
  google.visualization.events.addListener(filter, 'statechange', drawChart);

  // draw filter
  filter.draw();

  // draw chart
  function drawChart() {
    var options = {
      title: 'Treatment outcomes',
      hAxis: {
        slantedText: true,
        slantedTextAngle: 30,
        title: 'Reporting Period'
      },
      vAxes: {
        0: { logScale: false, title: 'No. of clients' },
        1: { logScale: false, title: 'Average no. of days use', maxValue: 28 }
      },
      series: {},
      chartArea: {
        top: 40,
        left: 100,
        width: '65%'
      },
      pointSize: 5,
      legend: { position: 'top' },
      width: width,
      height: '300px'
    };

    // define data view column and series options based on filter columns
    var viewColumns = [0];
    var state = filter.getState().selectedValues;
    state.forEach(function (column, index) {
      var colIndex;

      // find filter column index
      for (var i = 0; i < columnsTable.getNumberOfRows(); i++) {
        if (columnsTable.getValue(i, 1) === column) {
          colIndex = i;
        }
      }
      viewColumns.push(colIndex + 1);

      // define series option
      options.series[index] = {
        type: columnsTable.getRowProperty(colIndex, 'type'),
        targetAxisIndex: columnsTable.getRowProperty(colIndex, 'targetAxisIndex')
      };
      if (colIndex < 4) {
        options.series[index].color = columnsTable.getRowProperty(colIndex, 'color');
      }
    });

    // define data view
    var dataView = new google.visualization.DataView(data);
    dataView.setColumns(viewColumns);

    // ensure enough columns selected to draw chart
    if (viewColumns.length > 1) {
      chart.draw(dataView, options);
    } else {
      chart.clearChart();
    }
  }
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="filter_div"></div>
<div id="chart_div"></div>