在 Angular 2 Highcharts 上添加 X 轴标签点击事件答案

【问题标题】：Add X-Axis label click event on Angular 2 Highcharts在 Angular 2 Highcharts 上添加 X 轴标签点击事件
【发布时间】：2018-05-17 04:56:04
【问题描述】：

我在手动滚动解决方案时遇到困难，该解决方案涉及从 HighCharts API 向 X 轴标签（特别是柱形图）添加点击侦听器，特别是在 Angular 2+ 应用程序中。

到目前为止我知道以下几点：

我正在使用angular2-highcharts 以角度方式执行这些图表插图。
根据设计，HighCharts API removed X-Axis click events for security reasons。
确实存在一个customEvents 插件来添加诸如此类的自定义事件。

问题：

简而言之，我想将点击事件添加到标签元素，并将其附加到 Angular 组件内部定义的方法。但是，由于这个问题，我无法通过常规方式（例如利用 jQuery 或本机 JavaScript 在元素上添加事件侦听器）来做到这一点 - 我想要的方法是在 Angular 的世界中。

在一个理想的世界里，我想这样做（但是，包装器不提供这个当前的机会）：

<xAxis (click)="onClick($event)"></xAxis>

我一直在玩一些实现，例如（不工作，因为 onClick 被定义为 Angular 组件内部的方法）：

$('#label-0').on('click', this.onClick(e));

我将继续更新这个问题的更多细节 - 请继续关注。

【问题讨论】：

标签： javascript angular highcharts angular2-highcharts

【解决方案1】：

所以这是我的最终解决方案，它按我期望的方式工作。我把它贴在这里，以防有人掉进类似的兔子洞。

我仍在利用：

angular2-highcharts
HighCharts

但不是我之前提到的customEvents.js 插件。

我已经完全从 Angular 包装器中获得了这个开箱即用的功能：

<xAxis (afterSetExtremes)="onAfterSetExtremesX($event)"></xAxis>

在我各自的 Angular 组件中，我设置了一个公共方法，如下所示：

public onAfterSetExtremesX (e: any) {
    // I need context to this very component so I can bridge
    // between Angular objects and classic jQuery techniques.
    let self = this;

    // Let's cherry-pick all WEEKLY record data from Highcharts setup.
    let chartEvent0 = e.context.categories[0];
    let chartEvent1 = e.context.categories[1];
    let chartEvent2 = e.context.categories[2];
    let chartEvent3 = e.context.categories[3];
    let chartEvent4 = e.context.categories[4];
    let chartEvent5 = e.context.categories[5];
    let chartEvent6 = e.context.categories[6];

    // Attach a click for these highcharts labels to invoke the component's method.
    $('#label-single-0, #label-multiple-0').on('click', function(){
        self.childModal.showModal(chartEvent0);
    });
    $('#label-single-1, #label-multiple-1').on('click', function(){
        self.childModal.showModal(chartEvent1);
    });
    $('#label-single-2, #label-multiple-2').on('click', function(){
        self.childModal.showModal(chartEvent2);
    });
    $('#label-single-3, #label-multiple-3').on('click', function(){
        self.childModal.showModal(chartEvent3);
    });
    $('#label-single-4, #label-multiple-4').on('click', function(){
        self.childModal.showModal(chartEvent4);
    });
    $('#label-single-5, #label-multiple-5').on('click', function(){
        self.childModal.showModal(chartEvent5);
    });
    $('#label-single-6, #label-multiple-6').on('click', function(){
        self.childModal.showModal(chartEvent6);
    });
}

jQuery 可以选择 HTML 元素，因为它们最终被绘制到 Axis 上下文中，我将其桥接到名为 self 的本地范围变量 - 这是对 this 的引用，它解释了其中定义的 Angular 对象非常组件。

【讨论】：