google.visualization.DataTable(JSON.parse(datastring)) 不起作用

Question

我正在使用谷歌图表在屏幕上显示一些数据，并在一些按钮点击上显示一些数据。数据正在从 webapi 调用加载。

为了简单地解决问题，我在函数本身中对数据进行了硬编码。

问题是当我打电话时

google.visualization.DataTable(JSON.parse(datastring)) 

消息：Table has no columns.

它返回空数据表。我也尝试使用arrayToDatable，但没有用。我在使用arrayToDataTable时遇到错误。就是这样。

Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys

我为它创建了一个 plunker。

http://plnkr.co/edit/pctIqoCWi3LhqxlgdnqM?p=preview

任何人都可以看看，让我知道这有什么问题。

Answer 1

直接从 JSON 创建google.visualization.DataTable时，
JSON 必须采用特定格式
请参阅 --> 构造函数的 JavaScript 文字数据参数的格式

google.visualization.arrayToDataTable接受一个值数组，而不是对象...

[["ReportName","ReportTime"],["ABC",48],["XYZ",50]]

如果不想更改 WebAPI 调用的结果格式，
您需要转换图表的数据

---

有关示例，请参阅以下工作片段...

google.charts.load('current', {
  callback: function () {
    var datastring = '{"PerformanceData" : [{"ReportName":"ABC","ReportTime":"48"},{"ReportName":"XYZ","ReportTime":"50"}]}';
    var jsonData = JSON.parse(datastring);
    var chartData = [];
    // load chart data
    jsonData.PerformanceData.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 > 0) {
          chartCell = parseFloat(chartCell);
        }
        chartRow.push(chartCell);
      });
      chartData.push(chartRow);
    });
    var data = google.visualization.arrayToDataTable(chartData);
    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, { width: 400, height: 240 });
  },
  packages:['corechart']
});

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

编辑

生成数据表后，使用 group() 方法聚合数据

您可以使用提供的聚合函数之一，也可以提供自己的聚合函数

google.visualization.data.avg
google.visualization.data.count
google.visualization.data.max
google.visualization.data.min
google.visualization.data.sum

请参阅以下工作片段...

google.charts.load('current', {
  callback: function () {
    var datastring = '{"PerformanceData" : [{"ReportName":"ABC","ReportTime":"48"},{"ReportName":"XYZ","ReportTime":"50"},{"ReportName":"ABC","ReportTime":"48"},{"ReportName":"XYZ","ReportTime":"50"},{"ReportName":"ABC","ReportTime":"48"},{"ReportName":"XYZ","ReportTime":"50"},{"ReportName":"ABC","ReportTime":"48"},{"ReportName":"XYZ","ReportTime":"50"}]}';
    var jsonData = JSON.parse(datastring);
    var chartData = [];
    // load chart data
    jsonData.PerformanceData.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 > 0) {
          chartCell = parseFloat(chartCell);
        }
        chartRow.push(chartCell);
      });
      chartData.push(chartRow);
    });
    var data = google.visualization.arrayToDataTable(chartData);
    // group data
    var dataGroup = google.visualization.data.group(
      data,  // data table
      [0],   // group by column
      [{     // aggregation column
        column: 1,
        type: 'number',
        aggregation: google.visualization.data.sum
      }]
    );
    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    // use group data to draw chart
    chart.draw(dataGroup, {
      pieSliceText: 'value',
      width: 400,
      height: 240
    });
  },
  packages:['corechart']
});

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