Google 仪表板按年份筛选折线图

Question

我有一个数据 table，其中包含过去 3 年的汽车销量。我想创建一个折线图来显示给定年份的销售趋势。我需要一个 select 元素，允许用户按年份过滤销售额。

我的 table 有很多列，包括一个销售日期（第 0 列）：

var dataTableSales = google.visualization.arrayToDataTable([
    ['Sale Date', 'Sale Type'],
    [new Date(2016, 0, 16), 'cash sale'],
    [new Date(2016, 0, 16), 'cash sale'],
    [new Date(2016, 0, 16), 'leased'],
    [new Date(2016, 0, 16), 'leased'],
    [new Date(2016, 0, 16), 'financed'],
    [new Date(2017, 0, 16), 'cash sale'],
    [new Date(2017, 0, 16), 'cash sale'],
    [new Date(2017, 0, 16), 'cash sale'],
    [new Date(2017, 0, 16), 'financed'],
    [new Date(2016, 0, 17), 'cash sale'],
    [new Date(2016, 0, 17), 'financed'],
    [new Date(2016, 0, 17), 'cash sale'],
    [new Date(2016, 0, 17), 'leased'],
    [new Date(2016, 0, 17), 'financed'],
    [new Date(2017, 0, 17), 'financed'],
    [new Date(2017, 0, 17), 'financed'],
    [new Date(2017, 0, 17), 'cash sale'],
    [new Date(2017, 0, 17), 'financed'],
    [new Date(2016, 0, 18), 'leased'],
    [new Date(2016, 0, 18), 'cash sale'],
    [new Date(2017, 0, 18), 'cash sale'],
    [new Date(2017, 0, 18), 'cash sale']
  ]);

到目前为止我有：

     var datePicker = new google.visualization.ControlWrapper( {
        'controlType': 'CategoryFilter',
        'containerId': 'categoryFilter_div',
        'options': {
            'filterColumnIndex': 0,
            'ui': {
                'labelStacking': 'vertical',
                'label': 'Year:',
                'allowTyping': false,
                'allowMultiple': false
            }
        }
    } );

    // Create a line chart, passing some options
    var lineChart = new google.visualization.ChartWrapper({
        'chartType': 'LineChart',
        'containerId': 'chart_div',
        'options': {
        'width': 720,
        'height': 300
        }
    } );

    dashboard.bind( datePicker, lineChart );
    dashboard.draw( gDataTableSales );

datePicker 会填充销售日期，但我需要年份。此外，折线图不呈现 - 我收到错误消息：给定轴上的所有系列必须具有相同的数据类型。任何指向解决方案的指针都将不胜感激。

Answer 1

首先，需要汇总 'sale type'
的计数（类似于）

汇总数据后，将日期列格式化为 'yyyy'

然后在 'CategoryFilter'
中使用以下选项 useFormattedValue: true

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

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

function drawChart() {
  var dataTableSales = google.visualization.arrayToDataTable([
    ['Sale Date', 'Sale Type'],
    [new Date(2016, 0, 16), 'cash sale'],
    [new Date(2016, 0, 16), 'cash sale'],
    [new Date(2016, 0, 16), 'leased'],
    [new Date(2016, 0, 16), 'leased'],
    [new Date(2016, 0, 16), 'financed'],
    [new Date(2017, 0, 16), 'cash sale'],
    [new Date(2017, 0, 16), 'cash sale'],
    [new Date(2017, 0, 16), 'cash sale'],
    [new Date(2017, 0, 16), 'financed'],
    [new Date(2016, 0, 17), 'cash sale'],
    [new Date(2016, 0, 17), 'financed'],
    [new Date(2016, 0, 17), 'cash sale'],
    [new Date(2016, 0, 17), 'leased'],
    [new Date(2016, 0, 17), 'financed'],
    [new Date(2017, 0, 17), 'financed'],
    [new Date(2017, 0, 17), 'financed'],
    [new Date(2017, 0, 17), 'cash sale'],
    [new Date(2017, 0, 17), 'financed'],
    [new Date(2016, 0, 18), 'leased'],
    [new Date(2016, 0, 18), 'cash sale'],
    [new Date(2017, 0, 18), 'cash sale'],
    [new Date(2017, 0, 18), 'cash sale']
  ]);
  dataTableSales.sort({column: 0});

  // build view and aggregation columns
  var viewColumns = [{
    label: dataTableSales.getColumnLabel(0),
    type: dataTableSales.getColumnType(0),
    calc: function (dt, row) {
      return {
        v: dt.getValue(row, 0),
        f: dt.getValue(row, 0).getFullYear().toString()
      };
    }
  }];
  var aggColumns = [];
  var saleTypes = dataTableSales.getDistinctValues(1);
  saleTypes.forEach(function (saleType) {
    var colIndex = viewColumns.push({
      label: saleType,
      type: 'number',
      calc: function (dt, row) {
        return (dt.getValue(row, 1) === saleType) ? 1 : 0;
      }
    });
    aggColumns.push({
      aggregation: google.visualization.data.sum,
      column: colIndex - 1,
      label: saleType,
      type: 'number'
    });
  });

  var view = new google.visualization.DataView(dataTableSales);
  view.setColumns(viewColumns);

  var summary = google.visualization.data.group(
    view,
    [0],
    aggColumns
  );

  var formatDate = new google.visualization.DateFormat({
    pattern: 'yyyy'
  });
  formatDate.format(summary, 0);

  var datePicker = new google.visualization.ControlWrapper({
    controlType: 'CategoryFilter',
    containerId: 'categoryFilter_div',
    options: {
      filterColumnIndex: 0,
      ui: {
        allowTyping: false,
        allowMultiple: false,
        label: 'Year:',
        labelStacking: 'vertical'
      },
      useFormattedValue: true
    }
  });

  var lineChart = new google.visualization.ChartWrapper({
    chartType: 'LineChart',
    containerId: 'chart_div',
    options: {
      width: 720,
      height: 300
    }
  });

  var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
  dashboard.bind(datePicker, lineChart);
  dashboard.draw(summary);
}

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

Google 仪表板按年份筛选折线图

Google Dashboard filter line chart by year

charts

dashboard

google-visualization