Charts Google Dashboard按年份筛选折线图

我有一个数据表，上面有过去3年的汽车销量。我想创建一个折线图，显示给定年份的销售趋势。我需要一个select元素，允许用户按年度筛选销售额

“我的表”有许多列，包括一个“销售日期”（第0列）：

到目前为止，我已经：

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

---

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

首先，需要汇总

“销售类型”的计数。

（类似于）

数据聚合后，将日期列格式化为

'yyyy'

然后在

'CategoryFilter'

useFormattedValue:true

---

请参阅以下工作片段

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 viewColumns=[{
标签：dataTableSales.getColumnLabel（0），
类型：dataTableSales.getColumnType（0），
计算：函数（dt，行）{
返回{
v:dt.getValue（行，0），
f:dt.getValue（行，0.getFullYear（）.toString（））
};
}
}];
var aggColumns=[]；
var saleTypes=dataTableSales.getdistinctValue（1）；
saleTypes.forEach（函数（saleType）{
var colIndex=viewColumns.push({
标签：saleType，
键入：“编号”，
计算：函数（dt，行）{
返回（dt.getValue（行，1）==saleType）？1:0；
}
});
推({
聚合：google.visualization.data.sum，
列：colIndex-1，
标签：saleType，
键入：“数字”
});
});
var view=newgoogle.visualization.DataView（dataTableSales）；
view.setColumns（viewColumns）；
var summary=google.visualization.data.group(
看法
[0],
聚合柱
);
var formatDate=new google.visualization.DateFormat({
模式：“yyy”
});
formatDate.format（摘要，0）；
var datePicker=new google.visualization.ControlWrapper({
controlType:“CategoryFilter”，
集装箱运输：“分类过滤器”，
选项：{
filterColumnIndex:0，
用户界面：{
allowTyping:false，
allowMultiple:false，
标签：“年份：”，
标签定位：“垂直”
},
useFormattedValue:true
}
});
var lineChart=new google.visualization.ChartWrapper({
图表类型：“线条图”，
集装箱船：“海图分区”，
选项：{
宽度：720，
身高：300
}
});
var dashboard=newgoogle.visualization.dashboard（document.getElementById（'dashboard_div'））；
dashboard.bind（日期选择器、折线图）；
仪表盘.绘图（摘要）；
}

如果您能分享一个数据样本，这将非常有帮助-->

gDataTableSales

刚刚更新为包含我的数据表。感谢WhiteHat，尽管我无法将其用于PieChart。我得到一个“饼图应该有字符串类型的第一列”错误。

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