我正在尝试生成一个在 x 轴上带有时间线的堆积柱形图,其中每个系列不一定有与相关日期匹配的数据点。我能够生成每个数据点包含多个列的柱形图,但我真的想要一个堆积图。图表的数据是 JSON,我可以根据需要操纵其格式。
var options = {
chart: {
renderTo: 'timeline',
zoomType: 'x',
type: 'column'
},
title: {
text: 'Releases'
},
yAxis: {
title: {
text: 'Count'
}
},
xAxis: {
type: 'datetime'
},
legend: {
enabled: true
},
series: []
};
/*
Following URL returns json like:
{
"rows": {
"dynamicCategory1": {
"0": {
"count": "7",
"unix_date": "1344225600"
},
"3": {
"count": "2",
"unix_date": "1344312000"
}
},
"dynamicCategory2": {
"5": {
"count": "7",
"unix_date": "1344225600"
},
"7": {
"count": "2",
"unix_date": "1345003200"
}
}
}
}
*/
$.getJSON("/mydatainjsonformat/", function(data) {
$.each(data.rows, function(key, val) {
var series = { data: [] };
series.name = key;
$.each(val, function(key2, val2) {
var x = parseFloat(val2.unix_date * 1000);
var y = parseFloat(val2.count);
series.data.push([x, y]);
});
options.series.push(series);
});
$(function () {
var chart1;
$(document).ready(function() {
chart1 = new Highcharts.Chart(options);
});
});
});
理论上,我可以更改数据,为每个没有给定日期值的类别添加 0,然后将日期设为类别 - 但这是正确的方法吗?这不会搞乱 x 轴上的时间吗?任何方向都非常感激。
最佳答案
所以:在经历了很多痛苦和磨难之后,我错过了需要作为图表配置传递的这一节:
plotOptions: {
column: {
stacking: 'normal'
},
甚至这也花了我很长时间才找到,因为我的大部分测试都有该节,但没有驼峰式的plotOptions。 多次敲击键盘并哭泣
现在效果很好。其他麻烦:要让 jsfiddle 通过 AJAX 调用('/echo/json/')将 json 返回给您,您必须 POST 到它。我花了一段时间才确定为什么 $.getJSON 也不起作用。
关于javascript - Highcharts 堆叠柱形图可以具有不规则的时间间隔吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12728191/