Общий рисунок в Highcharts с Angular 6
На изображении выше показан пример общего рисования на высоких диаграммах. Здесь я хочу добавить событие щелчка на ярлыках, чтобы вызвать мою функцию angular или обновить любой элемент 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
Заранее спасибо.
Ответы 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
Привет, спасибо за ответ. Но я сделал это, предупреждение работает, но не может вызывать мои функции angular. Ты хоть представляешь, почему это так?
Я не могу сказать, если вы не покажете мне пример того, как вы ее решили.
Что такое
this.clickedNode, потому что в вашем кодеthisотносится к пути SVG? Прочтите Как спросить и создайте минимальный воспроизводимый пример, используя, например, кодовый код или аналогичный