Angular2-Highcharts: щелкните событие в заголовке пользовательской легенды

Ниже приведены хайчарты, которые я создал. Я добавил собственный заголовок легенды, который дает мне количество (2000). Я пытаюсь создать событие клика на этом 2000, но не смог его добавить.

https://plnkr.co/edit/yzXLz7AIDoWa1Pzxxl4k?p=preview

Мой код легенды:

 legend: {
                useHTML: true,
                enabled: true,
                align: 'center',
                verticalAlign: 'bottom',
                layout: 'vertical',
                x: 0,
              y:30,
                symbolHeight: 12,
                itemMarginBottom: 1,
                symbolWidth: 25,
                symbolRadius: 1,
                labelFormatter: function () {
                    return '<div style="width:180px"><span class="pull-left" style= "font-weight: 500; padding-bottom: 5px">' + this.name +
                    '</span><span class="pull-right" style= "font-weight: 500" >' + this.value +
                    '</span></div> ';
                },
                title: {
            text: ' Issues<br/><span style="font-size: 9px; color: #666; font-weight: normal">Total: 2000</span>' 
            //Click event on 2000 
            // call donut service's get total info. Need not have to pass any variable. 

        },


            }

javascript angular highcharts angular2-highcharts
person indra257    schedule 16.05.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете прикрепить событие onclick к событию загрузки графика.

 template: `
    <chart  [options]="options" (load)="onChartLoad($event.context)">
    </chart>

В компоненте

onChartLoad(chart) {
  this.chart = chart;
  var t = chart.legend.title.element.children[0].children[1]
  t.onclick = () => this.onLegendTitleClick()
}

onLegendTitleClick() {
  console.log('title clicked', this)
}

пример: https://plnkr.co/edit/kxEgwfV8iKUnBkIZlYxv?p=preview

person morganfree    schedule 17.05.2017
comment
Большое спасибо, это работает. Для элементов легенды нажмите, я пытаюсь сделать это классом. Но у этого есть только свойства диаграммы, но не класс. Поэтому я не могу использовать локальную переменную моей службы (this.donutservice). В LegendTitleClick я могу получить свою локальную переменную службы. legendItemClick: функция (e) { console.log(this); вернуть ложь; } - person indra257; 17.05.2017
comment
нужно правильно настроить сервис для компонента. Установите провайдера и правильный конструктор с сервисом пончиков. Если вы хотите использовать это как компонент в событиях hc, вам нужно правильно связать это. См. пример plnkr.co/edit/SWGSCNCLz7KJgjTDUaRY?p=preview. - person morganfree; 17.05.2017
comment
Это действительно помогло. Спасибо - person indra257; 17.05.2017
comment
Это может показаться немного сумасшедшим. На самом деле утром он отлично работал, но вдруг выдает ошибку в консоли. Невозможно прочитать свойство «дочерние элементы» undefined.at DonutComponent.webpackJsonp.632.DonutComponent.onChartLoad (localhost:4200/main.bundle.js:1025:55) в CompiledTemplate.proxyViewClass.View_DonutComponent0.handleEvent_7 (/AppModule/DonutComponent/component. ngfactory.js:83:34) - person indra257; 17.05.2017
comment
У вас была возможность увидеть мой комментарий. - person indra257; 18.05.2017
comment
Похоже, что элемент dom не может быть найден — вы изменили свою легенду? Вы можете сделать это немного более безопасным, определив класс css для элемента dom, а затем попытаться найти этот элемент plnkr.co/edit/W8Co6njuEW4Baa5lk9K3?p=preview - person morganfree; 18.05.2017
comment
Я не вносил никаких изменений, но удивительно, почему он вдруг перестал работать. С новым предложением, которое вы предоставили, я получаю сообщение об ошибке компиляции -- свойство «onclick» не существует для типа «Элемент».) - person indra257; 18.05.2017
comment
Пожалуйста, взгляните на этот plnkr. Здесь я не могу получить событие щелчка и окно предупреждения (даже в моем приложении). Но не удалось получить локальную переменную службы (this.donutService), потому что у нее нет свойств класса. - person indra257; 18.05.2017
comment
Любая помощь будет высоко ценится. - person indra257; 19.05.2017
comment
У вас была возможность заглянуть в это. - person indra257; 21.05.2017
comment
Я не вижу никакого plunkr в вашем комментарии. Что касается ошибки, речь идет о вводе ts forum.highcharts.com/highcharts-usage/ - person morganfree; 22.05.2017
comment
Я все еще сталкиваюсь с проблемой. Свойство onclick не существует для типа «Элемент». at subtitle.onclick = (e) =› this.onLegendTitleClick(e) - person indra257; 25.05.2017
comment
Существует проблема, если у меня есть один и тот же компонент несколько раз. Поскольку класс такой же, это создает проблему. - person indra257; 13.06.2017
comment
Поэтому лучшим решением будет использовать вашу первоначальную идею. но в этом случае я не могу получить chart.legend.title.element.children[0].children[1], но в plnkr я это вижу - person indra257; 13.06.2017
comment
Опубликуйте plunkr с описанным вами поведением. Невозможно отлаживать реальный код. - person morganfree; 16.06.2017