PHP - 谷歌图表答案

【问题标题】：PHP - Google ChartsPHP - 谷歌图表
【发布时间】：2018-09-05 13:52:03
【问题描述】：

我正在尝试使用 Google Charts，但在为 API 创建数组时遇到了一些麻烦。 https://developers.google.com/chart/interactive/docs/gallery/linechart#creating-material-line-charts

我的数据源有3列，分别是数量、日期和用户名。（见附件）。

如何将他的数组形式转换为与谷歌图表api（折线图）一起使用？

我认为我需要将“responsavel”列中的每个不同值转换为新列，并将这些列设置为“qt_pedido”列的值在这个例子中，最终的数组应该是这样的：

日期 |用户1 |用户2
-------------------------------------------
2018 年 3 月 9 日 | 58 | 19
2019 年 5 月 9 日 | 23 | 5

Result from sql server

【问题讨论】：

标签： php arrays charts google-visualization

【解决方案1】：

使用谷歌数据表方法将行转换为列会更容易，
请参阅以下工作 sn-p...

google.charts.load('current', {
  packages: ['line']
}).then(function () {
  // create data table
  var data = google.visualization.arrayToDataTable([
    ['Date', 'responsavel', 'qt_pedido'],
    ['20/10/2018', 'user1', 10],
    ['20/10/2018', 'user2', 20],
    ['20/10/2018', 'user3', 30],
    ['20/11/2018', 'user1', 40],
    ['20/11/2018', 'user2', 50],
    ['20/11/2018', 'user3', 60],
    ['20/12/2018', 'user1', 70],
    ['20/12/2018', 'user2', 80],
    ['20/12/2018', 'user3', 90],
  ]);

  // create data view
  var view = new google.visualization.DataView(data);

  // column arrays
  var aggColumns = [];
  var viewColumns = [0];

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

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

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

  // sum view by date
  var aggData = google.visualization.data.group(
    view,
    [0],
    aggColumns
  );

  // draw chart
  var chart = new google.charts.Line(document.getElementById('chart_div'));
  chart.draw(aggData);
});

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

【讨论】：

有效！谢谢！但只有一个细节，我的日期字符串是 PT-BR，所以它的'dd/mm/yyyy'，在你的例子中，它显示'mm/dd/yyyy'，如何调整它？将本地化设置为 pt-br 不起作用...
将日期保留为字符串是否有帮助？请参阅上面更改的答案，特别是更改的数据和 --> var viewColumns = [0];
正是我所需要的！谢谢！ :)
另外一个问题，绘制图表时如何传递选项？通过 chart.draw(aggData, options);在此示例中不起作用。我需要这个来设置图表和维度的标题....
有几个选项不适用于 Material 图表，请在此处查看 --> issues#: 2143 -- 对于标题，请使用 chart: {title: 'title'}