javascript - 使用数据库中的 Google Charts 创建堆积图
问题描述
我的 api 返回下表:
Date Name Size
2018-17-09 John 500
2018-17-09 Doe 1000
2018-17-09 Jack 3000
2018-17-09 Choi 700
2018-18-09 John 6000
2018-18-09 Doe 200
2018-18-09 Jack 555
2018-19-09 John 700
2018-19-09 Doe 9000
我的目标是按名称和日期显示图表。x 轴是日期,y 轴是大小。
我对谷歌图表很陌生,需要一些帮助。非常感谢!
解决方案
为了按日期堆叠每个名称的列,
您的表需要按如下结构构建,
每个名称都有列/系列。
['Date', 'John', 'Doe', 'Jack'],
['2018-17-09', 500, 1000, 3000],
这在服务器/查询上可能很难做到,
特别是如果你不知道你将有多少个名字。
因此,我们可以使用 google 数据表方法
将来自服务器的数据
转换为我们需要的格式。
首先我们创建一个包含必要列的数据视图,
然后我们可以按日期聚合/汇总视图。
请参阅以下工作片段...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
// create data table
var data = google.visualization.arrayToDataTable([
['Date', 'Name', 'Size'],
['2018-17-09', 'John', 500],
['2018-17-09', 'Doe', 1000],
['2018-17-09', 'Jack', 3000],
['2018-17-09', 'Choi', 700],
['2018-18-09', 'John', 6000],
['2018-18-09', 'Doe', 200],
['2018-18-09', 'Jack', 555],
['2018-19-09', 'John', 700],
['2018-19-09', 'Doe', 9000],
]);
// create data view
var view = new google.visualization.DataView(data);
// column arrays
var aggColumns = [];
var viewColumns = [0];
// build view & agg columns for each name
data.getDistinctValues(1).forEach(function (name, index) {
viewColumns.push({
calc: function (dt, row) {
if (dt.getValue(row, 1) === name) {
return dt.getValue(row, 2);
}
return null;
},
label: name,
type: 'number'
});
aggColumns.push({
aggregation: google.visualization.data.sum,
column: index + 1,
label: name,
type: 'number'
});
});
// set view columns
view.setColumns(viewColumns);
// sum view by date
var aggData = google.visualization.data.group(
view,
[0],
aggColumns
);
// draw chart
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(aggData, {
isStacked: true
});
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
推荐阅读
- solr - 使用 curl 创建 solr 集合
- javascript - forEach 与 Firebase 调用
- c - 当程序期望C中的int时传递字符串
- r - http://localhost:8000/mapTiles/OSM/{z}_{x}_{y}.png 不工作 - SHINY R
- javascript - 复制后重新显示文本文件中的文本
- visual-studio-code - 我可以在没有密码的情况下使用“Vscode 远程 SSH”扩展吗?
- jquery - 在全屏模式下,引导工具提示不可见
- java - 当它被 (az) 包围时,从字符串中删除破折号而不是从中间删除
- sql - 从多行字符串中提取单词
- javascript - 优化柴测试