2013-03-26 2 views
1

Я могу создать свой Highchart:Динамически добавить событие в Highcharts Series

chart1 = new Highcharts.Chart(WhateverOptions); 

Я могу динамически установить функцию для выполнения, когда пользователь помещает его курсор на точку:

chart1.tooltip.options.formatter = function() { 
    return 'Whatever I want to display in the tooltip'; 
    } 

Я ищу способ указать функцию для выполнения, когда пользователь нажимает на точку.
Мне нужно указать эту функцию динамически, как и для всплывающей подсказки.
Я не хочу устанавливать событие как часть параметров при создании моей диаграммы.

Любая помощь будет оценена по достоинству.
Спасибо.

ответ

1

Highcharts дает вам событие click i объект серии http://api.highcharts.com/highcharts#series.data.events.click.

plotOptions: { 
     series: { 
      cursor: 'pointer', 
      point: { 
       events: { 
        click: function() { 
         alert(this.y); 
        } 
       } 
      } 
     } 
    }, 

Чтобы добавить это динамически, то я бы просто вызвать фиктивную функцию в главном событии диаграммы щелчка, который ничего не делает, а затем переопределить эту функцию, чтобы сделать то, что вы хотите, когда вы хотите добавить функциональность мыши.

+1

Благодаря SteveP, но, как было сказано в моем вопросе, я не хочу, чтобы установить этот параметр при создании диаграммы, но добавить его динамически на существующем графике. Как показано в примере всплывающей подсказки. – user2212238

+0

Это выглядит тяжело. Я предложил работу, которая должна определить фиктивную функцию, которая ничего не делает при щелчке при первом создании диаграммы, а затем переопределяет ее, когда вы хотите добавить некоторые функции щелчка. – SteveP

+0

К сожалению, динамически добавлять события невозможно, только то, что вы можете сделать, это перерисовать диаграмму с новыми параметрами paraemter. Также вы можете использовать функцию update() http://api.highcharts.com/highcharts#Series.update(), которая позволяет обновить некоторые параметры серии. –

0

Для отдельных точек можно использовать

$(chart.series[0].data[0]).on('click', function() { 
     alert('First Point Click!'); 
    }); 

И для всех точек в серии:

$(chart.series[0].data).on('click', function() { 
     alert('Series Point Click') 
    }); 

Вот jsfiddle

+0

не работает. Может быть, это было изменено? – Nemo64

2

я столкнулся подобный сценарий в моем приложении.

Фактически, я генерирую все серверные данные с помощью json-конструктора, который не позволяет мне писать чистый javascript внутри моего шаблона. Более того, я использую один и тот же шаблон для 10 + разных графиков на нескольких страницах, но я не хочу назначать их одинаковое поведение.

Таким образом, мне нужно было открыть и изменить событие onclick для всех точек в моей диаграмме.

var chart = $('#graph-container').highcharts(); 
// Iterate over the chart series in order to assign a point click event option 
chart.series.forEach(function(s){ 
    s.options.point.events = { 
    click: function(){ 
     // Store the point object into a variable 
     var $$ = this; 
     // Get the corresponding date in the from my x value 
     var date = new Date($$.series.points[$$.index].x); 
     // Do something with the date found 
     console.log(date); 
    } 
    } 
}) 

Это должно работать с Highcharts 5.x

+0

Решил ли он проблему? – mabe02

Смежные вопросы