Question

我有一个Google图表，该图表目前具有一些如下所示的硬编码值：

var data = google.visualization.arrayToDataTable([
    ['Omzet', 'Omzet deze dag'],
    ['Ma',  1000],
    ['Di',  1170],
    ['Wo',  660],
    ['Do',  1030],
    ['Vr',  1030],
    ['Za',  1030],
    ['Zo',  1030]
]);

现在这是我要使用的json对象：

{"do":"11495","vr":"8985","za":0,"zo":"18990","ma":"27490","di":0,"wo":0}

如何转换上述对象，以便可以与Google图表一起使用？

我尝试遵循本教程here。但是当我使用该代码时，我的图表为空。

如何将我的json对象用于此图表？

Answer 1

首先，创建数据表，对于折线图，第二列必须是数字。

var jsonData = {"do":"11495","vr":"8985","za":0,"zo":"18990","ma":"27490","di":0,"wo":0};

var data = new google.visualization.DataTable();
data.addColumn('string', 'x');
data.addColumn('number', 'y');

然后循环遍历json的键，
使用键作为x值，
并且键的值为y

由于该值存储为字符串，
我们将需要转换为数字，
使用parseFloat或parseInt

for (var key in jsonData) {
  data.addRow([key, parseFloat(jsonData[key])]);
}

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

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

  var jsonData = {"do":"11495","vr":"8985","za":0,"zo":"18990","ma":"27490","di":0,"wo":0};

  var data = new google.visualization.DataTable();
  data.addColumn('string', 'x');
  data.addColumn('number', 'y');

  for (var key in jsonData) {
    data.addRow([key, parseFloat(jsonData[key])]);
  }

  var chart = new google.visualization.LineChart(document.getElementById('chart'));
  chart.draw(data);
  
});

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

如何将json对象插入Google图表行

1 个答案: