Google图表专栏:如何使用连续轴正确连接点

时间:2014-11-22 14:34:33

标签: javascript graph charts google-visualization

我在Google Chart折线图上遇到了问题。我试图使用连续轴,但我得到了这个:

Chart

正如您所看到的,我无法使用X(日期)连接点,但是使用Y连接点。如何更改此图并获得"正常&#34 ;图表?

我使用过的代码就是这个代码:

google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Data');
  data.addColumn('number', 'Prestazione');
  data.addRows([
    [new Date(2005, 05, 01), 9.17],
    [new Date(2005, 07, 01), 9.2],
    [new Date(2006, 07, 07), 8.7],
    [new Date(2006, 04, 08), 8.84],
    [new Date(2005, 10, 08), 9.09],
    [new Date(2006, 06, 10), 8.58],
    [new Date(2006, 06, 10), 8.66],
    [new Date(2005, 07, 13), 9.2],
    [new Date(2006, 09, 13), 8.8],
    [new Date(2006, 07, 14), 8.71],
    [new Date(2005, 07, 15), 8.7],
    [new Date(2008, 01, 20), 8.50],
    [new Date(2005, 05, 21), 9.0],
    [new Date(2006, 05, 27), 8.6],
    [new Date(2006, 06, 28), 8.7],
  ]);

  var options = {
    title: '',
    pointSize: 5,
    curveType: 'function',
    legend: 'none',
    explorer: {}
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div01'));
  chart.draw(data, options);
}

2 个答案:

答案 0 :(得分:1)

这是因为Google图表中的折线图不会根据x轴值自行排序数据。 如果您想要一个连续的图表,您应该根据x轴值(在您的情况下为时间戳)对数据进行排序,然后将其传递给Google图表。

答案 1 :(得分:0)

  1. 您可以使用 data.sort([{column:0}]); 来基于x轴对其进行排序,此处的第0列表示x轴。https://developers.google.com/chart/interactive/docs/reference#DataTable_getSortedRows < / li>
  2. 如果您尝试传递的值是通过某些xml或json传递的,并且其中包含null值,则将无法正确绘制,并且会散布或折线图中的虚线,因此要绘制它们,必须有条件删除所有空值,然后它将正确绘制。