BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] Chart.jsの円グラフのクリックイベント

2023-07-03 19:23:16

質問

Chart.jsについて質問です。

私は提供されたドキュメントを使用して複数の円グラフを描きました。私は、チャートの1つの特定のスライスをクリックすると、そのスライスの値に応じてajaxコールを行うことができるのでしょうか？

例えば、これが私の data 

var data = [
    {
        value: 300,
        color:"#F7464A",
        highlight: "#FF5A5E",
        label: "Red"
    },
    {
        value: 50,
        color: "#46BFBD",
        highlight: "#5AD3D1",
        label: "Green"
    },
    {
        value: 100,
        color: "#FDB45C",
        highlight: "#FFC870",
        label: "Yellow"
    }
],

をクリックすることは可能でしょうか？ Red というラベルのついたスライスをクリックして、次のような形式のurlを呼び出すことは可能でしょうか？ example.com?label=red&value=300 ? もしそうなら、どうすればいいのでしょうか？

どのように解決するのですか？

更新しました。 Soham Shettyのコメント通りです。 getSegmentsAtEvent(event) は 1.x でのみ動作し、2.x では getElementsAtEvent を使用する必要があります。

.getElementsAtEvent(e)

イベントポイントの下にある要素を探し、次に同じデータインデックスのすべての要素 を返します。これは内部的に'label'モードのハイライトに使用されます。 ハイライトのために内部的に使用されます。

呼び出し getElementsAtEvent(event) をChartインスタンスに渡して呼び出すと を呼び出すと、そのイベントの同じ位置にあるポイント要素 を返します。 

canvas.onclick = function(evt){
    var activePoints = myLineChart.getElementsAtEvent(evt);
    // => activePoints is an array of points on the canvas that are at the same position as the click event.
};

例 https://jsfiddle.net/u1szh96g/208/

オリジナルの回答です（Chart.js 1.xバージョンで有効）。

を使って実現できます。 getSegmentsAtEvent(event)

呼び出し getSegmentsAtEvent(event) を Chart インスタンスに渡すと を呼び出すと、そのイベントの同じ位置にあるセグメントを返します。 要素を返します。

からです。 プロトタイプメソッド

というわけで、できます。 

$("#myChart").click( 
    function(evt){
        var activePoints = myNewChart.getSegmentsAtEvent(evt);           
        /* do something */
    }
);

以下は完全な動作例です。 

<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.2.js"></script>
        <script type="text/javascript" src="Chart.js"></script>
        <script type="text/javascript">
            var data = [
                {
                    value: 300,
                    color:"#F7464A",
                    highlight: "#FF5A5E",
                    label: "Red"
                },
                {
                    value: 50,
                    color: "#46BFBD",
                    highlight: "#5AD3D1",
                    label: "Green"
                },
                {
                    value: 100,
                    color: "#FDB45C",
                    highlight: "#FFC870",
                    label: "Yellow"
                }
            ];

            $(document).ready( 
                function () {
                    var ctx = document.getElementById("myChart").getContext("2d");
                    var myNewChart = new Chart(ctx).Pie(data);

                    $("#myChart").click( 
                        function(evt){
                            var activePoints = myNewChart.getSegmentsAtEvent(evt);
                            var url = "http://example.com/?label=" + activePoints[0].label + "&value=" + activePoints[0].value;
                            alert(url);
                        }
                    );                  
                }
            );
        </script>
    </head>
    <body>
        <canvas id="myChart" width="400" height="400"></canvas>
    </body>
</html>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します