web-dev-qa-db-ja.com

Chart.jsを使用して折れ線グラフにクリックイベントを追加する方法

Chart.js を使用して折れ線グラフにon clickイベントを追加しようとしています。折れ線グラフの情報を表示するためのツールヒントは既に有効になっていますが、ユーザーがx軸のどこをクリックしたかを知らせるon clickメソッドも追加したいと思います。今のところ、ユーザーがクリックしたx軸に値を表示して、ポップアップを表示したいだけです。

研究：

Chart.jsのドキュメント を調べたところ、このメソッドに遭遇しました：.getPointsAtEvent（event）

ChartインスタンスでgetPointsAtEvent（event）を呼び出して、イベントまたはjQueryイベントの引数を渡すと、そのイベントの同じ位置にあるポイント要素が返されます。

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

コードの中で関数を使用する方法や配置する場所がわからないだけです。これをコードのどこに追加できるかを誰かが助けてくれたら、大歓迎です！

私のコード：（javascript）

  //NOTE: the div 'roomForChart' has been already declared as <div id="roomForChart"></div>


 //creating html code inside of javascript to display the canvas used for the graph
 htmlForGraph = "<canvas id='myChart' width ='500' height='400'>";
 document.getElementById('roomForChart').innerHTML += htmlForGraph;

 //NOW TO CREATE DATA

   //the data for my line chart
    var data = {
         labels: ["Aug 1", "Aug 2", "Aug 3","Aug 4","Aug 5"], //the x axis
          datasets: [
            {   //my red line
                label: "Usage Plan",
                fillColor: "rgba(255,255,255,0.2)", //adds the color below the line
                strokeColor: "rgba(224,0,0,1)",//creates the line
                pointColor: "rgba(244,0,0,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: [1024, 1024, 1024, 1024, 1024]
           },

       {    //my green line
            label: "Overall Usage",
            fillColor: "rgba(48,197,83,0.2)",
            strokeColor: "rgba(48,197,83,1)",
            pointColor: "rgba(48,197,83,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(48,197,83,1)",
            data: [15, 25, 45, 45, 1500]
       },
        {  //my blue line
            label: "Daily Usage",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [15, 10, 20, 0, 5]
       }

     ] //ending the datasets
     }; //ending data


    //creating a variable for my chart
    var ctx = document.getElementById("myChart").getContext("2d");




//code to create a maximum y value on the chart
var maxUsage = 1024;
var maxSteps = 5;
var myLineChart = new Chart(ctx).Line(data, {
    pointDot: false,
    scaleOverride: true,
    scaleSteps: maxSteps,
    scaleStepWidth: Math.ceil(maxUsage / maxSteps),
    scaleStartValue: 0

});

 //what I have tried but it doesn't show an alert message
ctx.onclick = function(evt){
    var activePoints = myLineChart.getPointsAtEvent(evt);
    // => activePoints is an array of points on the canvas that are at the same position as the click event.
   alert("See me?");
};

ここでチャートを視覚化するのに苦労している人にあなたは行き​​ます：

enter image description here

うまくいけば、助けを得るのに十分な情報を提供してくれました。自分で説明する必要がある場合はお知らせください。前もって感謝します！！！ :)

javascriptchartsonclicklinechartchart.js
13
MadsterMaddness

この行を変更

_document.getElementById('roomForChart').innerHTML += htmlForGraph;
_

これに

_holder = document.getElementById('roomForChart');
holder.innerHTML += htmlForGraph;
_

さらに、少し修正したスニペットがあります

_holder.onclick = function(evt){
    var activePoints = myLineChart.getPointsAtEvent(evt);
    // => activePoints is an array of points on the canvas that are at the same position as the click event.
   alert("See me?");
};
_

Onclickハンドラ内にconsole.log(activePoints);を追加して、activePoints変数の内容を表示します。ご覧のとおり、3つのオブジェクトがあります。たとえば、これらは_activePoints[0]_の値です

_datasetLabel: "Usage Plan"
fillColor: "rgba(244,0,0,1)"
highlightFill: "#fff"
highlightStroke: "rgba(220,220,220,1)"
label: "Aug 4"
strokeColor: "#fff"
value: 1024
x: 371
y: 12.356097560975627
_

また、次のようにアクセスされる場合があります

_activePoints[0].label
activePoints[0].x
activePoints[0].y
activePoints[0].value
_

すべてのクリックイベントの背後にはデータがないため、プロパティが最初にundefinedであるかどうかを確認することをお勧めします。

7
hex494D49

新しいChartJsバージョンを使用している場合、これを使用します。

canvas.onclick = function(evt){
   var activePoints = myLineChart.getElementsAtEvent(evt);
};
6
Oswaldo Rodriguez Gonzalez

onclickメソッドを機能させることができませんでした。

しかし、最終的にclickメソッドを使用して実行できました。

$("#canvas_id").click(function(e) {
   var activeBars = myBarChart.getBarsAtEvent(e); 
   console.log(activeBars[0]);
});

注：この例は、棒グラフの場合-他のグラフでは、ポイントを取得する方法がわずかに異なります（ドキュメントを参照）。

6
magicrebirth

これまでに提供された回答は正しい解決策に近いものですが、不完全です。 getElementsAtEvent（）を使用して正しい要素を取得する必要がありますが、これにより、クリックされたx-indexにある要素のコレクションが得られます。複数のデータセットを使用している場合でも、これは複数の値であり、各データセットからの値です。

プル元の正しいデータセットを把握するには、getDatasetAtEvent（）メソッドを呼び出します。これは、クリックされたデータセット要素を含む要素のリストを返します。それらのいずれかからデータセットIDを選択します。それらはすべて同じIDです。

2つをまとめると、クリックされた要素に含まれるデータを把握するために必要な呼び出しがあります。データセットを初期化するときに、xとyの値以上のものを渡すと、このイベントであらゆる種類のきちんとしたトリックを行うことができます。 （たとえば、イベントに関するより詳細な情報でポップアップをトリガーします）

このデータを取得するためのもっと簡潔な方法があるかもしれませんが、私はそれがチャートのドキュメントやチケットをいじっていることを発見しませんでした。おそらく彼らは将来のリリースでそれを追加するでしょう。

// chart_name is whatever your chart object is named. here I am using a
// jquery selector to attach the click event.
$('#' + chart_name).click(function (e)
{
    var activePoints = myChart.getElementsAtEvent(event);
    var activeDataSet = myChart.getDatasetAtEvent(event);

    if (activePoints.length > 0)
    {
         var clickedDatasetIndex = activeDataSet[0]._datasetIndex;
         var clickedElementIndex = activePoints[0]._index;
         var value = myChart.data.datasets[clickedDatasetIndex].data[clickedElementIndex];
    }
    // todo: add code to do something with value.
});
2
Roger Hill