带有动态数组的Google Chart

时间:2017-07-27 02:16:31

标签: javascript google-visualization

如何转换此数组以添加谷歌图表新数据变量:

var array_column =["Year","Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var array_rows = ["2014", 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2.67, 0, "2015", 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2.33, 0, "2016", 0, 0, 0, 0, 4, 0, 0, 0, 0, 4, 4, 2.67, "2017", 2, 0, 0, 4.33, 2.67, 0, 2.5, 0, 0, 0, 0, 0, "2018", 0, 0, 2.17, 0, 0, 0, 0, 0, 0, 0, 0, 0]

基本上,array_rows是由13.动态添加的。在array_column上固定长度为13。 有没有办法如何将上面的array_rows添加13并使它像这样?

 var newData = [
['Year', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
["2014", 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2.67, 0],
["2015", 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2.33, 0],
["2016", 0, 0, 0, 0, 4, 0, 0, 0, 0, 4, 4, 2.67],
["2017", 2, 0, 0, 4.33, 2.67, 0, 2.5, 0, 0, 0, 0, 0],
["2018", 0, 0, 2.17, 0, 0, 0, 0, 0, 0, 0, 0, 0]
         ];

      // in this case the first column is of type 'string'.
      dataTable.addColumn('string', newData[0][0]);

      // all other columns are of type 'number'.
      for (var i = 1; i < numCols; i++)
        dataTable.addColumn('number', newData[0][i]);           

      // now add the rows.
      for (var i = 1; i < numRows; i++) 
        dataTable.addRow(newData[i]);        

      // redraw the chart.
      chart.draw(dataTable, options);    

// --------------------更新------------------------ -------

var array_column = ["Year","Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var array_rows = ["2014", 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2.67, 0, "2015", 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2.33, 0, "2016", 0, 0, 0, 0, 4, 0, 0, 0, 0, 4, 4, 2.67, "2017", 2, 0, 0, 4.33, 2.67, 0, 2.5, 0, 0, 0, 0, 0, "2018", 0, 0, 2.17, 0, 0, 0, 0, 0, 0, 0, 0, 0]

var splice=13;
var arr = array_rows;
var newarr = new Array();

console.log("newarr_column: "+array_column);

for (var i=0; i<arr.length; i=i+splice) {
    newarr.push(arr.slice(i,i+splice));
    console.log("slice: "+arr.slice(i,i+splice))
}


//Is this correct?
 var newData = [array_column,newarr];

它在谷歌图表中给我这个错误:

enter image description here

当我使用这个变量时,它起作用了。

var newData = [
    ['Year', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    ["2014", 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2.67, 0],
    ["2015", 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2.33, 0],
    ["2016", 0, 0, 0, 0, 4, 0, 0, 0, 0, 4, 4, 2.67],
    ["2017", 2, 0, 0, 4.33, 2.67, 0, 2.5, 0, 0, 0, 0, 0],
    ["2018", 0, 0, 2.17, 0, 0, 0, 0, 0, 0, 0, 0, 0]
             ];

1 个答案:

答案 0 :(得分:1)

我已修改您的代码以与您已编写的内容保持一致,但可以稍微清理一下。

初始解决方案的问题在于此声明,

var newData = [array_column,newarr];

创建一个数组,其中columns数组作为第一个元素,第二个数组包含带行的数组。为了使图表起作用,您需要有一个数组,其中列作为第一个元素,第一行作为第二个元素,第二行作为第三个元素,依此类推......

这就是为什么我修改你的代码以在分割行之前将array_column推送到结果数组中(感谢@WhiteHat)

newarr.push(array_column);

以下是修改后的代码:

var array_column = ["Year","Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var array_rows = ["2014", 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2.67, 0, "2015", 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2.33, 0, "2016", 0, 0, 0, 0, 4, 0, 0, 0, 0, 4, 4, 2.67, "2017", 2, 0, 0, 4.33, 2.67, 0, 2.5, 0, 0, 0, 0, 0, "2018", 0, 0, 2.17, 0, 0, 0, 0, 0, 0, 0, 0, 0]

var splice=13;
var arr = array_rows;
var newarr = new Array();

console.log("newarr_column: "+array_column);

newarr.push(array_column);

for (var i=0; i<arr.length; i=i+splice) {
    newarr.push(arr.slice(i,i+splice));
    console.log("slice: "+arr.slice(i,i+splice))
}

newData = newarr;