我已经实施了如下的Google图表API
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('number', 'Year');
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn('number', 'Val 1');
data.addColumn('number', 'Val 2');
data.addRows([
[2008,' ', 20, 15],
[2008.5,' ', null, null],
[2009,' ', 25, null],
[2009.5,' ', null, null],
[2010,' ', 30,33],
[2010.5,' ', null, null],
[2011,' ', 23, 38],
]);
// Create and draw the visualization.
var ac = new google.visualization.ComboChart(document.getElementById('visualization'));
ac.draw(data, {
title : 'Google Chart api',
interpolateNulls: false,
vAxis: {},
hAxis: {
ticks:[{v: 2008, f: '2008'},{v: 2009, f: '2009'},{v: 2010, f: '2010'},{v: 2011, f: '2011'}]
},
seriesType: "bars",
series: {0: {type: "line"},1: {type: "line"}}
});
}
实际图表
有刻度标记,这就是我添加带小数值的数据点的原因(2008.5,2009.5 ......) 我有像2008年,2009年,2010年这样的年度价值线的数据点。
如果我设置InterpolateNulls:true,则表示它连接数据点,否则每个数据点都没有连接并显示为自主。
所以我可以设置interpolateNulls:对于某些数据点是true还是仅在google chart api中的某些列?
预期图表
答案 0 :(得分:4)
[编辑:新答案,旧答案无效(但是?)]
LineChart根据DataTable中的邻接连接点,而不是值的邻接,因此您可以重新排列数据以在需要的地方使用空值,并在不需要的地方避免使用它们:
data.addRows([
// set annotations
[2008, ' ', null, null],
[2008.5, ' ', null, null],
[2009, ' ', null, null],
[2009.5, ' ', null, null],
[2010, ' ', null, null],
[2010.5, ' ', null, null],
[2011, ' ', null, null],
// "Val 1" should be connected with a line, so we don't want this to have any null gaps
[2008, null, 20, null],
[2009, null, 25, null],
[2010, null, 30, null],
[2011, null, 23, null],
// the last two points on "Val 2" should be connected, but not the first
[2008, null, null, 15],
[null, null, null, null], // this line of nulls will break the connection between the first and second data points
[2010, null, null, 33],
[2011, null, null, 38],
]);
参见工作示例:http://jsfiddle.net/asgallant/LXkee/
[旧答案,供参考]
您可以使用interpolateNulls
选项逐个系列地设置series.<series index>.interpolateNulls
:
series: {
0: {
type: "line",
interpolateNulls: true
},
1: {
type: "line"
}
}