我有一个时间序列数据,我希望将其显示为格子图表:
以下是Highcharts网站上Trellis Chart的基本版本:
而不是Erik,Gert,Helge,Torstein,我正在努力用组替换它:Client,DII,FII,PRO。
在下面的图表中,水果名称是一个简单的系列,但在这里我有一个时间序列数据:Fut Index Longs和Fut Index Shorts。上述每个分组(客户,DII ......)都有自己的Fut Index Longs和Fut Index Shorts版本。
我希望显示Fut Index Longs,Fut Index Shorts与x轴叠加,表示不同的日子。
我试图使用嵌套系列来完成此任务,但没有显示数据。这是我的来源:
var charts = [],
$containers = $('#trellis td'),
datasets = [
{
name: 'Client',
data:
[
{
name: "Fut Index Longs",
data: [["2014-02-10", 5], ["2014-02-11", 9], ["2014-02-12", 7]]
},
{
name: "Fut Index Shorts",
data: [["2014-02-10", 5], ["2014-02-11", 9], ["2014-02-12", 2]]
}
]
},
{
name: 'DII',
data:
[
{
name: "Fut Index Longs",
data: [["2014-02-10", 5], ["2014-02-11", 9], ["2014-02-12", 7]]
},
{
name: "Fut Index Shorts",
data: [["2014-02-10", 5], ["2014-02-11", 9], ["2014-02-12", 2]]
}
]
},
{
name: 'FII',
data:
[
{
name: "Fut Index Longs",
data: [["2014-02-10", 5], ["2014-02-11", 9], ["2014-02-12", 7]]
},
{
name: "Fut Index Shorts",
data: [["2014-02-10", 5], ["2014-02-11", 9], ["2014-02-12", 2]]
}
]
},
{
name: 'PRO',
data:
[
{
name: "Fut Index Longs",
data: [["2014-02-10", 5], ["2014-02-11", 9], ["2014-02-12", 7]]
},
{
name: "Fut Index Shorts",
data: [["2014-02-10", 5], ["2014-02-11", 9], ["2014-02-12", 2]]
}
]
}
];
$.each(datasets, function(i, dataset) {
charts.push(new Highcharts.Chart({
chart: {
renderTo: $containers[i],
type: 'bar',
marginLeft: i === 0 ? 100 : 10
},
title: {
text: dataset.name,
align: 'left',
x: i === 0 ? 90 : 0
},
credits: {
enabled: false
},
xAxis: {
type: 'datetime'
},
yAxis: {
allowDecimals: false,
title: {
text: null
},
min: 0,
max: 10
},
plotOptions: {
column: {
stacking: 'normal'
}
},
legend: {
enabled: false
},
series: [dataset]
}));
});
链接到jsfiddle:http://jsfiddle.net/g6jLhux2/
我究竟做错了什么?
在您的情况下,您需要使用
series: dataset.data
此外,您的x轴不是日期时间而是类别,因为datetime应该作为数字(毫秒)传递。然后你必须使用:
xAxis: {
type: 'category'
},
如果要在图表中正确显示数据。 See updated jsfiddle
它对你有帮助吗?