从Google图表的输入中获取值


Getting values from input for Google Charts

我有一个以表格格式列出一些销售数据的页面。我想附上一张图表。由于我已经必须检索表的数据,我想我还应该为谷歌构建数组,并将其放入隐藏输入中,以使用javascript检索它。这就是javascript

     // Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});

google.setOnLoadCallback(drawChart);
function drawChart() {
    var chartD = document.getElementById('chartD').value;
    var data = google.visualization.arrayToDataTable([chartD]);
    var options = {'title':'Sales'};
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}

这是我从获得数据的输入

<input type="hidden" id="chartD" value="['Date', 'Units Sold'], 
    ['03-01', 12.00], ['03-04', 32.00], ['03-06', 6.00],
    ['03-08', 19.00], ['03-11', 10.00], ['03-13', 5.00], ['03-15', 0]">

但是当我运行这个时,我得到了一个错误不是一个有效的2D数组然后我直接从视图页面源复制了这个值,就像这个

var data = google.visualization.arrayToDataTable([['Date', 'Units Sold'], 
   ['03-01', 12.00], ['03-04', 32.00], ['03-06', 6.00], ['03-08', 19.00],
   ['03-11',    10.00], ['03-13', 5.00], ['03-15', 0]]);

而且效果很好。有人知道问题出在哪里吗?

这是正常的javascript功能,没有谷歌独有的功能,也没有其他奇怪的功能。

将HTML隐藏的div元素放入文档中:

<input type="hidden" id="chartD" value="['Date', 'Units Sold'],
 ['03-01', 12.00], ['03-04', 32.00], ['03-06', 6.00],
 ['03-08', 19.00], ['03-11', 10.00], ['03-13', 5.00], ['03-15', 0]">

现在测试这个javascript:

    var chartD = document.getElementById('chartD').value;
    var array = new Array(['Date', 'Units Sold'],      ['03-01',  12.00], ['03-04', 32.00], ['03-06', 6.00],     ['03-08', 19.00],  ['03-11', 10.00], ['03-13', 5.00], ['03-15', 0]);
    var array2 = new Array(chartD);
    alert(array.length);
    alert(array2.length);

这与标准javascript的行为完全相同。

使用复制粘贴定义对象时,会得到一个包含8行2列(因此长度为8)的数组。

当你用字符串定义对象时,你会得到一个有一行一列的数组(包含一个非常长的字符串)。

你为什么期望谷歌采取不同的行动?

你要么需要:

  1. 将完全成型的2D阵列传递到谷歌
  2. 手动传入定义字符串的数组

这些都包含在文档中。

期望谷歌有一些不同于javascript的古怪行为可能不是最好的方法。