Javascript 谷歌图表没有'；无法在php中显示正确的行为_Javascript_Charts_Google Visualization

Javascript 谷歌图表没有'；无法在php中显示正确的行为

javascript charts google-visualization

Javascript 谷歌图表没有'；无法在php中显示正确的行为,javascript,charts,google-visualization,Javascript,Charts,Google Visualization,所以我有一个数据库，它在随机时间获取随机值。例如： 2019-02-22 12:05500 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> </he

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

2019-02-22 12:05500
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>

之后

var编号=（）；

结果是：

每个图表都有一个特定的，
对于

折线图

，第一列用作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]]);

此外，您正在使用旧版本的谷歌图表。

jsapi

不应再使用，请参阅，
这只会更改

load

语句

从

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

到

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

注：不需要

行

包，它用于物料图表

google.charts.Line

你使用的是经典图表

google.visualization.LineChart

如果您使用

data.addColumn（'number'，'Price'）

即使用number而不是string，是否有效？@SalmanA否，因为我得到了错误：值10不是一个数字。当然可以。您还需要将

“500”

转换为500，例如

var number=；数字=数字。地图（数字）

。我想这张图表应该可以用了。@SalmanA好吧，它做了一些事情。我将编辑我的帖子，告诉你它做了什么，它需要沿着x轴，对吧（我想你是在y轴上添加它们）。

google.charts.Line

google.visualization.LineChart