如何在甘特图高度图中单击Y轴标签时选择或突出显示x轴边框
提问于 2021-11-22 03:55:33
如何在单击Y轴标签时选择或突出显示甘特图中的X轴？
yAxis: {
className: "highcharts-color-0",
uniqueNames: true,
title: {
text: "Data"
},
labels: {
events: {
click: function () {
alert("hellowww");
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();
}
}
}
}上面的代码可以很好地处理Y轴标签的选择，但我也希望在X轴中突出显示选定的行。有没有办法做到这一点呢？
代码笔URL https://codepen.io/mehrotrarohit07/pen/PoKxvQp?editors=1010
回答 1
Stack Overflow用户
发布于 2021-11-22 13:32:59
一般来说，Gannt是通过SVG绘制的，您可以看到线条和文本，您的需求需要定制。您可以尝试添加单击事件并更改Highcharts.CSSObject中的一些可用选项。在事件的某个地方，我会放置一个有精确计算位置的背景。
chart.yAxis[0].labelGroup.element.childNodes.forEach(function(label) {
console.log(label.style);
label.style.cursor = "pointer";
label.onclick = function(){
label.style.fill = "green";
alert('You clicked on '+ this.textContent);
}
});现场演示：https://jsfiddle.net/BlackLabel/koyazbn3/
接口参考：https://api.highcharts.com/class-reference/Highcharts.CSSObject
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70065364
复制相关文章
点击加载更多
腾讯云开发者
