如何解决用情节带或区域突出显示周末
我想在时间序列图中突出显示周末。到目前为止,阅读文档我认为这是实现此目的的两种方法:绘制带或区域。我只是设法在x轴上突出显示周六和周日(请参见下面的代码)。我想绘制一个乐队。(请参阅1)。
xAxis: {
type: 'datetime',crosshair: {
width: 2,color: '#F66',dashStyle: 'shortdot'
},labels: {
formatter: function () {
var day = Highcharts.dateFormat('%a',this.value);
if (day == "Sat" || day == "Sun") {
return `<b>${Highcharts.dateFormat('%a %e %b',this.value)}</b>`;
} else {
return Highcharts.dateFormat('%a %e %b',this.value);
}
}
}
}
}
解决方法
这是我的想法,如何根据使用的数据动态添加plotBands
。我认为代码中的所有内容都很清楚-如果没有,请随时提出。
演示:https://jsfiddle.net/BlackLabel/6n4ab7jm/
events: {
load() {
let chart = this,plotBandAr = [],plotBand = {
color: '#FCFFC5',};
chart.series[0].points.forEach(p => {
// start from the saturday
if (new Date(p.x).getDay() === 6) {
plotBand.from = p.x
}
// end on the sunday
if (new Date(p.x).getDay() === 0) {
plotBand.to = p.x
}
// add plotBand on monday and reset the plotBand object
if (new Date(p.x).getDay() === 1) {
plotBandAr.push(plotBand)
plotBand = {
color: '#FCFFC5',};
}
});
chart.xAxis[0].update({
plotBands: plotBandAr
})
}
}
API:https://api.highcharts.com/highcharts/chart.events.load
API:https://api.highcharts.com/class-reference/Highcharts.Axis#update
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。