12

全て、

作業中のWebアプリでHighChartsを使用していますが、一般的には非常に気に入っています。

ただし、チャート全体でマウスクリックをキャプチャする方法を理解するのに苦労しています。

言い換えると、ユーザーがグラフのどこかをクリックしたとき（たとえば、プロット領域、タイトル、x軸またはy軸、グラフ要素の周囲の余白とパディングなど）を知りたいのですが。

または、イベントを完全に無効にして、コンテナ自体にイベントをトラップできるようにします。

より詳細なバージョン...

HighChartを含むDIVがあります。

ユーザーがそのDIV内のどこかをクリックしたかどうかを知りたいです。

つまり、最初は「onclick」イベントをDIVにアタッチしようとしましたが、おそらくクリックがHighChartにトラップされているために、それが発生することはありません。

そこで、HighChartを設定するコードに、次のように追加しました。

var chart = new Highcharts.Chart({
    chart: {
        renderTo: "container",
        events: {
            click: function(event) {
                // do something
            }
        },
        ...
    }
    ...
});

これは、ユーザーがプロット領域内のどこかをクリックした場合は問題なく機能しますが、グラフ内の他の場所（たとえば、x軸、y軸、タイトル、グラフ要素の周囲のパディングなど）をクリックした場合は機能しません。

では、チャート全体をクリック可能にするにはどうすればよいですか？

よろしくお願いします！

4

3 に答える 3

9

私はこれと同じ問題を抱えていました。

Webkitインスペクターを使用すると、Highchartsがクリックイベントをチャートコンテナー（「highcharts-container」クラスを持つdiv）にバインドしていることがわかります。これは、クリックを妨げるようです。

そのクリックイベントの機能が不要な場合は、次のように設定して削除できます。

chart.container.onclick = null;

それ以外の場合は、組み込みのhighchartsイベントプロパティを使用してコールバックを設定する必要があります。OPが指摘したように、チャートオブジェクトには「events」プロパティがあり、プロットの背景をクリックするとトリガーされます。シリーズ自体をクリックするとトリガーされるプロットオプションのイベントプロパティもあります。

たとえば、面積プロットの場合：

var chart = new Highcharts.Chart({
    ...
    plotOptions: {
        area: {
            events: {
                click: function(event) {
                    // do something
                }
            },
        ...
        }
    }
    ...
});

詳細については、 http ：//www.highcharts.com/ref/#plotOptions-area-eventsを参照してください。

于 2012-08-10T14:25:36.483 に答える
5

私はこれに遭遇し、highchartsからクリックイベントをバブルするhighcharts3の拡張機能/プラグインを作成しました。

/*global Highcharts*/
(function (Highcharts) {
    "use strict";

    Highcharts.wrap(Highcharts.Pointer.prototype, 'onContainerClick', function (original, e) {
        var pointer = this,
            parent = pointer.chart.container.parentNode,
            bubbleUp = true;

        // Add a method to the event to allow event handlers to prevent propagation if desired
        e.swallowByHighCharts = function() { bubbleUp = false; };

        // Call the original event
        original.apply(this, Array.prototype.slice.call(arguments, 1));

        // Trigger the event on the container's parent (to bubble the event out of highcharts)
        // unless the user wanted to stop it
        if (bubbleUp && typeof parent !== 'undefined' && parent) {
            jQuery(pointer.chart.container.parentNode).trigger(e);
        }
    });

}(Highcharts));

これを追加すると、すべてのクリックイベントがhighchartsコンテナからバブルアウトされます。コンテナ自体でトリガーすると、highchartsとjqueryがイベントの発生とどのように相互作用するかにより、大量のループが発生します。少なくとも私の場合、レンダリングターゲットとして使用される要素にハンドラーはありませんでした。

swallowByHighChartsに関する追加のビットにより、必要に応じて新しい動作を無効にすることができます。

config = {
    chart: { ... }
    plotOptions: {
        series: {
            point: {
                events: {
                    click: function(e) {
                        // Don't pass along clicks on series points for one reason or another
                        e.swallowByHighCharts();
                    }
                }
            }
        }
    }
}
于 2014-04-01T22:47:17.873 に答える
3

私の意見では、非常に遅い答えですが、それでも必要です。

ハイチャートのドキュメント http://api.highcharts.com/highcharts#chart.events.click

イベントをチャートのコンテナに転送するだけのスクリプトを指します：http： //jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/chart/イベント-コンテナ/

$(function () {
    $('#chart1').highcharts({
        ...
    });


    $('.chart-container').bind('mousedown', function () {
        $(this).toggleClass('modal');
        $('.chart', this).highcharts().reflow();
    });
});
于 2015-06-04T20:18:22.243 に答える