Google图表：动态生成与静态生成时，arrayToDataTable的结果不同

Question

我正在动态创建一个堆叠的条形图，看起来像这样：https://developers.google.com/chart/interactive/docs/gallery/barchart#stacked-bar-charts

我创建了一个可以工作的静态图。但是，当我动态创建arrayToDataTable并将数组对象传递给arrayToDataTable（myobject）时，会得到不同的图形样式/比例。

而不是上面堆叠的示例，我的堆叠条针对每种数据类别使用全宽。好像每个类别的比例都是100％。

如果将数据数组与我的正确静态示例与我动态创建的数据数组进行比较，则它们是相同的，除了动态生成的列数组具有'id'和模式'keys'，而静态生成的列数组没有。动态图可以正确显示列和行数据，但是会产生错误的图宽度。

很难提取完整的代码作为其仪表板的一部分，但这是我的drawchart函数，该函数从google工作表中获取全局变量carbonChartData，并将其转换为全局var'tcd'（转置的碳数据）。然后，我遍历仪表板表元素和转置的数据，以构造传递给可视化的gData。我还包括了可以使用的静态数组。

function drawCarbonChartData() {

//carbonChartData is our core data return 
if(carbonChartData.length < 1) return ;
var rows = document.querySelectorAll('#dataTable tbody tr'); 

tcd = tcd.slice(1); //remove 'table' headers chartdata

var dn=[]; 

gData = new google.visualization.DataTable();

gData.addColumn('string', 'Scenario');

//build columns by looping through table and grabbing current select value choices
for(var i =0 ; i < rows.length;i++ ){
  ptype = rows[i].cells[2].querySelector('.part').value;
  if (ptype.length > 0){
      // Declare columns
        gData.addColumn('number', ptype);     
  }
}
//build rows array from array tcd - the transposed value data and add scenario label on front
for(var i =0 ; i < tcd.length;i++ ){
  dn = 1 + i;
  designLabel = 'DS ' + dn;
  tcd[i].unshift(designLabel);
}
//add rows to gData
gData.addRows(tcd);  

//static data array to console test against gData
gDataTest = google.visualization.arrayToDataTable([
['Scenario', 'PCBA 2 layer PCB + EE',   'Cable, PE jacket, 4.5g/m, D1.4',   'Al INGOT, DIE CAST',   'HIPS, SINGLE INJECTION',   'ABS, SINGLE INJECTION',    'BATTERY, Li-ion Rechargable single cell',  'BATTERY AA ALKALINE'],
['DS1', 0.04,   0.11,   0.16,   0.24,   0.31,   0.00,   0.14],
['DS2', 0.05,   0.09,   0.10,   0.24,   0.62,   0.58,   0.00],
['DS3', 0.06,   0.17,   0.33,   0.48,   0.93,   1.17,   0.00]
 ]);


var view = new google.visualization.DataView(gData);

var chart = new 
google.visualization.BarChart(document.getElementById('chart_div'));

chart.draw(view, globalOptions);
}

传递的动态vis数据在控制台中如下所示：

静态数据（值不同但结构正确）控制台输出：

动态数组中的差异似乎是空键'id'和'pattern'。图表仍会呈现，但动态a变为100％宽。

Answer 1

动态数据已经采用json数据表格式，如下所示。

var gData = {
  cols: [
    {id: "", label: "Scenario", pattern: "", type: "string", p: {}},
    {id: "", label: "PCBA 2 layer PCB + EE", pattern: "", type: "number", p: {}},
    {id: "", label: "Cable, PE jacket, 4.5g/m, D1.4", pattern: "", type: "number", p: {}},
    {id: "", label: "Al INGOT, DIE CAST", pattern: "", type: "number", p: {}},
    {id: "", label: "HIPS, SINGLE INJECTION", pattern: "", type: "number", p: {}},
    {id: "", label: "ABS, SINGLE INJECTION", pattern: "", type: "number", p: {}},
    {id: "", label: "BATTERY, Li-ion Rechargable single cell", pattern: "", type: "number", p: {}},
    {id: "", label: "BATTERY AA ALKALINE", pattern: "", type: "number", p: {}}
  ],
  rows: [
    {c:[{v: "DS1"}, {v: 0.04}, {v: 0.11}, {v: 0.16}, {v: 0.24}, {v: 0.31}, {v: 0.00}, {v: 0.14}]},
    {c:[{v: "DS2"}, {v: 0.05}, {v: 0.09}, {v: 0.10}, {v: 0.24}, {v: 0.62}, {v: 0.58}, {v: 0.00}]},
    {c:[{v: "DS3"}, {v: 0.06}, {v: 0.17}, {v: 0.33}, {v: 0.48}, {v: 0.93}, {v: 1.17}, {v: 0.00}]}
  ]
};

此数据可用于直接创建数据表。

var dataTable = new google.visualization.DataTable(gData);  // <-- pass json here

请参阅-> Format of the Constructor's JavaScript Literal data Parameter

arrayToDataTable是将数组数据转换为数据表的静态方法。并且不需要动态数据

请参阅以下工作片段...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {

  var gData = {
    cols: [
      {id: "", label: "Scenario", pattern: "", type: "string", p: {}},
      {id: "", label: "PCBA 2 layer PCB + EE", pattern: "", type: "number", p: {}},
      {id: "", label: "Cable, PE jacket, 4.5g/m, D1.4", pattern: "", type: "number", p: {}},
      {id: "", label: "Al INGOT, DIE CAST", pattern: "", type: "number", p: {}},
      {id: "", label: "HIPS, SINGLE INJECTION", pattern: "", type: "number", p: {}},
      {id: "", label: "ABS, SINGLE INJECTION", pattern: "", type: "number", p: {}},
      {id: "", label: "BATTERY, Li-ion Rechargable single cell", pattern: "", type: "number", p: {}},
      {id: "", label: "BATTERY AA ALKALINE", pattern: "", type: "number", p: {}}
    ],
    rows: [
      {c:[{v: "DS1"}, {v: 0.04}, {v: 0.11}, {v: 0.16}, {v: 0.24}, {v: 0.31}, {v: 0.00}, {v: 0.14}]},
      {c:[{v: "DS2"}, {v: 0.05}, {v: 0.09}, {v: 0.10}, {v: 0.24}, {v: 0.62}, {v: 0.58}, {v: 0.00}]},
      {c:[{v: "DS3"}, {v: 0.06}, {v: 0.17}, {v: 0.33}, {v: 0.48}, {v: 0.93}, {v: 1.17}, {v: 0.00}]}
    ]
  };

  var dataTable = new google.visualization.DataTable(gData);  // <-- pass json here

  var globalOptions = {
    height: 400,
    legend: {
      maxLines: 5,
      position: 'top'
    }
  };

  var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
  chart.draw(dataTable, globalOptions);

});

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