javascript - 如何使用javascript从数组中绘制折线图

Question

这是我的数组:

<script>
var table = document.getElementById('mytable');
var rows = table.getElementsByTagName('tr');
var i, j, cells;
var distance=[];
var date=[];
var entryid=[];
j=rows.length;
for (i = 1; i < j; i++) {
cells = rows[i].getElementsByTagName('td');
if (!cells.length) {
continue;
}
distance[i-1] = cells[0].innerHTML;
date[i-1]=cells[1].innerHTML;
entryid[i-1]=cells[2].innerHTML;
}
var c=[];
for (var z=0;z<distance.length;z++){
c.push([distance[z],date[z]]);
}
</script>

我想在我的代码中将二维数组“c”显示为 html 的 div 元素中的折线图。使用javascript。提前致谢 :) 编辑: 使用谷歌图表我这样做了:

function drawBackgroundColor() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Distance');
data.addColumn('number', 'Date');

data.addRows(c);

var options = {
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Popularity'
},
backgroundColor: '#f1f8e9'
};

var chart = new         google.visualization.LineChart(document.getElementById('yo'));
chart.draw(data, options);
}

'c' 数组包含这样的值 [[3,2016/3/20],[5,2016/3/21],...] 但是在 id="yo"的分区上没有显示任何内容。 编辑 ******* 我添加了域列，这是我的新代码。

function drawChart(){
// create DataTable
var data = new google.visualization.DataTable();
data.addColumn('number', 'Id');
data.addColumn('number', 'distance');
data.addColumn('string', 'date');

// load data
for (var p = 0; p < distance.length; p++) {
var row = [p, distance[p], date[p]];
data.addRow(row);
}

var options = {};

var chart = new    google.visualization.LineChart(document.getElementById('yo'));
chart.draw(data, options);
}

但是它不工作，不显示任何东西。我已经在我的 body 元素中编写了这段代码，并在 head 部分包含了所需的库。 距离和日期是两个一维数组，日期数组包含格式为 2016/3/19 的值，我应该为其列数据类型使用日期还是字符串？

*********************编辑********************* 这是我的代码:

<script>
var p=0;
var table = document.getElementById('mytable');
var rows = table.getElementsByTagName('tr');
var i, j, cells;
var distance=[];
var date=[];
var entryid=[];
j=rows.length;
for (i = 1; i < j; i++) {
cells = rows[i].getElementsByTagName('td');
if (!cells.length) {
    continue;
}
distance[i-1] = cells[0].innerHTML;
date[i-1]=new Date(reverse(cells[1].innerHTML));
entryid[i-1]=cells[2].innerHTML;
}
var c=[];
for (var z=0;z<distance.length;z++){
c.push([date[z],distance[z]]);
}
document.getElementById('cvs').innerHTML=c[0];
function reverse(f){
var g=f.split("/");
var goodstr=g[1]+"/"+g[2]+"/"+g[0];
return goodstr;
}
google.charts.load('44', {
callback: drawBackgroundColor,
packages: ['corechart']
});

function drawBackgroundColor() {
var m = [
[new Date('3/16/2016'), 3],
[new Date('3/17/2016'), 5],
[new Date('3/18/2016'), 7],
[new Date('3/19/2016'), 10],
];

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

data.addRows(c);

var options = {
hAxis: {
  title: 'Time'
},
vAxis: {
  title: 'Popularity'
},
backgroundColor: '#f1f8e9'
};

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

这看起来很正确，但是行不通...我不知道为什么! @WhiteHat 非常感谢你的帮助，...在你提供的代码中，如果我使用你在 data.addRows() 中使用的'm'数组，它的工作，但是当我把我的数组'c'它不工作:(

Answer 1

不要认为您会找到任何更容易的东西。
试试这个，如果需要我可以在 HTML 表格中添加...

google.charts.load('44', {
  callback: drawBackgroundColor,
  packages: ['corechart']
});

function drawBackgroundColor() {
  var c = [
    [new Date('3/16/2016'), 3],
    [new Date('3/17/2016'), 5],
    [new Date('3/18/2016'), 7],
    [new Date('3/19/2016'), 9],
  ];

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

  data.addRows(c);

  var options = {
    hAxis: {
      title: 'Time'
    },
    vAxis: {
      title: 'Popularity'
    },
    backgroundColor: '#f1f8e9'
  };

  var chart = new google.visualization.LineChart(document.getElementById('yo'));
  chart.draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="yo"></div>