【发布时间】：2019-09-19 15:46:39
【问题描述】：
我正在使用谷歌图表来构建仪表板，该仪表板使用来自 LINQ 查询的 JSON 结果。我已经成功地构建了按月份分组的表格图表，但是我想按时间顺序而不是字母顺序显示月份。
我尝试传递一个日期而不是字符串月份名称，但后来我无法再按月分组 - 它改为按日期分组。
我也尝试过同时传递月份编号和月份名称 {v: monthNum, f: monthName} 但一旦我进行聚合，这似乎会丢失。
此代码主要基于我在 WhiteHat (https://stackoverflow.com/users/5090771/whitehat) 的答案中在 SO 上找到的许多示例。
var heading = ["Month", "Category"];
arrOutside[0] = heading;
for (var i = 0; i < dataJson.length; i++) {
var arr = [dataJson[i].ReportMonth, dataJson[i].Category];
arrOutside[i + 1] = arr;
}
var data = new google.visualization.arrayToDataTable(arrOutside);
var groupData = google.visualization.data.group(
data,
[1, 0],
[{
column: 1,
aggregation: google.visualization.data.count,
type: 'number'
}]
);
var view = new google.visualization.DataView(groupData);
var aggColumns = [];
var viewColumns = [0];
groupData.getDistinctValues(1).forEach(function (category, index) {
viewColumns.push({
calc: function (dt, row) {
if (dt.getValue(row, 1) === category) {
return dt.getValue(row, 2);
}
return null;
},
label: category,
type: 'number'
});
aggColumns.push({
aggregation: google.visualization.data.sum,
column: index + 1,
label: category,
type: 'number'
});
});
view.setColumns(viewColumns);
var aggData = google.visualization.data.group(
view,
[0],
aggColumns
);
var chart = new google.visualization.Table(document.getElementById('chart_div'));
chart.draw(aggData);
此代码生成如下表格： 类别 |四月 |二月 |一月 |三月
但我希望它显示： 类别 |一月 |二月 |三月 |四月
这可能吗？
编辑
此代码成功创建了一个按时间顺序列出月份的表，但是它将所有类别组合为一个类别并给我一个总计数，而不是我在之前的代码中获得的单个类别计数。我只是不知道如何正确地将两者结合起来......
function (dataJson) {
var arrOutside = new Array();
var heading = ["Month", "Category"];
arrOutside[0] = heading;
for (var i = 0; i < dataJson.length; i++) {
var arr = [new Date(dataJson[i].ReportDate), dataJson[i].Category];
arrOutside[i + 1] = arr;
}
var data = new google.visualization.arrayToDataTable(arrOutside);
var formatDate = new google.visualization.DateFormat({ pattern: 'MMM' });
var dataGroup = google.visualization.data.group(
data,
[{
column: 0,
label: 'Month',
modifier: function (val) {
return formatDate.formatValue(val);
},
type: 'string'
}],
[{
aggregation: google.visualization.data.count,
column: 1,
label: "Category Count",
type: 'number'
}]
);
var view = new google.visualization.DataView(dataGroup);
view.setRows([2, 1, 3, 0]);
var chart = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
containerId: 'chart_div',
dataTable: view
});
chart.draw();
var table = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'table_div',
dataTable: view
});
table.draw()
}
【问题讨论】：
-
你看到this answer了吗？
-
谢谢。不，我没有看到，但我只是试了一下，得到了这个错误：c.getTimezoneOffset 不是函数。
-
@WhiteHat 好的，我成功地将它与您引用的答案按时间顺序排序，但它只计算每月所有类别的总数。我的原始代码按类别分组，然后按月分组。每当我现在尝试这样做时，它都会说“给定轴上的所有系列必须是相同的数据类型”......有什么想法吗？
-
@WhiteHat 添加了最新代码...谢谢！
标签： javascript charts google-visualization