Question

我正在尝试使用Google可视化创建折线图。所以我从他们的网页chart example复制了这个例子并且它有效。

我想要做的唯一改变是x轴是日期而不是数字。所以下面的代码的第一部分工作正常，它来自他们的网站。

<!DOCTYPE html>
<html lang="en-US">
<body>

<div id="linechart_material"></div>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
// Load google charts
  google.charts.load('current', {'packages':['line']});
  google.charts.setOnLoadCallback(drawChart);

function drawChart() {

  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Day');
  data.addColumn('number', 'Guardians of the Galaxy');
  data.addColumn('number', 'The Avengers');
  data.addColumn('number', 'Transformers: Age of Extinction');

  data.addRows([
    [1,  37.8, 80.8, 41.8],
    [2,  30.9, 69.5, 32.4],
    [3,  25.4,   57, 25.7],
    [4,  11.7, 18.8, 10.5],
    [5,  11.9, 17.6, 10.4],
    [6,   8.8, 13.6,  7.7],
    [7,   7.6, 12.3,  9.6],
    [8,  12.3, 29.2, 10.6],
    [9,  16.9, 42.9, 14.8],
    [10, 12.8, 30.9, 11.6],
    [11,  5.3,  7.9,  4.7],
    [12,  6.6,  8.4,  5.2],
    [13,  4.8,  6.3,  3.6],
    [14,  4.2,  6.2,  3.4]
  ]);

  var options = {
    chart: {
      title: 'Box Office Earnings in First Two Weeks of Opening',
      subtitle: 'in millions of dollars (USD)'
    },
    width: 900,
    height: 500
  };

  var chart = new google.charts.Line(document.getElementById('linechart_material'));

  chart.draw(data, google.charts.Line.convertOptions(options));
}
</script>

</body>
</html>

但是，当我进行以下更改时，不显示任何内容，

data.addColumn（'number'，'Day'）; to data.addColumn（'date'，'Day'）;

将data.addRows位更改为

data.addRows([
    [new date(2018,1, 1),  37.8, 80.8, 41.8],
    [new date(2018,1, 2),  30.9, 69.5, 32.4],
    [new date(2018,1, 3),  25.4,   57, 25.7],
    [new date(2018,1, 4),  11.7, 18.8, 10.5],
    [new date(2018,1, 5),  11.9, 17.6, 10.4],
    [new date(2018,1, 6),   8.8, 13.6,  7.7],
    [new date(2018,1, 7),   7.6, 12.3,  9.6],
    [new date(2018,1, 8),  12.3, 29.2, 10.6],
    [new date(2018,1, 9),  16.9, 42.9, 14.8],
    [new date(2018,1, 10), 12.8, 30.9, 11.6],
    [new date(2018,1, 11),  5.3,  7.9,  4.7],
    [new date(2018,1, 12),  6.6,  8.4,  5.2],
    [new date(2018,1, 13),  4.8,  6.3,  3.6],
    [new date(2018,1, 14),  4.2,  6.2,  3.4]
  ]);

Answer 1

D中的new Date应该大写......

data.addRows([
  [new Date(2018,1, 1),  37.8, 80.8, 41.8],  // <-- be sure Date is capitalized

在Google可视化行上绘制x轴日期

1 个答案: