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

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

Вот мой код:

plotOptions: {
      column: {
        pointWidth: 20
      },

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

Я пробовал

requestData(this.point)

requestData(this.point.id)

но он не работает.

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

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

Ответ 1

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

Итак, я напишу event.point на консоль и посмотрю, что доступно.

console.log(event.point);

Из документов:

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

Пример, основанный на примере из документов: http://jsfiddle.net/5nTYd/

Нажмите точку и проверьте консоль.

Ответ 2

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

Итак, вы можете построить свои данные о сериалах примерно так:

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

В атрибуте данных выше 1-го элемента указывается дата (x), второй элемент - это другая точка данных (y), а третий - это идентификатор объекта, который представляет этот объект данных. Этот "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])}}}
     }
   },

Ответ 3

Чтобы вернуть "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/

Ответ 4

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

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

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

Ответ 5

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

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

Ответ 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])
         }
       }
     }
   }
 },