Javascript js Highcharts 中的可点击栏？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10611374/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Clickable Bars in js Highcharts?
提问by u775856
I have horizontalbar chart with Highcharts. How can I make each bar clickablefor an event, for example like 'alert' ?
我有带有Highcharts 的水平条形图。我怎样才能让一个事件的每个栏都可以点击，例如 'alert' ？
I have this series for example:
例如，我有这个系列：
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]
}];
What more should I do?
我还应该做什么？
回答by mg1075
You might find the Highcharts Options Referencea good starting point.
您可能会发现Highcharts Options Reference是一个很好的起点。
From the reference, here's an example of a column chart where clicking a column fires an alert.
从参考资料中，这里有一个柱形图的例子，点击一个柱子会触发一个警报。
回答by Jeff I
I needed to do a something similar. Hope it helps.
我需要做类似的事情。希望能帮助到你。
Disclaimer: I am using GWT Highcharts wrapper!
免责声明：我正在使用 GWT Highcharts 包装器！
Here are the highlights of what I did:
以下是我所做的重点：
1) I created an interface FooCallback that has a method bar( int index ) and implemented it
1) 我创建了一个接口 FooCallback ，它有一个方法 bar( int index ) 并实现了它
2) Created a method getBarClickCallback that returns a JavascriptObject (function), that has the FooCallback as a param
2) 创建了一个方法 getBarClickCallback，它返回一个 JavascriptObject（函数），它以 FooCallback 作为参数
3) I add a click callback in the chart option /plotOptions/series/point/events/click, passing it getBarClickCallback
3）我在图表选项/plotOptions/series/point/events/click中添加了一个点击回调，传递它getBarClickCallback
4) Once a bar is clicked, FooCallback.bar( int index ) is invoked
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
}
...
...
Additionally I wanted to listen to category label clicks (By the way I am showing an inverted bar graph that has categories)
另外我想听听类别标签的点击（顺便说一下，我正在展示一个有类别的倒置条形图）
1) Created a method that will locate categories in the dom and add click events to them. I called it addLabelClickHandler(FooCallback callback, String chartId) and used jquery to add the events.
1) 创建了一个方法，将在 dom 中定位类别并向其添加点击事件。我称它为 addLabelClickHandler(FooCallback callback, String chartId) 并使用 jquery 添加事件。
2) Add a ChartLoadEventHandler that calls addLabelClickHandler() that forwards params to addLabelClickHandler(FooCallback callback, String chartId)
2) 添加一个 ChartLoadEventHandler 调用 addLabelClickHandler() 将参数转发到 addLabelClickHandler(FooCallback callback, String chartId)
3) Once a axis category is clicked, FooCallback.bar( int index ) is invoked ...
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);
}
}-*/;
Jeff
杰夫
