Question

我从一年的销售表中获取了一个数据组。该组有两列：销售类型（例如现金，租赁等）和计数，它只是日期字段中的聚合。

我可以轻松搞定一个饼图。现在我想添加一个类别选择器，允许用户通过选择一年来更改饼图。我怎么能这样做？

到目前为止，这是我的代码：

var dashboard = new google.visualization.Dashboard(
    document.getElementById( 'dashboard_div' ) );

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

var groupedData = google.visualization.data.group(
    gDataTableSales,
    [ { column: 3, type: 'string', label: 'Type' } ],
    [ { column: 2, aggregation: google.visualization.data.count, type: 'number', label: 'Count' } ] );

var chart = new google.visualization.ChartWrapper({
    chartType: 'PieChart',
    containerId: 'chart_div' });

dashboard.bind( [ categoryPicker ], [ chart ] );
dashboard.draw( groupedData );

图表和类别选择器会被渲染，我可以选择计数，图表会更新，表明机制正在按预期工作。

Answer 1

PieChart的data format与其他核心图表不同数据需要是行，而不是列只能有一个系列

一个选项是使用两个聚合......

年份，类别，计数
类别，计数

只有在您想要选择＆＃34;所有年份＆＃34;或者
时才需要第二个使用 - ＆gt; allowNone: true - 这是默认的

而不是在仪表板中绑定类别过滤器和图表，而是单独绘制它们

使用过滤器的statechange事件来确定要绘制的数据表

请参阅以下工作代码段...

＆＃13;

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});

  var dataByYear = google.visualization.data.group(
    dataTableSales,
    [{
      column: 0,
      type: 'string',
      modifier: function (value) {
        return value.getFullYear().toString();
      }
    }, 1],
    [{
      column: 1,
      type: 'number',
      aggregation: google.visualization.data.count
    }]
  );

  var dataAll = google.visualization.data.group(
    dataTableSales,
    [1],
    [{
      column: 1,
      type: 'number',
      aggregation: google.visualization.data.count
    }]
  );

  var yearPicker = new google.visualization.ControlWrapper({
    controlType: 'CategoryFilter',
    containerId: 'categoryFilter_div',
    dataTable: dataByYear,
    options: {
      filterColumnIndex: 0,
      ui: {
        allowTyping: false,
        allowMultiple: false,
        caption: 'All Years',
        label: '',
        labelStacking: 'vertical'
      },
      useFormattedValue: true
    }
  });
  google.visualization.events.addListener(yearPicker, 'statechange', function () {
    if (yearPicker.getState().selectedValues.length > 0) {
      pieChart.setView({
        columns: [1, 2],
        rows: dataByYear.getFilteredRows([{
          column: 0,
          value: yearPicker.getState().selectedValues[0]
        }])
      });
      pieChart.setDataTable(dataByYear);
    } else {
      pieChart.setView(null);
      pieChart.setDataTable(dataAll);
    }
    pieChart.draw();
  });
  yearPicker.draw();

  var pieChart = new google.visualization.ChartWrapper({
    chartType: 'PieChart',
    containerId: 'chart_div',
    dataTable: dataAll,
    options: {
      height: 300
    }
  });
  pieChart.draw();
}

＆＃13;

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

＆＃13;

如何使用Google Visualization Dashboard中的日期过滤饼图

1 个答案: