首页 文章

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

提问于
浏览 次
0

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

I know the following thus far:

The problem:

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

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

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

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

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

我将继续更新此问题并提供更多详细信息 - 请继续关注 .

javascript angular highcharts angular2-highcharts

1 回答

  • 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 Context中，然后我将它桥接回一个名为 self 的本地范围变量 - 这是对 this 的引用，它引用了该组件中定义的Angular对象 .

    回复于

相关问题