Google Dashboard 过滤器折线图（按年份）

Posted 2023-03-22

【中文标题】Google Dashboard 过滤器折线图（按年份）

【英文标题】：Google Dashboard filter line chart by year

【发布时间】：2017-06-29 22:51:56

【问题描述】：

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

我的表格有很多列，包括一列销售日期（第 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 会填充销售日期，但我需要年份。此外，折线图不呈现 - 我收到一个错误：给定轴上的所有系列必须是相同的数据类型。任何指向解决方案的指针将不胜感激。

【问题讨论】：

这会很有帮助，如果你能分享数据样本 --> gDataTableSales

刚刚更新以包含我的数据表。

【参考方案1】：

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

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

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

---

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

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>

【讨论】：

感谢 WhiteHat，虽然我无法让它为 PieChart 工作。我收到“饼图应具有字符串类型的第一列”错误。