javascript - 使用 Google Chart 从数据集生成多个圆环图

Question

我有this chart使用 jChartFX 制作。

下面是生成这个图表的代码:

$scope.funcTypePersonQuantity = function() {
  $http.get($scope.UrlData).success(function(data, status) {
    var res = angular.fromJson(data);
    res = angular.fromJson(res.result[0]);

    var crosstabSuport = new cfx.data.CrosstabDataProvider();
    crosstabSuport.setDataSource(res);
    crosstabSuport.getRows().setHeading("PERSON");
    crosstabSuport.getColumns().setHeading("TYPE");
    crosstabSuport.setValueName("QUANTITY");
    chart1.setDataSource(crosstabSuport);

    var crosstabSuport2 = new cfx.data.CrosstabDataProvider();
    crosstabSuport2.setDataSource(res);
    crosstabSuport2.getRows().setHeading("TYPE");
    crosstabSuport2.getColumns().setHeading("PERSON");
    crosstabSuport2.setValueName("QUANTITY");
    chart2.setDataSource(crosstabSuport2);
  });
};

我想知道是否可以对 Google Chart 做同样的事情.我生成了几个图表(披萨、 donut 、酒吧等)，但都是单独生成的。我需要从 jSON 中的数据集自动生成多个图表，例如 jChartsFX。

这是jSON中的数据结构:

{
  "cols": [
    {"id":"type","label":"Type","pattern":"","type":"string"},
    {"id":"persons","label":"Person","pattern":"","type":"string"},
    {"id":"quantity","label":"Quantity","pattern":"","type":"number"}
  ], 
  "rows": [
    {"c":[{"v":"Type 1","f":null},{"v":"Person 1","f":null},{"v":1,"f":null}]},
    {"c":[{"v":"Type 1","f":null},{"v":"Person 2","f":null},{"v":229,"f":null}]},
    {"c":[{"v":"Type 1","f":null},{"v":"Person 3","f":null},{"v":354,"f":null}]},
    {"c":[{"v":"Type 2","f":null},{"v":"Person 1","f":null},{"v":13,"f":null}]},
    {"c":[{"v":"Type 2","f":null},{"v":"Person 2","f":null},{"v":149,"f":null}]},
    {"c":[{"v":"Type 2","f":null},{"v":"Person 3","f":null},{"v":51,"f":null}]},
    {"c":[{"v":"Type 3","f":null},{"v":"Person 1","f":null},{"v":8,"f":null}]},
    {"c":[{"v":"Type 3","f":null},{"v":"Person 2","f":null},{"v":3,"f":null}]},
    {"c":[{"v":"Type 3","f":null},{"v":"Person 3","f":null},{"v":52,"f":null}]},
    {"c":[{"v":"Type 4","f":null},{"v":"Person 1","f":null},{"v":13,"f":null}]},
    {"c":[{"v":"Type 4","f":null},{"v":"Person 2","f":null},{"v":35,"f":null}]},
    {"c":[{"v":"Type 4","f":null},{"v":"Person 3","f":null},{"v":1,"f":null}]},
    {"c":[{"v":"Type 5","f":null},{"v":"Person 1","f":null},{"v":11,"f":null}]},
    {"c":[{"v":"Type 5","f":null},{"v":"Person 2","f":null},{"v":10,"f":null}]},
    {"c":[{"v":"Type 5","f":null},{"v":"Person 3","f":null},{"v":6,"f":null}]},
    {"c":[{"v":"Type 6","f":null},{"v":"Person 1","f":null},{"v":1,"f":null}]},
    {"c":[{"v":"Type 6","f":null},{"v":"Person 2","f":null},{"v":1,"f":null}]},
    {"c":[{"v":"Type 6","f":null},{"v":"Person 3","f":null},{"v":1,"f":null}]},
    {"c":[{"v":"Type 7","f":null},{"v":"Person 1","f":null},{"v":2,"f":null}]},
    {"c":[{"v":"Type 7","f":null},{"v":"Person 2","f":null},{"v":4,"f":null}]},
    {"c":[{"v":"Type 7","f":null},{"v":"Person 3","f":null},{"v":6,"f":null}]},
  ]
}

Answer 1

使用谷歌的 ChartWrapper class来自 'controls' 包，

您可以在数据表上设置一个 View ，
仅使用某些列...

var chart0 = new google.visualization.ChartWrapper({
  chartType: 'PieChart',
  containerId: 'chart_div0',
  dataTable: data,
  options: {
    height: 300,
    legend: {
      position: 'bottom'
    },
    pieHole: 0.25,
    title: data.getColumnLabel(0)
  },

  // use Type and Quantity columns
  view: {
    columns: [0, 2]
  }
});

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

google.charts.load('current', {
  callback: drawChart,
  packages: ['controls', 'corechart']
});

function drawChart() {
  var data = new google.visualization.DataTable({
    "cols": [
      {"id":"type","label":"Type","pattern":"","type":"string"},
      {"id":"persons","label":"Person","pattern":"","type":"string"},
      {"id":"quantity","label":"Quantity","pattern":"","type":"number"}
    ],
    "rows": [
      {"c":[{"v":"Type 1","f":null},{"v":"Person 1","f":null},{"v":1,"f":null}]},
      {"c":[{"v":"Type 1","f":null},{"v":"Person 2","f":null},{"v":229,"f":null}]},
      {"c":[{"v":"Type 1","f":null},{"v":"Person 3","f":null},{"v":354,"f":null}]},
      {"c":[{"v":"Type 2","f":null},{"v":"Person 1","f":null},{"v":13,"f":null}]},
      {"c":[{"v":"Type 2","f":null},{"v":"Person 2","f":null},{"v":149,"f":null}]},
      {"c":[{"v":"Type 2","f":null},{"v":"Person 3","f":null},{"v":51,"f":null}]},
      {"c":[{"v":"Type 3","f":null},{"v":"Person 1","f":null},{"v":8,"f":null}]},
      {"c":[{"v":"Type 3","f":null},{"v":"Person 2","f":null},{"v":3,"f":null}]},
      {"c":[{"v":"Type 3","f":null},{"v":"Person 3","f":null},{"v":52,"f":null}]},
      {"c":[{"v":"Type 4","f":null},{"v":"Person 1","f":null},{"v":13,"f":null}]},
      {"c":[{"v":"Type 4","f":null},{"v":"Person 2","f":null},{"v":35,"f":null}]},
      {"c":[{"v":"Type 4","f":null},{"v":"Person 3","f":null},{"v":1,"f":null}]},
      {"c":[{"v":"Type 5","f":null},{"v":"Person 1","f":null},{"v":11,"f":null}]},
      {"c":[{"v":"Type 5","f":null},{"v":"Person 2","f":null},{"v":10,"f":null}]},
      {"c":[{"v":"Type 5","f":null},{"v":"Person 3","f":null},{"v":6,"f":null}]},
      {"c":[{"v":"Type 6","f":null},{"v":"Person 1","f":null},{"v":1,"f":null}]},
      {"c":[{"v":"Type 6","f":null},{"v":"Person 2","f":null},{"v":1,"f":null}]},
      {"c":[{"v":"Type 6","f":null},{"v":"Person 3","f":null},{"v":1,"f":null}]},
      {"c":[{"v":"Type 7","f":null},{"v":"Person 1","f":null},{"v":2,"f":null}]},
      {"c":[{"v":"Type 7","f":null},{"v":"Person 2","f":null},{"v":4,"f":null}]},
      {"c":[{"v":"Type 7","f":null},{"v":"Person 3","f":null},{"v":6,"f":null}]},
    ]
  });

  var chart0 = new google.visualization.ChartWrapper({
    chartType: 'PieChart',
    containerId: 'chart_div0',
    dataTable: data,
    options: {
      height: 300,
      legend: {
        position: 'bottom'
      },
      pieHole: 0.25,
      title: data.getColumnLabel(0)
    },
    view: {
      columns: [0, 2]
    }
  });
  chart0.draw();

  var chart1 = new google.visualization.ChartWrapper({
    chartType: 'PieChart',
    containerId: 'chart_div1',
    dataTable: data,
    options: {
      height: 300,
      legend: {
        position: 'bottom'
      },
      pieHole: 0.25,
      title: data.getColumnLabel(1)
    },
    view: {
      columns: [1, 2]
    }
  });
  chart1.draw();
}

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

---

但是，如上面的片段所示，
问题中提供的数据未汇总，
所以你最终会得到每个类型或每个人的多个切片

“Type 1” 等的 3 个切片......

group() 方法可用于聚合数据

在这种情况下，group()方法需要使用两次，
每个“分组依据”列一次

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

注意:这里不需要 ChartWrapper，可以使用 --> google.visualization.PieChart

google.charts.load('current', {
  callback: drawChart,
  packages: ['controls', 'corechart']
});

function drawChart() {
  var data = new google.visualization.DataTable({
    "cols": [
      {"id":"type","label":"Type","pattern":"","type":"string"},
      {"id":"persons","label":"Person","pattern":"","type":"string"},
      {"id":"quantity","label":"Quantity","pattern":"","type":"number"}
    ],
    "rows": [
      {"c":[{"v":"Type 1","f":null},{"v":"Person 1","f":null},{"v":1,"f":null}]},
      {"c":[{"v":"Type 1","f":null},{"v":"Person 2","f":null},{"v":229,"f":null}]},
      {"c":[{"v":"Type 1","f":null},{"v":"Person 3","f":null},{"v":354,"f":null}]},
      {"c":[{"v":"Type 2","f":null},{"v":"Person 1","f":null},{"v":13,"f":null}]},
      {"c":[{"v":"Type 2","f":null},{"v":"Person 2","f":null},{"v":149,"f":null}]},
      {"c":[{"v":"Type 2","f":null},{"v":"Person 3","f":null},{"v":51,"f":null}]},
      {"c":[{"v":"Type 3","f":null},{"v":"Person 1","f":null},{"v":8,"f":null}]},
      {"c":[{"v":"Type 3","f":null},{"v":"Person 2","f":null},{"v":3,"f":null}]},
      {"c":[{"v":"Type 3","f":null},{"v":"Person 3","f":null},{"v":52,"f":null}]},
      {"c":[{"v":"Type 4","f":null},{"v":"Person 1","f":null},{"v":13,"f":null}]},
      {"c":[{"v":"Type 4","f":null},{"v":"Person 2","f":null},{"v":35,"f":null}]},
      {"c":[{"v":"Type 4","f":null},{"v":"Person 3","f":null},{"v":1,"f":null}]},
      {"c":[{"v":"Type 5","f":null},{"v":"Person 1","f":null},{"v":11,"f":null}]},
      {"c":[{"v":"Type 5","f":null},{"v":"Person 2","f":null},{"v":10,"f":null}]},
      {"c":[{"v":"Type 5","f":null},{"v":"Person 3","f":null},{"v":6,"f":null}]},
      {"c":[{"v":"Type 6","f":null},{"v":"Person 1","f":null},{"v":1,"f":null}]},
      {"c":[{"v":"Type 6","f":null},{"v":"Person 2","f":null},{"v":1,"f":null}]},
      {"c":[{"v":"Type 6","f":null},{"v":"Person 3","f":null},{"v":1,"f":null}]},
      {"c":[{"v":"Type 7","f":null},{"v":"Person 1","f":null},{"v":2,"f":null}]},
      {"c":[{"v":"Type 7","f":null},{"v":"Person 2","f":null},{"v":4,"f":null}]},
      {"c":[{"v":"Type 7","f":null},{"v":"Person 3","f":null},{"v":6,"f":null}]},
    ]
  });

  var groupData0 = google.visualization.data.group(
    data,
    [0],
    [{
      column: 2,
      type: 'number',
      label: data.getColumnLabel(2),
      aggregation: google.visualization.data.sum
    }]
  );

  var chart0 = new google.visualization.ChartWrapper({
    chartType: 'PieChart',
    containerId: 'chart_div0',
    dataTable: groupData0,
    options: {
      height: 300,
      legend: {
        position: 'bottom'
      },
      pieHole: 0.25,
      title: data.getColumnLabel(0)
    }
  });
  chart0.draw();

  var groupData1 = google.visualization.data.group(
    data,
    [1],
    [{
      column: 2,
      type: 'number',
      label: data.getColumnLabel(2),
      aggregation: google.visualization.data.sum
    }]
  );

  var chart1 = new google.visualization.ChartWrapper({
    chartType: 'PieChart',
    containerId: 'chart_div1',
    dataTable: groupData1,
    options: {
      height: 300,
      legend: {
        position: 'bottom'
      },
      pieHole: 0.25,
      title: data.getColumnLabel(1)
    }
  });
  chart1.draw();
}

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

---

您还可以使用 DataView class分隔列...

var view0 = new google.visualization.DataView(data);
view0.setColumns([0, 2]);

var chart0 = new google.visualization.PieChart(container);
chart0.draw(view0, options);

var view1 = new google.visualization.DataView(data);
view1.setColumns([1, 2]);
...

---

编辑

View 有列和行的键...

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

google.charts.load('current', {
  callback: drawChart,
  packages: ['controls', 'corechart']
});

function drawChart() {
  var data = new google.visualization.DataTable({
    "cols": [
      {"id":"type","label":"Type","pattern":"","type":"string"},
      {"id":"persons","label":"Person","pattern":"","type":"string"},
      {"id":"quantity","label":"Quantity","pattern":"","type":"number"}
    ],
    "rows": [
      {"c":[{"v":"Type 1","f":null},{"v":"Person 1","f":null},{"v":1,"f":null}]},
      {"c":[{"v":"Type 1","f":null},{"v":"Person 2","f":null},{"v":229,"f":null}]},
      {"c":[{"v":"Type 1","f":null},{"v":"Person 3","f":null},{"v":354,"f":null}]},
      {"c":[{"v":"Type 2","f":null},{"v":"Person 1","f":null},{"v":13,"f":null}]},
      {"c":[{"v":"Type 2","f":null},{"v":"Person 2","f":null},{"v":149,"f":null}]},
      {"c":[{"v":"Type 2","f":null},{"v":"Person 3","f":null},{"v":51,"f":null}]},
      {"c":[{"v":"Type 3","f":null},{"v":"Person 1","f":null},{"v":8,"f":null}]},
      {"c":[{"v":"Type 3","f":null},{"v":"Person 2","f":null},{"v":3,"f":null}]},
      {"c":[{"v":"Type 3","f":null},{"v":"Person 3","f":null},{"v":52,"f":null}]},
      {"c":[{"v":"Type 4","f":null},{"v":"Person 1","f":null},{"v":13,"f":null}]},
      {"c":[{"v":"Type 4","f":null},{"v":"Person 2","f":null},{"v":35,"f":null}]},
      {"c":[{"v":"Type 4","f":null},{"v":"Person 3","f":null},{"v":1,"f":null}]},
      {"c":[{"v":"Type 5","f":null},{"v":"Person 1","f":null},{"v":11,"f":null}]},
      {"c":[{"v":"Type 5","f":null},{"v":"Person 2","f":null},{"v":10,"f":null}]},
      {"c":[{"v":"Type 5","f":null},{"v":"Person 3","f":null},{"v":6,"f":null}]},
      {"c":[{"v":"Type 6","f":null},{"v":"Person 1","f":null},{"v":1,"f":null}]},
      {"c":[{"v":"Type 6","f":null},{"v":"Person 2","f":null},{"v":1,"f":null}]},
      {"c":[{"v":"Type 6","f":null},{"v":"Person 3","f":null},{"v":1,"f":null}]},
      {"c":[{"v":"Type 7","f":null},{"v":"Person 1","f":null},{"v":2,"f":null}]},
      {"c":[{"v":"Type 7","f":null},{"v":"Person 2","f":null},{"v":4,"f":null}]},
      {"c":[{"v":"Type 7","f":null},{"v":"Person 3","f":null},{"v":6,"f":null}]},
    ]
  });

  var chartPerson3 = new google.visualization.ChartWrapper({
    chartType: 'PieChart',
    containerId: 'chart_div0',
    dataTable: data,
    options: {
      height: 300,
      legend: {
        position: 'bottom'
      },
      pieHole: 0.25,
      title: 'Person 3'
    },
    view: {
      columns: [0, 2],
      rows: data.getFilteredRows([{column: 1, value: 'Person 3'}])
    }
  });
  chartPerson3.draw();
}

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

和 DataView 都有方法用于...

设置列
设置行数