0

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

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

问题：

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

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

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

而且我一直在玩一些实现，例如（不能像onClick定义为 Angular 组件内部的方法那样工作）：

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

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

4

1 回答 1

1

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

我仍在利用：

  • angular2-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 对象的引用。

于 2018-05-16T20:56:04.147 回答