动态填充谷歌柱形图

Question

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

这是我要转换的示例 json 数组： {"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":"1"}

有3个参数，分别是location、item_category和delay，其中：

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数据转换为普通数组

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

然后汇总数据并绘制图表

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>