javascript - Highcharts中的堆叠条形图需要单个边框
问题描述
我在堆积条形图中为每个数据设置了一个边框。
图表选项:
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [{
y: 5,
borderColor: 'red',
borderWidth: 4
}, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [{y: 2,
borderColor: 'red',
borderWidth: 4}, 2, 3, 2, 1]
}, {[enter image description here][1]
name: 'Joe',
data: [{y: 3,
borderColor: 'red',
borderWidth: 4}, 4, 4, 2, 5]
}]
});
我想要这样的 图片
请帮助我使用正确的 ChartOptions,它在条形周围提供单个边框,每个条形周围没有多个边框。
谢谢并恭祝安康
解决方案
您可以添加带有边框的假系列并根据图表上的更改动态更新它或呈现自定义形状以模拟边框。
series: [..., {
showInLegend: false,
stacking: false,
data: [10],
grouping: false,
color: 'transparent',
borderWidth: 4,
borderColor: 'red'
}]
现场演示:http: //jsfiddle.net/BlackLabel/gtLm9hqk/
API参考:
https://api.highcharts.com/highcharts/series.column
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#rect
推荐阅读
- c# - C#如何像访问物理文件一样访问嵌入文件
- javascript - 如何将 createjs 库包含到 reactjs 项目中
- python - Python wx 会话超时
- php - PHP POST 与 MYSQLI
- php - 如何使用正则表达式从 xml 中删除几行标签及其内容
- c# - 在 C# 中检查按键事件
- javascript - Three.js后处理运动模糊渲染黑屏
- ruby-on-rails - 单表继承 Ruby on Rails 5.2
- swift - 冗余一致性
到协议'UISearchBarDelegate' - Swift 4 - java - 跳过 OnPostExecute