Как я могу вставить свой объект json в строку диаграммы Google - PullRequest
Новая
       47

Как я могу вставить свой объект json в строку диаграммы Google

1 голос
/ 25 сентября 2019

У меня есть диаграмма 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}

КакМогу ли я конвертировать вышеуказанный объект, чтобы я мог использовать его с гугл чартами?

Я пытался следовать этому уроку здесь .Но моя диаграмма пуста, когда я использую этот код.

Как я могу использовать свой объект json для этой диаграммы?

1 Ответ

0 голосов
/ 25 сентября 2019

сначала создайте таблицу данных, для линейного графика второй столбец должен быть числом.

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