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])
}
}
}
}
},