谷歌图表线：如何使用连续轴正确连接点答案

【问题标题】：Google chart line: how to connect dots properly using a continuous axes谷歌图表线：如何使用连续轴正确连接点
【发布时间】：2014-11-22 14:34:32
【问题描述】：

我在使用 Google Chart 折线图时遇到问题。我正在尝试使用连续轴，但我得到了这个：

如您所见，我无法使用 X（日期）连接点，但使用 Y 连接点。如何更改此图并获得“正常”图？

我使用的代码是这个：

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);
}

【问题讨论】：

标签： javascript graph charts google-visualization

【解决方案1】：

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

【讨论】：

你救了我的命，10 倍！ :)

【解决方案2】：

你可以使用data.sort([{column: 0}]);来根据x轴排序，这里column:0表示x轴。https://developers.google.com/chart/interactive/docs/reference#DataTable_getSortedRows
如果您尝试传递的值是通过某些 xml 或 json 传递的，并且其中包含 null 值，它将无法正确绘制并且会分散或在折线图中显示为虚线以便绘制它们，有条件删除所有null 值，然后它将正确绘制。

【讨论】：