Добавьте событие щелчка по метке оси X на угловых 2 Highcharts - PullRequest
Новая
       15

Добавьте событие щелчка по метке оси X на угловых 2 Highcharts

0 голосов
/ 16 мая 2018

У меня возникают трудности при ручном развертывании решения, включающего добавление прослушивателя кликов к метке оси X (в частности, столбчатой ​​диаграмме) из API HighCharts, особенно в приложении Angular 2+.

На данный момент я знаю следующее:

Проблема:

Короче говоря, я хотел бы добавить событие click к элементу метки и присоединить его к методу, определенному внутриУгловой компонент.Однако я не могу сделать это с помощью обычных средств, таких как использование jQuery или собственного JavaScript, чтобы добавить прослушиватель событий в элемент из-за этой самой проблемы - метод, который мне нужен, находится в мире Angular.

В идеалеМир, в котором я хотел бы сделать это (однако оболочка не предоставляет этой текущей возможности): 

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

И я поиграл с реализациями, такими как (не работает, как определено onClick)как метод внутри углового компонента): 

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

Я буду продолжать обновлять этот вопрос с более подробной информацией - пожалуйста, следите за обновлениями.

1 Ответ

0 голосов
/ 16 мая 2018

Так что это было мое окончательное решение, которое работает так, как я ожидаю.Я выкладываю это здесь на случай, если кто-нибудь пойдет по аналогичной кроличьей норе.

Я все еще использую:

  • 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, которая учитываетУгловые объекты, определенные в этом самом компоненте.

...