[英]Google Visualisation Line Chart - Multiple Lines
I have a line chart, h-axis is date, v-axis is double. 我有一个折线图,h轴是日期,v轴是双。 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]
]
To display the data on the chart, I need to combine these two lines and pass the result to arrayToDataTable. 要在图表上显示数据,我需要组合这两行并将结果传递给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],
]
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. 我发现的所有示例都要求将它们合并为
combine
表。
I need to keep the nulls when provided as part of line1 and line2 table
当作为line1和line2表的一部分提供时,我需要保留空值
use the following option to fill in gaps created by null
values 使用以下选项填充由
null
值创建的间隙
interpolateNulls: true
EDIT 编辑
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.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.