Диаграмма Google: разные результаты с arrayToDataTable при динамическом генерировании по сравнению со статическим - PullRequest
Новая
       5

Диаграмма Google: разные результаты с arrayToDataTable при динамическом генерировании по сравнению со статическим

1 голос
/ 17 января 2020

Я динамически создаю диаграмму с накоплением, которая будет выглядеть примерно так: https://developers.google.com/chart/interactive/docs/gallery/barchart#stacked -бар-диаграммы

Я создал график состояния c, который работает. ОДНАКО когда я динамически создаю arrayToDataTable и передаю объект массива в arrayToDataTable (myobject), я получаю другой стиль / масштаб графика.

Вместо сложенного примера над столбцами с накоплением go полная ширина для каждой категории данных. Это как если бы масштаб составлял 100% для каждой категории.

Если сравнить массив данных с моим правильным примером stati c с моим динамически созданным массивом данных, они идентичны, за исключением того, что динамически сгенерированный массив столбцов имеет 'id' и шаблон «ключи», в то время как статически не генерируется. Dynami c отображает правильные данные столбцов и строк, но просто выдает неправильную ширину графика.

Трудно извлечь полный код как часть панели инструментов, но вот моя функция drawchart, которая принимает глобальную переменную carbonChartData из листа Google, который транспонируется в глобальную переменную 'tcd' (транспонированные данные углерода). Затем я проведу oop через элементы таблицы панели инструментов и транспонированные данные, чтобы создать данные gData, которые передаются в визуализацию. Я также включил массив stati c, который работает. 

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);
}

Переданные данные Dynami c в консоли выглядят так: enter image description here

Данные STATI c (разные значения, но правильная структура ) консольный вывод: enter image description here

Разница в массиве dynamici c представляется пустыми ключами 'id' и 'pattern'. Графики по-прежнему отображаются, но ширина c a становится 100%.

1 Ответ

0 голосов
/ 18 января 2020

данные Dynami c уже находятся в формате таблицы данных 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

см. -> Формат JavaScript литеральных данных Конструктора Параметр

arrayToDataTable - это метод stati c для преобразования данных массива в таблица данных.
и не требуется с динамическими данными c data

, см. следующий рабочий фрагмент ... 

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