Общий рисунок в Highcharts с угловым 6

Question

Верхний график общего рисунка

На рисунке выше показан пример общего рисунка в верхних графиках.Здесь я хочу добавить событие нажатия на метки, чтобы вызвать мою угловую функцию или обновить любой элемент HTML без использования jquery.Кто-нибудь знает, как мы можем это сделать, я много искал, но не нашел выхода?

ren.label('PHP Server-1', 15, 87)
    .attr({
        fill: '#57c15d',
        stroke: 'white',
        'stroke-width': 2,
        padding: 5,
        r: 5
    })
    .css({
        color: 'white',
        fontSize: '16px'
    }).on('click',function(){
        this.clickedNode = false;
        alert(this.clickedNode);            
    })
    .add()
    .shadow(true);

В приведенном выше примере я пытаюсь установить false для переменной clickedNode и получить доступ к ней в угловом представлении.,Это предупреждает меня, но не обновляет мой интерфейс.Для справки: https://www.highcharts.com/demo/renderer

Заранее спасибо.

Answer 1

Вы можете добавить события в SVGElements, используя on(), например:

ren.path([
  'M', 235, 185,
  'L', 235, 155,
  'C', 235, 130, 235, 130, 215, 130,
  'L', 95, 130,
  'L', 100, 125,
  'M', 95, 130,
  'L', 100, 135
])
  .attr({
     'stroke-width': 2,
     stroke: colors[3]
})
  .on(
    'click', //Event type
    function() { 
      alert('clicked'); //event action
    }
).add();

Рабочий пример JSFiddle: https://jsfiddle.net/ewolden/na9jyq0m/14/ (где вы можете нажать на стрелкумежду батик и SaaS-клиент (браузер или скрипт) )

API на SVGElement.on(): https://api.highcharts.com/class-reference/Highcharts.SVGElement#on