javascript - 从数组转换为 Google Visualization DataTable 时数组项丢失

Question

我正在调用返回有效 JSON 数据的 API。 Google 可视化图表要求将数据绑定(bind)到来自 JavaScript 数组的图表，而不是 JSON 数组(或数组的数组)。因此，使用我发现的答案 elsewhere ，我已经实现了这一点。

当 JSON 字符串包含多个项目时，它可以完美工作，但对于单个 JSON(非数组)字符串，部分数据会在转换过程中丢失。

代码的主要部分是:

var data = JSON.parse('{"Total Users":206,"Active Users":137,"Archived Users":69}');
var arrayOfArrays = []; 
var colHead = [];

for (key in data) {
    colHead.push(key);
}
arrayOfArrays.push(colHead);
var gglRow = [];
for (key in data) {
   if (data.hasOwnProperty(key)) {
       gglRow.push(data[key]);
   }
}
arrayOfArrays.push(gglRow);
var googleDt = new google.visualization.arrayToDataTable(arrayOfArrays, false);
var chart = new google.visualization.ColumnChart(document.getElementById('MyChart'));
var options = {title: 'Test', width: 500, height: 300 };
chart.draw(googleDt, options);

JSFiddle here

然而，当渲染图表时，总是缺少一项:

我尝试了多个数据源，但始终缺少一项。 arrayOfArrays.toString() 的控制台日志显示了所有数据。我无法确定问题是出在我的数组代码上，还是出在图表绑定(bind)上......

解决方案

感谢@WhiteHat，解决方案是重写创建 Google DataTable 的迭代代码，使其具有 2 列格式。呈现为表格而不是图表使问题变得显而易见。

旧(不正确)格式:

新的迭代代码:

arrayOfArrays.push(["Data", "Value"]);
for (key in data) {
    if (data.hasOwnProperty(key)) {
        arrayOfArrays.push([key, data[key]]);
    }
}

结果(作为表格 - 也可以很好地显示图表):

Answer 1

检查data format对于柱形图...

第 0 列用于 x 轴，
其余的为 y 轴，除非指定了 Angular 色

因此，在转换示例 json 时，
“Total Users” 成为 x 轴，
其余的列绘制为...

x=206，y=137
x=206，y=69

为 x 轴添加另一个键可以解决此问题，
请参阅以下工作片段...

google.charts.load('current', {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = JSON.parse('{"Users": "Users", "Total Users":206,"Active Users":137,"Archived Users":69}');
  var arrayOfArrays = [];
  var colHead = [];

  for (key in data) {
      colHead.push(key);
  }
  arrayOfArrays.push(colHead);
  var gglRow = [];
  for (key in data) {
     if (data.hasOwnProperty(key)) {
         gglRow.push(data[key]);
     }
  }
  arrayOfArrays.push(gglRow);
  var googleDt = google.visualization.arrayToDataTable(arrayOfArrays);
  var chart = new google.visualization.ColumnChart(document.getElementById('MyChart'));
  var options = {title: 'Test', width: 500, height: 300 };
  chart.draw(googleDt, options);
}

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

<小时/>

注意:arrayToDataTable是静态方法，不需要new关键字...

var googleDt = google.visualization.arrayToDataTable(arrayOfArrays);

<小时/>

编辑

google.charts.load('current', {packages:['table']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data0 = google.visualization.arrayToDataTable([
    ['Total Users', 30],  // <-- first row
    ['Active Users', 54],
    ['Archived Users', 80],
  ], true);  // <-- first row is data = true

  var chart0 = new google.visualization.Table(document.getElementById('chart_div0'));
  chart0.draw(data0);

  var data1 = google.visualization.arrayToDataTable([
    ['Group', 'Value'],  // <-- first row
    ['Total Users', 30],
    ['Active Users', 54],
    ['Archived Users', 80],
  ], false);  // <-- first row is column headings = false

  var chart1 = new google.visualization.Table(document.getElementById('chart_div1'));
  chart1.draw(data1);
}

div {
  margin-bottom: 12px;
}

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