最后修改时间:2022-12-15 18:15
标示带同标示线,只不过标示的内容为一段范围。标示带的作用、事件等很多都类似标示线,这里就只是简单说明标示带的相关内容,不做过多累述。
xAxis: {
// ... 省略代码
plotBands: [{
from: , // 标示带开始值
to: , // 标示带结束值
label: { // 标示带文字标签配置,详见API
},
color: '', // 标示带背景颜色
borderWidth: , // 标示带边框宽度
borderColor: , // 标示带边框颜色
id: , // 标示带 id,用于删除等操作
zIndex:, // 标示带层叠,用于调整显示层次
events: { // 事件,支持 click、mouseover、mouseout、mousemove等事件
click: function(e) {
},
mouseover: function(e) {
},
mouseout: function(e) {
},
mousemove: function(e) {
}
}
}]
},
yAxis: {
// ... 省略代码
plotBands: [{
// 标示带配置,同上
}]
}
同标示线一样,我们可以通过 Axis.addPlotBand 及 Axis.removePlotBand 来动态增加或删除标示线。
// 实例化图表并保存图表对象
var chart = new Highcharts.Chart();
var axis = chart.xAxis[0];
axis.addPlotBand({
id: 'myXAxisPlotBand', // id 用于后续删除用
from: 20,
to: 40,
// ...
});
var chart = new Highcharts.Chart();
var axis = chart.xAxis[0];
axis.removePlotBand('myXAxisPlotBand');
本教程仅用于学习、研究和交流目的,欢迎非商业转载。转载请注明出处及完整的链接。
订阅更新
尊敬的用户您好:
由于域名备案调整,我们将于 2023-01-01 ~ 2023-01-07 日陆续停用 highcharts.com.cn 域名,受影响的网站及域名如下:
网站或服务名称 | 域名 | 替代的网站 |
---|---|---|
主站 | www.highcharts.com.cn | www.hcharts.cn |
静态资源服务/CDN | cdn.highcharts.com.cn code.highcharts.com.cn | code.hcharts.cn |
img.highcharts.com.cn | img.hcharts.cn | |
API 文档 | api.highcharts.com.cn | api.hcharts.cn |
导出服务 | export.highcharts.com.cn | export.hcharts.cn |
以上网站服务及 highcharts.com.cn 域名下的网站将于 2023-01-08 日全部下线,未来一段时间将不可访问,后续我们将上线新的网站。
如果您的应用中有使用到相关服务,请抓紧时间对链接进行调整(特别是静态资源/CDN 服务的链接),以免影响您的网站或应用的正常运行,由此给您带来的不便,敬请谅解。
如需帮助,请及时与我们联系:0571-86208605 / 18106595564(微信)。
简数科技 2022-12-22