Javascript 在Highcharts中使用带堆叠列的网格图
我有一个时间序列数据,我想以网格图的形式显示: 以下是Highcharts网站上的基本网格图: 我不再是Erik、Gert、Helge、Torstein,而是用组来取代它:客户、DII、FII、PRO 在下图中,水果名称是一个简单的序列,但这里我有一个时间序列数据:Fut指数多头和Fut指数空头。 上述每个分组(客户、DII…)都有自己的Fut指数多头和Fut指数空头版本 我想展示Fut指数多头,Fut指数空头和x轴叠加,表示不同的日子 我曾尝试使用嵌套序列来完成此操作,但没有显示任何数据。以下是我的资料来源:Javascript 在Highcharts中使用带堆叠列的网格图,javascript,highcharts,Javascript,Highcharts,我有一个时间序列数据,我想以网格图的形式显示: 以下是Highcharts网站上的基本网格图: 我不再是Erik、Gert、Helge、Torstein,而是用组来取代它:客户、DII、FII、PRO 在下图中,水果名称是一个简单的序列,但这里我有一个时间序列数据:Fut指数多头和Fut指数空头。 上述每个分组(客户、DII…)都有自己的Fut指数多头和Fut指数空头版本 我想展示Fut指数多头,Fut指数空头和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]
}));
});
指向JSFIDLE的链接:
我做错了什么?在您的情况下,您需要使用
series: dataset.data
此外,x轴不是datetime,而是类别,因为datetime应该作为数字(毫秒)传递。然后必须使用:
xAxis: {
type: 'category'
},
如果您想在图表中正确显示数据
这对你有帮助吗 为了好玩,我在你的例子中添加了一个传奇。