javascript - 动态填充谷歌柱形图

Question

我想填充动态柱形图，使行和列都是动态的。

这是一个我想要转换的示例 json 数组: {"location":"链式店","item_category":"A","delay":"681"}, {“location”:“钦奈”，“item_category”:“A”，“延迟”:“286”}，{“location”:“Bawal”，“item_category”:“A”，“延迟”:“339” },{"location":"哈里瓦","item_category":"A","延迟":"1256"},{"location":"卢迪亚纳","item_category":"A","延迟":"1048"},{"location":"Bawal","item_category":"B","delay":"1"}

有 3 个参数，即位置、item_category 和延迟，其中:

1. 位置代表列。 (动态变化)
2. 延迟范围应位于 Y 轴上。 (动态变化)
3. 在 x 轴上，它们与项目进行映射。

到目前为止，我能够获取所有必需的数据，但无法从中创建图表。我引用了各种库，例如 Google-visualization、Pchart、JPGraph 等等。

每次我都卡住在动态填充图表上。

以下是填充 Google 柱形图的示例代码:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Item Category', 'Location 1', 'Location 2', 'Location 3,...'],
          ['item1', 1000, 400, 200,...delay value of location 'n'],
          ['item2', 1170, 460, 250,...],
          ['item3', 660, 1120, 300]...],
          ['item4', 1030, 540, 350]
          .
          . 
        ]);

//我想使用 PHP 填充此数据变量

        var chart = new google.charts.Bar(document.getElementById('my_Chartid'));

        chart.draw(data, google.charts.Bar.convertOptions(options));
      }

这些是我提到的链接。我想在 JavaScript 中动态填充这个 data 变量。

Google column chart dashboard

https://developers.google.com/chart/interactive/docs/gallery/columnchart

Answer 1

首先需要将json数据转换为普通数组

然后使用数据 View 为每个类别创建一列

然后汇总数据并绘制图表

google.charts.load('current', {
  callback: function () {
    var jsonData = [
      {"location":"Chain","item_category":"A","delay":"681"},
      {"location":"Chennai ","item_category":"A","delay":"286"},
      {"location":"Bawal","item_category":"A","delay":"339"},
      {"location":"Haridwar","item_category":"A","delay":"1256"},
      {"location":"Ludhiana","item_category":"A","delay":"1048"},
      {"location":"Bawal","item_category":"B","delay":"100"}
    ];

    // load chart data
    var chartData = [];
    jsonData.forEach(function (row, rowIndex) {
      // column headings
      var columns = Object.keys(row);
      if (rowIndex === 0) {
        chartData.push(columns);
      }

      // row values
      var chartRow = [];
      columns.forEach(function (column, colIndex) {
        var chartCell = row[column];
        if (colIndex > 1) {
          chartCell = parseFloat(chartCell);
        }
        chartRow.push(chartCell);
      });
      chartData.push(chartRow);
    });
    var data = google.visualization.arrayToDataTable(chartData);

    // create data view
    var view = new google.visualization.DataView(data);
    
    // init column arrays
    var aggColumns = [];
    var viewColumns = [0];

    // build view & agg column for each category
    data.getDistinctValues(1).forEach(function (category, index) {
      // add view column
      viewColumns.push({
        calc: function (dt, row) {
          if (dt.getValue(row, 1) === category) {
            return dt.getValue(row, 2);
          }
          return null;
        },
        label: category,
        type: 'number'
      });

      // add agg column
      aggColumns.push({
        aggregation: google.visualization.data.sum,
        column: index + 1,
        label: category,
        type: 'number'
      });
    });

    // set view columns
    view.setColumns(viewColumns);

    // agg view
    var group = google.visualization.data.group(
      view,
      [0],
      aggColumns
    );

    var chart = new google.charts.Bar(document.getElementById('chart_div'));

    // use group data to draw chart
    chart.draw(group);
  },
  packages:['bar']
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>