Tôi có ngang biểu đồ thanh với Highcharts. Làm thế nào tôi có thể làm cho mỗi thanh có thể nhấp được cho một sự kiện, ví dụ như 'cảnh báo'?Thanh có thể nhấp trong js Highcharts?
tôi có loạt bài này ví dụ:
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]
}];
Tôi nên làm gì hơn?
Bạn có thể tìm thấy Highcharts Options Reference điểm khởi đầu tốt.
Từ tham chiếu, dưới đây là ví dụ về biểu đồ cột trong đó nhấp vào một cột sẽ kích hoạt cảnh báo.
Tôi cần làm một điều tương tự. Hy vọng nó giúp.
Tuyên bố từ chối trách nhiệm: Tôi đang sử dụng trình bao bọc Hightarts GWT!
Dưới đây là những điểm nổi bật về những gì tôi đã làm:
1) Tôi tạo ra một FooCallback giao diện mà có một thanh phương pháp (int index) và thực hiện nó
2) Tạo một getBarClickCallback phương thức trả về một JavascriptObject (chức năng), mà có FooCallback như một param
3) tôi thêm một callback nhấp chuột vào tùy chọn biểu đồ/plotOptions/loạt/điểm/sự kiện/nhấp chuột, đi qua nó getBarClickCallback
4) khi một thanh là nhấp chuột ed, FooCallback.bar (int index) được gọi
...
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
}
...
Ngoài ra tôi muốn lắng nghe những nhãn loại nhấp chuột (Bằng cách này tôi thấy một biểu đồ thanh đảo ngược có các danh mục)
1) Đã tạo một phương pháp sẽ định vị các danh mục trong phần dom và thêm các sự kiện nhấp vào chúng. Tôi gọi nó là addLabelClickHandler (gọi lại FooCallback, String chartId) và sử dụng jquery để thêm các sự kiện.
2) Thêm một ChartLoadEventHandler mà các cuộc gọi addLabelClickHandler() mà tiền đạo params để addLabelClickHandler (FooCallback callback, String chartId)
3) Khi một loại trục được nhấp, FooCallback.bar (int index) được gọi . ..
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);
}
}-*/;
Jeff
liên kết ở trên bị phá vỡ không may ... – Christian
@Christian - liên kết bây giờ cố định cho các ví dụ biểu đồ thanh. Có vẻ như nhóm Highcharts vẫn phải sửa các liên kết bên trong tham chiếu API của họ. – mg1075
cảm ơn. Đây là một ví dụ khác trong trường hợp: http: // jsfiddle.net/e7b4Z/311/ – Christian