google.visualization.DataTable(JSON.parse(datastring)) 不工作

Question

我正在使用 google 图表在屏幕上和点击按钮时显示一些数据。正在从 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 必须采用特定格式
参见 --> Format of the Constructor's JavaScript Literal data Parameter

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>

编辑

建立数据table后，使用group() method聚合数据

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

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>

google.visualization.DataTable(JSON.parse(datastring)) 不工作

google.visualization.DataTable(JSON.parse(datastring)) is not working

angularjs

json

google-visualization

plunker