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

标签 javascript json charts google-visualization

我有this chart使用jChartFX制作。

enter image description here

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

$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}]},
  ]
}

最佳答案

使用谷歌的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>

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

3 片用于“类型 1” 等...

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

setColumns
设置行

关于javascript - 使用 Google Chart 从数据集生成多个圆环图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44187307/

上一篇：javascript - 如何根据经过的天数更新 css 高度属性

下一篇：javascript - 如何在JavaScript中实现Ruby的扩展模块

相关文章：

charts - Google 图表图例 - 重叠文本

javascript - 使用 jquery 识别文本并将其加热到容器内

javascript - 将前景图像添加到图像

json - 在Go中检查嵌套指针结构是否为nil的简便方法？

javascript - 使用 Javascript/Html/JSON 的排列图/图表

java - 使用 Post @Consumes(MediaType.ApplicationJson) 隐式解析 LocalDate

javascript - 如何将 HTML 徽章作为标签包含在柱形图中？

mysql - 将 sql 查询结果直接转换为图表的 X 轴和 Y 轴的最佳方法是什么

javascript - Node.js - 无法使用 Cheerio 存储预期数据

javascript - three.js:如何将 Material 数组添加到八面体几何体

©2024 IT工具网  联系我们