Question

我使用jChartFX制作了this chart。

以下是生成此图表的代码：

$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做同样的事情。我生成了几个图表（比萨饼，甜甜圈，酒吧等），但单独。我需要从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

使用'controls'包中的Google ChartWrapper class

您可以在数据表上设置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，可以使用 - ＆gt; 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]);
...

编辑

该视图包含columns和rows ...

的键

请参阅以下工作代码段...

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有两种方法......

setColumns
setRows

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

1 个答案: