Передача массива в гугл чарты - PullRequest
Новая
       13

Передача массива в гугл чарты

1 голос
/ 28 июня 2019

Я пытаюсь построить кольцевую диаграмму, используя диаграммы Google.Я использую фреймворк MVC, точнее Laravel.У меня есть массив, который я передаю в представление компактной функции.Я действительно искал везде, но не могу найти что-то, что могло бы указать мне, пожалуйста, имейте в виду, что я новичок в javascript.

Я уже пробовал:

var data = google.visualization.arrayToDataTable (? = $quency?>);

Это отрывок из моей серверной php 

 {  
    $memberNames = array_keys($frequency);
    $frequency = array_count_values($members);
    return view('contact.stats', compact('frequency'));

}

Это код Google для реализации диаграммы 

 <script type="text/javascript">
  google.charts.load("current", {packages:["corechart"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day'],
      ['Work',     11],
      ['Eat',      2],
      ['Commute',  2],
      ['Watch TV', 2],
      ['Sleep',    7]
    ]);

    var options = {
      title: 'My Daily Activities',
      pieHole: 0.4,
    };

    var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
    chart.draw(data, options);
  }
   </script>

Как я уже говорил, когда я возвращаю частоту $, это выглядит примерно так: {"женщина": 74, "другие": 2, "na": 63, "мужчина": 59}

Iв основном хочу передать $ частотность в данные var в скрипте.

1 Ответ

0 голосов
/ 28 июня 2019

php возвращает объект json ({})
диаграммы Google ожидают массив ([])

просто необходимо преобразовать 

  var frequency = {"female":74,"others":2,"na":63,"male":59};
  var chartData = [];
  Object.keys(frequency).forEach(function (name) {
    chartData.push([name, frequency[name]]);
  });

при создании GoogleТаблица данных,
, нам нужно передать true в качестве второго аргумента arrayToDataTable
, это указывает на то, что первая строка в массиве - это данные, а не заголовки столбцов.

  var data = google.visualization.arrayToDataTable(chartData, true);

см. Следующий рабочий фрагмент ... 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  //var frequency = <?= json_encode($frequency) ?>
  var frequency = {"female":74,"others":2,"na":63,"male":59};
  var chartData = [];
  Object.keys(frequency).forEach(function (name) {
    chartData.push([name, frequency[name]]);
  });
  var data = google.visualization.arrayToDataTable(chartData, true);

  var options = {
    title: 'My Daily Activities',
    pieHole: 0.4,
  };

  var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
  chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="donutchart"></div>
...