Question

我很难手动推出一个解决方案，涉及从HighCharts API向X-Axis标签（特别是柱形图）添加点击监听器，特别是在Angular 2+应用程序中。

到目前为止我知道以下内容：

我正在使用angular2-highcharts以Angular方式执行这些图表插图。
按设计，HighCharts API removed X-Axis click events for security reasons。
确实存在customEvents插件以添加此类自定义事件。

问题：

简而言之，我想将一个click事件添加到label元素并将其附加到Angular组件内定义的方法。但是，我无法通过正常的方式来实现这一点，例如利用jQuery或本机JavaScript在元素上添加事件监听器，因为这个问题 - 我想要的方法是在Angular的世界中。

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

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

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

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

我会继续更新此问题并提供详细信息 - 请继续关注。

Answer 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在那个组件中定义的对象。

在Angular 2 Highcharts上添加X轴标签单击事件

1 个答案: