Google可视化折线图-多条线 [英] Google Visualisation Line Chart - Multiple Lines
问题描述
我有一个折线图,h轴是日期,v轴是双精度. 我需要显示两行:
I have a line chart, h-axis is date, v-axis is double. I need to display two lines:
lineA: [
[2016-1-1 00:00, 1.1]
[2016-2-1 00:00, 1.1]
[2016-3-1 00:00, 1.1]
]
lineB: [
[2016-1-1 00:00, 2.1]
[2016-2-1 08:00, 2.1]
[2016-3-1 00:00, 2.1]
]
要在图表上显示数据,我需要将这两条线结合起来并将结果传递给arrayToDataTable.
To display the data on the chart, I need to combine these two lines and pass the result to arrayToDataTable.
combine: [
[2016-1-1 00:00, 1.1, 2.1],
[2016-2-1 00:00, 1.1, null],
[2016-2-1 08:00, null, 2.1],
[2016-3-1 00:00, 1.1, 2.1],
]
由于上述原因,我的差距越来越大.我该如何解决这个问题?是否可以传递两个单独的组,每行一组?我发现的所有示例都要求将它们合并为combine
表.
As a result of the above, I am getting gaps on the lines. How can I solve this issue? Is it possible to pass two individual sets, one for each line? All the examples I have found require them to be merged as the combine
table.
当作为第1行和第2行的一部分提供时,我需要保留空值 桌子
I need to keep the nulls when provided as part of line1 and line2 table
推荐答案
使用以下选项填补由null
值创建的空白
use the following option to fill in gaps created by null
values
interpolateNulls: true
编辑
请参阅以下工作摘要...
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
[new Date(2016, 0, 1), 1.1, 2.1],
[new Date(2016, 1, 1), 1.1, null],
[new Date(2016, 1, 1, 8), null, 2.1],
[new Date(2016, 2, 1), 1.1, 2.1]
], true);
var options = {
interpolateNulls: true
};
var container = document.body.appendChild(document.createElement('div'));
var chart = new google.visualization.LineChart(container);
chart.draw(data, options);
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
这篇关于Google可视化折线图-多条线的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!