使用 Highcharts 的条形图的单击事件不起作用？答案

【问题标题】：Click event for bar-chart using Highcharts not working?使用 Highcharts 的条形图的单击事件不起作用？
【发布时间】：2021-02-11 20:41:30
【问题描述】：

作为我的 Highchart POC 的一部分，我正在努力实现改变

点击 x 轴上特定标签时 x 轴的 labelcolor
想读取当前x轴标签和y轴数据

但是点击事件只是没有触发，在加载时我实现了标签颜色，但我试图在点击事件上做同样的事情

https://stackblitz.com/edit/highcharts-angular-demo-t8pmf4?embed=1&file=src/app/app.component.ts

任何人都可以帮助我或建议我

根据下面提供的解决方案，我达到了 50% https://stackblitz.com/edit/highcharts-angular-demo-z84bav?embed=1&file=src/app/app.component.ts

但是如何更改标签颜色？？

提前致谢

【问题讨论】：

标签： javascript highcharts bar-chart angular2-highcharts

【解决方案1】：

要添加click 事件并更改事件中的颜色，请使用以下代码：

    xAxis: {
        ...,
        labels: {
            ...,
            events: {
                click: function() {
                    this.axis.ticks[this.pos].label.css({
                        color: 'red'
                    });
                }
            }
        }
    }

现场示例： http://jsfiddle.net/BlackLabel/1nyk6c5b/

文档： https://www.highcharts.com/plugin-registry/single/15/Custom-Events

【讨论】：

是的，但我只想将选定的标签显示为红色，剩余标签应为默认颜色，在这种情况下如何获取剩余标签
嗨@Soumya Gangamwar，好的 - 请检查这个例子：jsfiddle.net/BlackLabel/hp3wxdb4
如何在 x 轴上为可选择栏添加图像？
嗨@Soumya Gangamwar，我已经在这里回答了你：stackoverflow.com/questions/64736398/…

【解决方案2】：

events 应该在labels 对象内，现在您的点击处理程序将触发。

xAxis: {
        categories: ["4-10/10", "11-17/10", "18-24/10", "25-31/10"],
        labels: {
          formatter: function() {
            if ("18-24/10" === this.value) {
              return '<span style="fill: red;">' + this.value + "</span>";
            } else {
              return this.value;
            }
          },
          events: {
             click: function() {
            console.log("click");
           }
          }
        },

【讨论】：

哈它工作正常，这里在这个点击事件中如何获取x轴当前标签数据，y轴数据，如何格式化标签颜色
console.log(this.value);获取 x 轴数据是否可以读取条形 y 轴品脱？