web-dev-qa-db-ja.com

js Highchartsのクリック可能なバー？

Highcharts のhorizo​​ntal棒グラフがあります。たとえば、「アラート」などのイベントで各バーをクリック可能にするにはどうすればよいですか？

たとえば、このシリーズがあります。

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]
}];

さらに何をすればよいですか？

javascriptjqueryclickhighcharts
21
夏期劇場

Highcharts Options Reference が出発点として適しているかもしれません。

参考資料として、列をクリックするとアラートが発生する縦棒グラフの例を次に示します。

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/series-point-events-click-column/

35
mg1075

私は似たようなことをする必要がありました。それが役に立てば幸い。

免責事項：私はGWT Highchartsラッパーを使用しています！

ここに私がしたことのハイライトがあります：

1）メソッドbar（int index）を持つインターフェースFooCallbackを作成して実装しました

2）パラメータとしてFooCallbackを持つJavascriptObject（関数）を返すメソッドgetBarClickCallbackを作成しました

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内のカテゴリを見つけてクリックイベントを追加するメソッドを作成しました。これをaddLabelClickHandler（FooCallback callback、String chartId）と呼び、jqueryを使用してイベントを追加しました。

2）paramsをaddLabelClickHandler（FooCallback callback、String chartId）に転送するaddLabelClickHandler（）を呼び出すChartLoadEventHandlerを追加します。

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);
        }

    }-*/;

ジェフ

2
Jeff I