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部分中包含了所需的库。距离和日期是两个1d数组，日期数组包含格式2016/3/19的值，我应该使用日期或字符串作为其列数据类型？

********************* EDIT ******************* 这是我现在的代码：

<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>

如何使用javascript

1 个答案: