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

我有一个数据组，取自当年的销售表。该组有两列：销售类型（如现金、租赁等）和计数（仅是日期字段上的汇总）

我可以很容易地得到一个饼图。现在我想添加一个类别选择器，允许用户通过选择一年来更改饼图。我该怎么做

以下是我目前的代码：

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 );

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

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

一种选择是使用两个聚合

年份、类别、计数 类别、计数 仅当您希望允许选择所有年份时才需要第二个，或者 使用->AllowOne:true-这是默认值

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

使用筛选器的statechange事件确定要绘制的数据表

请参阅以下工作片段

google.charts.load'current'{ 回调：图纸， 包：['controls'] }; 功能图{ var dataTableSales=google.visualization.arrayToDataTable[ [“销售日期”，“销售类型”]， [新日期2016年0月16日，“现金销售”]， [新日期2016年0月16日，“现金销售”]， [新日期2016年0月16日，“租赁”]， [新日期2016年0月16日，“租赁”]， [新日期2016年0月16日，“融资”]， [新日期2017年0月16日，“现金销售”]， [新日期2017年0月16日，“现金销售”]， [新日期2017年0月16日，“现金销售”]， [新日期2017年0月16日，“融资”]， [新日期2016年0月17日，“现金销售”]， [新日期2016年0月17日，“融资”]， [新日期2016年0月17日，“现金销售”]， [新日期2016年0月17日，“租赁”]， [新日期2016年0月17日，“融资”]， [新日期2017年0月17日，“融资”]， [新日期2017年0月17日，“融资”]， [新日期2017年0月17日，“现金销售”]， [新日期2017年0月17日，“融资”]， [新日期2016年0月18日，“租赁”]， [新日期2016年0月18日，“现金销售”]， [新日期2017年0月18日，“现金销售”]， [新日期2017年0月18日，“现金销售”] ]; dataTableSales.sort{column:0}； var-databyear=google.visualization.data.group dataTableSales， [{ 列：0， 键入：“字符串”， 修饰符：函数值{ 返回值.getFullYear.toString； } }, 1], [{ 专栏：1， 键入：“编号”， 聚合：google.visualization.data.count }] ; var dataAll=google.visualization.data.group dataTableSales， [1], [{ 专栏：1， 键入：“编号”， 聚合：google.visualization.data.count }] ; var yearPicker=new google.visualization.ControlWrapper{ controlType:“CategoryFilter”， 集装箱运输：“分类过滤器”， dataTable:databyear， 选项：{ filterColumnIndex:0， 用户界面：{ allowTyping:false， allowMultiple:false， 描述：“所有年份”， 标签：， 标签定位：“垂直” }, useFormattedValue:true } }; google.visualization.events.addListeneryearPicker，'statechange'，函数{ 如果yearPicker.getState.selectedValues.length>0{ pieChart.setView{ 列：[1,2]， 行：databyear.getFilteredRows[{ 列：0， 值：yearPicker.getState.selectedValues[0] }] }; pieChart.setdatatabledatabyear； }否则{ pieChart.setViewnull； pieChart.setDataTabledataAll； } pieChart.draw； }; yearPicker.draw； var pieChart=new google.visualization.ChartWrapper{ 图表类型：'PieChart'， 集装箱船：“海图分区”， dataTable:dataAll， 选项：{ 身高：300 } }; pieChart.draw； }