HighStack是一个完整的系列(条形图)
HighStack a full serie (Bar chart)
所以我有两个系列的事件数据:
- 有风景的系列
- 价值欧元的系列
每个系列中的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有可能做到这一点吗?
编辑
初始JSFIDDLE
更接近我想要的东西:
新Fiddle
但我找不到正确设置第二个yAxis 的方法
如果要按类别显示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
}]
}]
相关文章:
- 用chart.js绘制条形图
- d3.js用按钮更新条形图工具提示
- 添加新数据时D3.JS条形图列偏移量
- Chart.js条形图:网格颜色和隐藏标签
- 在条形图中呈现数据AngularJS,如何制作一个好的多条形图
- Chart.js 2.1.2条形图动画问题
- 如何在Extjs5中更改条形图的标签
- d3.js条形图转换无法正常工作
- 从数组在d3中创建条形图时出现问题
- 条形图元素的HTML5 JavaScript锚点
- d3.js组条形图不起作用
- Highcharts条形图如何添加系列事件
- 为每个项目创建具有不同系列数的多系列条形图
- HighStack是一个完整的系列(条形图)
- Highcharts 单个水平堆叠条形图,始终显示数据名称(标签)和 %-年龄,并在鼠标悬停时显示数据编号和系列名称
- 肯杜伊条形图设置系列在单击按钮
- 突出显示一个系列中的一个条形图
- 高位图:将多系列条形图中的每个条形图设置为不同的颜色
- 高图:如何将图例链接到类别,而不是链接到条形图系列
- 高图堆叠条形图:添加类别和数据系列