Question

所以我有一个数据库，该数据库在随机时间获取随机值。例如：

2019-02-22 12:05，500
2019-02-22 12:15，2
2019-02-22 12:19，90

所以我想在折线图中显示它。这是我的代码

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://www.google.com/jsapi"><script>
</head>
<body>
  <div id="chart_div"></div>
 </body>
</html>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart', 'line']});
google.setOnLoadCallback(drawAxisTickColors);

function drawAxisTickColors() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Price');
  data.addColumn('datetime', 'Date');

  var dateArr2 = (<?php echo json_encode($dateArr); ?>);

  var number = (<?php echo json_encode($number); ?>);

  var length = Math.min(dateArr2.length, number.length);
  var rows = [];
  for (var i = 0; i < length; ++i) {
       rows.push([number[i], new Date(dateArr2[i]) ]);
  }

  data.addRows(rows);

  var options = {
  // backgroundColor: '#E4E4E4',
  curveType: 'function',
  chartArea: {
  left: 0,
  top: 0,
  right: 0,
  bottom: 0,
  width: "100%",
  height: "100%"
},
hAxis: {
  textPosition: 'none',
  baselineColor: 'none',
  gridlines: {
    color: 'none'
  },
},
vAxis: {
  textPosition: 'none',
  baselineColor: 'none',
  gridlines: {
    color: 'none'
  }
},
colors: ['#2098d4', '#ffffff'],
legend: 'none'
};

var container = document.getElementById('chart_div');
var chart = new google.visualization.LineChart(container);
chart.draw(data, options);
}
 </script>

这是我的数据库的样子：

但是我的图表如下：

我在做什么错，请帮忙。

编辑

尝试了这个：

number = number.map(Number);

之后

var number = (<?php echo json_encode($number); ?>);

这是结果：

Answer 1

每个图表都有一个特定的data format，
对于LineChart，第一列用作x轴，
每隔一列显示在y轴上。

在这种情况下，要在x轴上显示日期，
只需交换列的顺序...

var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Date');
data.addColumn('number', 'Price');

和...

rows.push([new Date(dateArr2[i]), number[i]]);

还，您使用的是旧版的Google图表。
jsapi应该不再使用，请参见update library loader code，
这只会更改load语句。

来自...

google.load('visualization', '1', {packages: ['corechart', 'line']});
google.setOnLoadCallback(drawAxisTickColors);

到...

google.charts.load('current', {packages:['corechart']});
google.charts.setOnLoadCallback(drawAxisTickColors);

请注意：不需要line软件包，它用于材料图表...

google.charts.Line

您正在使用经典图表...

google.visualization.LineChart

Google图表未在php中显示正确的行为

1 个答案: