如何在 y 轴甘特图 Highcharts 上设置点击或选择标签的背景?
How to set the background of clicked or selected label on y axis gantt chart Highcharts?
我想在甘特图中突出显示选定的 Y-axis 标签。还有什么方法可以给 y-axis 标题一些背景颜色?
y轴:{
类名:“highcharts-color-0”,
唯一名称:真实,
标题: {
文本:“数据”
},
标签: {
事件:{
点击:功能(){
警报(“你好www”);
var图表=这个,
系列 = chart.series,
plotLeft = chart.plotLeft,
plotTop = chart.plotTop,
plotWidth = chart.plotWidth;
如果(chart.myBackground){
chart.myBackground.destroy();
}
chart.myBackground = chart.renderer
.rect(10, plotTop, 500, 30, 1)
.attr({
"stroke-width": 2,
stroke: "red",
fill: "yellow",
opacity: 0.5,
zIndex: -1
})
.add();
}
}
}
}
enter image description here
link转码笔https://codepen.io/mehrotrarohit07/pen/PoKxvQp?editors=1010
尝试使用这种方法:
yAxis: {
labels: {
events: {
click: function() {
const chart = this.chart;
const axis = this.axis;
const labelPos = this.pos;
const tick = axis.ticks[labelPos]
const x = chart.marginRight;
const width = tick.slotWidth;
const height = axis.height / (axis.tickPositions.length);
const y = axis.top + labelPos * height;
chart.renderer
.rect(x, y, tick.slotWidth, height)
.attr({
fill: 'yellow',
zIndex: 0
})
.add();
}
}
}
},
我希望代码中的一切都清楚 - 如有任何疑问,请随时提出。
演示:https://jsfiddle.net/BlackLabel/qyj327Lx/
API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#rect
我想在甘特图中突出显示选定的 Y-axis 标签。还有什么方法可以给 y-axis 标题一些背景颜色?
y轴:{ 类名:“highcharts-color-0”, 唯一名称:真实, 标题: { 文本:“数据” }, 标签: { 事件:{ 点击:功能(){ 警报(“你好www”); var图表=这个, 系列 = chart.series, plotLeft = chart.plotLeft, plotTop = chart.plotTop, plotWidth = chart.plotWidth; 如果(chart.myBackground){ chart.myBackground.destroy(); }
chart.myBackground = chart.renderer
.rect(10, plotTop, 500, 30, 1)
.attr({
"stroke-width": 2,
stroke: "red",
fill: "yellow",
opacity: 0.5,
zIndex: -1
})
.add();
}
}
}
}
enter image description here
link转码笔https://codepen.io/mehrotrarohit07/pen/PoKxvQp?editors=1010
尝试使用这种方法:
yAxis: {
labels: {
events: {
click: function() {
const chart = this.chart;
const axis = this.axis;
const labelPos = this.pos;
const tick = axis.ticks[labelPos]
const x = chart.marginRight;
const width = tick.slotWidth;
const height = axis.height / (axis.tickPositions.length);
const y = axis.top + labelPos * height;
chart.renderer
.rect(x, y, tick.slotWidth, height)
.attr({
fill: 'yellow',
zIndex: 0
})
.add();
}
}
}
},
我希望代码中的一切都清楚 - 如有任何疑问,请随时提出。
演示:https://jsfiddle.net/BlackLabel/qyj327Lx/
API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#rect