首页 > 解决方案 > 如何使用谷歌图表设置数组添加行

问题描述

我正在尝试从这些链接设置一个谷歌散点图页面......

https://developers.google.com/chart/interactive/docs/gallery/scatterchart 并在此处创建数据表... https://developers.google.com/chart/interactive/docs/drawing_charts#chart.draw

基本上我有基本的演示副本工作。现在我正在尝试用这样的时间和日期数据填充数据表......添加这样的行......

// Create the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Time');
  data.addColumn('number', 'Date');
  data.addRows([

// 这个原始文本有效 [22,5],[10,24],[9,5],[10,6],[10,7],[7,8]

// 但是我的 var - 数据库中的日期时间不起作用 //错误:给定的每一行都必须是 null 或数组。

约会时间 ]);

如果我手动输入:

[22,5],[10,24],[9,5],[10,6],[10,7],[7,8]

有用。

现在我正在尝试查询数据库 - 然后执行 .each 循环来获取数据......

//Query the database...
// query here..
datetime = "";
$.each(data, function(key, value) {
//note: each row comes in from the database like: 
//thedate: "02/17/2018" thetime: "18:00:00"
//then I split to just get basic hour and day
t = value.thetime.split(":")    
d = value.thedate.split("/")    
//and create as numbers
tnum =  parseInt(t[0]);
dnum =  parseInt(d[1]); 
//and add to the datetime var
datetime += "["+ dnum + ","+ tnum + "],"
// there was more code to eliminate last ","
// then the end result var datetime looks something like:
//[22,5],[10,24],[9,5],[10,6],[10,7],[7,8] 

如果我手动将其粘贴到添加行区域 - 它可以工作,但是如果只是将日期时间变量粘贴到相同的添加行区域。错误说:

错误:给定的每一行必须为空或数组。

问:我确定我遗漏了一些基本的东西,例如图表需要可能显示为字符串的数字,或者我的数组错误或其他问题。为了让图表接受我的日期时间变量,有什么需要改变的吗?

标签: javascriptgoogle-visualization

解决方案


看起来您正在尝试从字符串创建一个数组,
而是使用一个实际的数组,它addRows期望......

datetime = [];
$.each(data, function(key, value) {
  t = value.thetime.split(":")    
  d = value.thedate.split("/")    
  tnum =  parseInt(t[0]);
  dnum =  parseInt(d[1]); 

  datetime.push([dnum, tnum]);
});

data.addRows(datetime);

推荐阅读