所以我有两个关于事件数据的系列:
每个系列中的1个项目与1个事件相关
我想要一个带有2列的堆积条形图:'视图','价值'
每个活动都有自己的颜色。
这是我到目前为止所做的:
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Views', 'Value']
},
yAxis: [{
min: 0,
title: {
text: 'Value (€)'
}
},{
min: 0,
opposite: true,
title: {
text: 'Views'
}
}],
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'Views',
data: [{
name: 'Event1',
y: 500
},{
name: 'Event2',
y: 200
},{
name: 'Event3',
y: 350
}],
yAxis: 1
}, {
name: 'Value',
data: [{
name: 'Event1',
y: 3000
},{
name: 'Event2',
y: 2000
},{
name: 'Event3',
y: 1500
}]
}]
});
我已经为价值和观点设置了2个yAxis。
我的问题是:
数据按事件堆叠,而不是按类别堆叠。正如您将看到的那样,它甚至不是一个好的堆叠,因为第一个栏是隐藏第二个。
是否可以使用Highcharts进行此操作?
更接近我正在寻找的东西:
但我无法找到正确设置第二个yAxis的方法
答案 0 :(得分:1)
如果要显示每个类别的yAxis,则需要将所有数据拆分为单独的点。您可以使用linkedTo
选项连接系列(在图例中)。这将需要单独设置每个系列颜色(以获得匹配的颜色),请参阅演示:http://jsfiddle.net/fxadv20h/4/
代码:
series: [{
id: 'e3',
name: 'Event 3',
data: [{
name: 'Views',
y: 500
}],
yAxis: 1
},{
id: 'e2',
name: 'Event 2',
data: [{
name: 'Views',
y: 200
}],
yAxis: 1
},{
id: 'e1',
name: 'Event 1',
data: [{
name: 'Views',
y: 150
}],
yAxis: 1
}, {
linkedTo: 'e3',
name: 'Event 3',
data: [{
x: 1,
name: 'Value',
y: 1000
}]
},{
linkedTo: 'e2',
name: 'Event 2',
data: [{
x: 1,
name: 'Value',
y: 2000
}]
},{
linkedTo: 'e1',
name: 'Event 1',
data: [{
x: 1,
name: 'Value',
y: 1500
}]
}]