Google图表线:如何使用连续轴正确连接点 [英] Google chart line: how to connect dots properly using a continuous axes

问题描述

我在Google图表折线图上遇到问题.我正在尝试使用连续轴，但是我得到了:

I have a problem on a Google Chart line graph. I'm trying to use a continuous axis, but I obtain this:

如您所见，我无法使用X(日期)连接点，但使用Y来连接点.如何更改此图并获得正常"图?

As you can see, I'm not able to connecting dots using the X (date), but the dots are connect using the Y. How can I change this graph and obtain a "normal" graph?

我使用的代码是这样的:

The code that I've used is this one:

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

推荐答案

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

This is because line chart in Google chart doesnt order the data by itself based on the x axis values. If you want to have a continuous graph, you should sort the data based on x-axis value (timestamp in your case) and then pass it to Google charts.

这篇关于Google图表线:如何使用连续轴正确连接点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！