我的问题是使用Google Charts API叠加柱状条形图。
我正试图从中获得全球趋势线。
<script type="text/javascript">
google.charts.load("current", {"packages":["corechart"]});
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var data = google.visualization.arrayToDataTable([['Month', 'OK', 'KO', 'Estimation'],[ '2016/08', 1990, 49, null ],[ '2016/09', 6892, 97, null ],[ '2016/10', 6018, 0, null ],[ '2016/11', 7329, 146, null ],[ '2016/12', 3059, 97, 1827 ]]);
var options = {
isStacked: true,
seriesType: "bars",
legend: "none",
hAxis:{ textPosition: "none" },
vAxis: { viewWindow: { min: 0, max: 8000 } },
trendlines: { 0: {} }
};
var chart = new google.visualization.ComboChart(document.getElementById("bar"));
chart.draw(data, options);
}
</script>
当我添加trendlines: { 0: {} },
时,我没有得到任何结果。
我在参考指南中没有找到任何内容。也许它没有实现,或者我做错了?
答案 0 :(得分:1)
虽然文档中未提及,trendlines
仅支持连续 x轴
这意味着第一列的值应该是日期,数字等......
字符串值会产生离散轴
请参阅discrete vs continuous ...
请参阅以下工作代码段...
使用DataView
将第一列转换为实际日期,启用trendlines
...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Month', 'OK', 'KO', 'Estimation'],
['2016/08', 1990, 49, null],
['2016/09', 6892, 97, null],
['2016/10', 6018, 0, null],
['2016/11', 7329, 146, null],
['2016/12', 3059, 97, 1827]
]);
var view = new google.visualization.DataView(data);
view.setColumns([{
calc: function (dt, row) {
var dateParts = dt.getValue(row, 0).split('/');
return new Date(parseInt(dateParts[0]), parseInt(dateParts[1]) - 1, 1);
},
type: 'date',
label: data.getColumnLabel(0)
}, 1, 2, 3]);
var options = {
isStacked: true,
seriesType: 'bars',
legend: 'none',
hAxis: {
textPosition: 'none'
},
vAxis: {
viewWindow: {
min: 0,
max: 8000
}
},
trendlines: {
0: {}
}
};
var chart = new google.visualization.ComboChart(document.getElementById('bar'));
chart.draw(view, options);
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="bar"></div>