У меня есть диаграмма горизонтальная с Highcharts. Как я могу сделать каждый штрих, который можно щелкнуть для события, например, как "alert"?
У меня есть эта серия, например:
series : [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}];
Что еще мне делать?
Вы можете найти ссылку на Highcharts Options хорошую отправную точку.
Из ссылки здесь приведен пример диаграммы столбцов где щелчок столбца вызывает предупреждение.
Мне нужно было что-то подобное. Надеюсь, что это поможет.
Отказ от ответственности: я использую оболочку GWT Highcharts!
Вот основные моменты того, что я сделал:
1) Я создал интерфейс FooCallback, который имеет панель методов (индекс int) и реализовал его
2) Создал метод getBarClickCallback, который возвращает JavascriptObject (function), который имеет FooCallback как параметр
3) Я добавляю обратный вызов клика в опции диаграммы /plotOptions/series/point/events/click, передавая его getBarClickCallback
4) После щелчка на панели вызывается FooCallback.bar(int index)
...
chart.setOption("/plotOptions/series/point/events/click",getBarClickCallback(this));
private native static JavaScriptObject getBarClickCallback(FooCallback callback) /*-{
return function()
{
if( this.x !== "undefined" && this.x >= 0 ){
[email protected]::bar(I)(this.x);
}
};
}-*/;
public void bar( int index ){
//handle chosen index
}
...
Кроме того, мне захотелось прослушивать клики с метками категории (Кстати, я показываю перевернутую гистограмму с категориями)
1) Создал метод, который будет определять категории в dom и добавлять к ним события click. Я назвал его addLabelClickHandler (обратный вызов FooCallback, String chartId) и использовал jquery для добавления событий.
2) Добавьте ChartLoadEventHandler, который вызывает addLabelClickHandler(), который перенаправляет параметры в addLabelClickHandler (обратный вызов FooCallback, String chartId)
3) После нажатия на категорию оси вызывается FooCallback.bar(int index) ...
chart.setLoadEventHandler(new ChartLoadEventHandler() {
@Override
public boolean onLoad(ChartLoadEvent chartLoadEvent) {
addLabelClickHandler();
return false;
}
});
private void addLabelClickHandler(){
addLabelClickHandler(this,chart.getElement().getId());
}
private native static void addLabelClickHandler(FooCallback callback, String chartId)/*-{
try {
var search = '#' + chartId + ' .highcharts-axis-labels:first text';
$wnd.jQuery(search).each(
function(i, j) {
$wnd.jQuery(this).css("cursor", "pointer");
$wnd.jQuery(this).click(function() {
[email protected]::bar(I)(this.x);
});
});
} catch (err) {
console.log(err);
}
}-*/;
Джефф