highcharts - 在 Highcharts 折线图中设置线边框属性(颜色/宽度)
问题描述
示例代码:
Highcharts.chart('container', {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
lineWidth: 8,
color: '#FF0000'
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
如何设置线条边框的颜色和宽度?我需要这样的行:
解决方案
您可以通过添加具有链接到主数据数组的相同数据数组的附加系列来实现带边框的线条系列。然后只需设置更大lineWidth
和不同的颜色。
代码:
const data = [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4];
Highcharts.chart('container', {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
lineWidth: 5,
color: '#000',
marker: {
enabled: false
},
data: data,
linkedTo: 'main'
}, {
lineWidth: 2,
id: 'main',
color: '#FF0000',
name: 'Test',
marker: {
enabled: false
},
states: {
hover: {
lineWidthPlus: 0
}
},
data: data
}]
});
演示:
API参考:
推荐阅读
- swift - os_log 调试和发布版本
- python - python - 解释在其表达式中未使用参数的 lambda
- css - 如何在不绕圈移动的情况下旋转 SVG 路径元素?
- sql - 检查字段中的数据是否为有效的 JSON
- c# - 分层架构中现有数据库的脚手架数据库上下文
- git - Git over ssh 忽略了 ssh 配置
- python - 比较python中的2个JSON文件并检查项目是否更改
- django - Pytest django url 的测试
- lisp - 只需执行一个 lsp 文件并获取一个日志文件
- java - 由 pom.xml 中的依赖 spring-boot-starter-test 拉取的罐子