从数组转换到Google Visualization DataTable时数组项丢失

Question

我正在调用一个返回有效JSON数据的API。Google可视化图表要求数据绑定到来自JavaScript数组的图表，而不是JSON数组（或数组的数组）。因此，使用我在别处找到的答案，我实现了这一点。

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

我尝试了多个数据源，但总是缺少一项。arrayOfarrays.tostring()的控制台日志显示所有数据。我不知道问题是出在我的数组代码上，还是出在图表绑定上...

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

旧（不正确）格式：

新的迭代代码：

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

结果（如表格--也如图表一样显示）：

Answer 1

检查柱状图的数据格式...

列0用于x轴，
其余用于y轴，除非指定了角色

因此，在转换示例json时，
“Total Users”成为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);
}

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