21

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

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

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

これ以上何をすべきですか？

4

3 に答える 3

37

Highchartsオプションリファレンスが出発点として適している場合があります。

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

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

于 2012-05-16T03:13:00.750 に答える
2

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

免責事項：私は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 ){
            callback.@com.FooCallback::bar(I)(this.x);
        }
    };
}-*/;

public void bar( int index ){
    //handle chosen index
}

..。

さらに、カテゴリラベルのクリックを聞きたかった（ちなみに、カテゴリを含む逆棒グラフを表示しています）

1）dom内のカテゴリを検索し、それらにクリックイベントを追加するメソッドを作成しました。これをaddLabelClickHandler（FooCallbackコールバック、String chartId）と呼び、jqueryを使用してイベントを追加しました。

2）パラメータをaddLabelClickHandler（FooCallbackコールバック、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() {
                            callback.@com.FooCallback::bar(I)(this.x);
                        });
                    });
        } catch (err) {
            console.log(err);
        }

    }-*/;

ジェフ

于 2014-01-28T20:55:30.623 に答える
0

Plotoptionの下にクリックイベントを追加します

plotOptions: {
                series: {
                    point: {
                        events: {
                            click: function () {
                                    alert(this.category)
                            }
                        }
                    }
                }
            }
于 2020-10-13T08:51:02.453 に答える