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

Question

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

点击 x 轴上的特定标签时 x 轴的标签颜色
想读取当前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

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

提前致谢

Answer 1

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");
           }
          }
        },

Answer 2

要添加 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

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

Click event for bar-chart using Highcharts not working?

javascript

bar-chart

highcharts

angular2-highcharts