从数组转换为Google Visualization DataTable

Question

我正在调用一个返回有效JSON数据的API。 Google Visualization图表要求数据绑定到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()显示所有数据都在那里。我无法弄清楚问题是我的数组代码还是图表绑定......

解决方案

感谢@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以查看ColumnChart ...

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

因此，当转换示例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>