Highcharts => Получение идентификатора точки при нажатии на линейную диаграмму

Question

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

Вот мой код:

plotOptions: { 
     column: { 
     pointWidth: 20 
     }, 

     series: { 
     cursor: 'pointer', 
     events: { 
      click: function(event) { 
      requestData(event.point); 
      } 
     } 
     } 

Я попытался

requestData(this.point) 

,

requestData(this.point.id) 

также, но он не работает.

Как мы получаем идентификатор точки?

Большое спасибо.

Answer 1

В соответствии с документами, event.point содержит указатель на ближайшую точку на графике.

Так что я бы написал event.point на консоль и посмотрел, что доступно.

console.log(event.point); 

From the docs:

нажмите: Срабатывает, когда серия нажата. Это ключевое слово относится к самому объекту серии. Один параметр, событие, передается функции. Это содержит общую информацию о событиях, основанную на jQuery или MooTools, в зависимости от того, какая библиотека используется в качестве базы для Highcharts. Кроме того, event.point содержит указатель на ближайшую точку на графике.

Пример на примере из документации:http://jsfiddle.net/5nTYd/

Щелкните точку, и проверьте консоль.

Answer 2

Я просто сделал это, передав 3 объекта в массив данных серии, а затем вытащил его из атрибута конфигурации объекта из щелчка.

Таким образом, вы можете построить свой-то данные серии, как это:

series: [{ 
    name: 'Example', 
    yAxis: 0, 
    type: 'spline', 
    data: [[1294099200000,220.0,37],[1296432000000,190.0,40],[1297036800000,184.4,5]] 
}] 

В атрибуте данных выше 1-го элемента является дата (х), то второй элемент другая точка данных (у), и 3rd - это идентификатор объекта, который представляет этот объект данных. Этот «z» не будет отображаться на графике, но будет отображаться как третий элемент в конфигурационном массиве. Например: с помощью атрибута plotOptions точки, чтобы захватить щелчок, идентификатор объекта в оповещении как this.config [2]

plotOptions: { 
    series: { 
     cursor: 'pointer', 
     point: {events: {click: function() {console.log(this); alert('Category: '+ this.category +', value: '+ this.y + 'Series: ' + this.series.name + ' ID: ' + this.config[2])}}} 
    } 
    }, 

Answer 3

я нашел этот старый пост в моем поиске в ==> добавить маркер до точки, когда я нажимаю Highcharts «Линия тренда» [в примерах: диаграмма «линейные ряды»] [когда я нажимаю в любом месте нарисованной линии).ну, не показывая вам слишком много кода, посмотрите в

cursor: 'pointer', 
        point: { 
         events: { 
          click: function(e) { 
           alert("X("+this.x+"),Y("+this.y+")"); 
           }//click 
          }//events 
          }//point 

, если вы хотите более подробно, я рад предоставить!

Answer 4

Чтобы вернуть «ID» выбранной точки на графике используется значение «X»:

plotOptions: { 
    series: { 
     cursor: 'pointer', 
     events: { 
      click: function(event) { 
        // Log to console 
       console.log(event.point); 
       alert(this.name +' clicked\n'+ 
         'Alt: '+ event.altKey +'\n'+ 
         'Control: '+ event.ctrlKey +'\n'+ 
         'Shift: '+ event.shiftKey +'\n'+ 
         'Index: '+ event.point.x); 
      } 
     } 
    } 
}, 

Посмотреть пример здесь: http://jsfiddle.net/engemasa/mxRwg/

Answer 5

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

plotOptions{ 
series:{ 
    cursor: 'pointer', 
    events: { 
     click: function(event) { 
     console.log(event.point.series.userOptions.id); 
     } 
    } 
    } 

Answer 6

plotOptions: { 
    series: { 
    cursor: 'pointer', 
    point: { 
     events: { 
     click: function() { 
      console.log(this); 
      alert('Category: '+ this.category +', value: '+ this.y + 'Series: ' + this.series.name + ' ID: ' + this.config[2]) 
     } 
     } 
    } 
    } 
},