Highchart 突出显示具有自定义颜色的点之间的区域
Highchart highlight area between points with custom colors
我有一个显示土压和水压数据(存储在数据库中)的 Highchart。我想用不同颜色标记 x 轴上各个点之间的区域,以标记收集数据的区域类型。我有颜色数据(显示在 table 的顶部)但我需要在图表
上标记它
我的图表如下所示:
我希望图表显示为背景颜色从 284 到 285 是橙色,从 285 到 286 是粉红色等等...
我该怎么做
您可以像这样使用提供的渲染功能
$(function () {
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
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]
}]
}, function (chart) { // on complete
chart.renderer.rect(74, 0, 100, 300, 0)
.attr({
'stroke-width': 0,
stroke: 'red',
fill: 'yellow',
zIndex: -1
})
.add();
});
});
你有两种可能:
- 使用multicolor series
plugin
- 设置额外系列并设置zones
我有一个显示土压和水压数据(存储在数据库中)的 Highchart。我想用不同颜色标记 x 轴上各个点之间的区域,以标记收集数据的区域类型。我有颜色数据(显示在 table 的顶部)但我需要在图表
上标记它我的图表如下所示:
我希望图表显示为背景颜色从 284 到 285 是橙色,从 285 到 286 是粉红色等等...
我该怎么做
您可以像这样使用提供的渲染功能
$(function () {
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
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]
}]
}, function (chart) { // on complete
chart.renderer.rect(74, 0, 100, 300, 0)
.attr({
'stroke-width': 0,
stroke: 'red',
fill: 'yellow',
zIndex: -1
})
.add();
});
});
你有两种可能:
- 使用multicolor series
plugin
- 设置额外系列并设置zones