谷歌图表/可视化api Interpolate Null仅适用于某些数据点吗?

时间:2014-05-05 06:45:04

标签: charts google-api google-visualization

我已经实施了如下的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"}}
  });
}

实际图表

actual chart

有刻度标记,这就是我添加带小数值的数据点的原因(2008.5,2009.5 ......) 我有像2008年,2009年,2010年这样的年度价值线的数据点。

如果我设置InterpolateNulls:true,则表示它连接数据点,否则每个数据点都没有连接并显示为自主。

所以我可以设置interpolateNulls:对于某些数据点是true还是仅在google chart api中的某些列?

预期图表

enter image description here

1 个答案:

答案 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"
    }
}