Chart.js複数のデータセット

私はチャート上の点をクリックすると、アラートが私のデータセットに設定されたid値を示すことが必要Chart.js、Chart.js複数のデータセット

に問題があることをしました。

getElementsAtEvent（evt）を試しました。しかし、これは私のようには機能しません。

誰かが私を助けることができますか？おかげ

<!DOCTYPE html> 
<html> 
<head> 
    <title>Title of the document</title> 
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
    <script src="moment.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"> </script> 
</head> 
<body> 
    <canvas id="myChart" width="400" height="100"></canvas> 
    <script> 

var ctx = document.getElementById("myChart"); 
    var color=["#ff6384","#5959e6","#2babab","#8c4d15","#8bc34a","#607d8b","#009688"]; 


    var scatterChart = new Chart(ctx, { 
     type: 'line', 
     data: 
      { 
      datasets: [{ 
       label: 'Linea A', 
       backgroundColor: "transparent", 
       borderColor: color[1], 
       pointBackgroundColor: color[1], 
       pointBorderColor: color[1], 
       pointHoverBackgroundColor:color[1], 
       pointHoverBorderColor: color[1], 
       data: [{ 

        x: "2014-09-02", 
        y: 90, 
        id: '1A' 

       }, { 
        x: "2014-11-02", 
        y: 96, 
        id:'2A' 

       }, { 
        x: "2014-12-03", 
        y: 97, 
        id:'3A' 

       }] 


      }, 


      { 
       label: 'Linea B', 
       backgroundColor: "transparent", 
       borderColor: color[2], 
       pointBackgroundColor: color[2], 
       pointBorderColor: color[2], 
       pointHoverBackgroundColor:color[2], 
       pointHoverBorderColor: color[2], 
       data: [{ 
        x: "2014-09-01", 
        y: 96, 
        id:"1B" 
       }, { 
        x: "2014-10-04", 
        y: 95.8, 
        id:"2B" 
       }, { 
        x: "2014-11-06", 
        y: 99, 
        id:"3B" 
       }] 
      }] 

     }, 



     options: { 
      title: { 
       display: true, 
       text: 'Polveri', 
       fontSize: 18 
      }, 
      legend: { 
       display: true, 
       position: "bottom" 
      }, 
      scales: { 
       xAxes: [{ 
        type: 'time', 
        time: { 
         displayFormats: { 
          'millisecond': 'MM/YY', 
          'second': 'MM/YY', 
          'minute': 'MM/YY', 
          'hour': 'MM/YY', 
          'day': 'MM/YY', 
          'week': 'MM/YY', 
          'month': 'MM/YY', 
          'quarter': 'MM/YY', 
          'year': 'MM/YY', 
          }, 
          tooltipFormat: "DD/MM/YY" 
        } 



       } ] 

      } 
     } 


    }); 



    document.getElementById("myChart").onclick = function(evt){ 
       var activePoints = scatterChart.getElementsAtEvent(evt); 

       var firstPoint = activePoints[1]; 
          console.log(firstPoint._datasetIndex); 
          console.log(firstPoint._index); 

       var label = scatterChart.data.labels[firstPoint._index]; 
          console.log(scatterChart.data.datasets[0].data[0].id); 
       var value = scatterChart.data.datasets[firstPoint._datasetIndex].data[firstPoint._index]; 
       if (firstPoint !== undefined) 
        alert(label + ": " + value); 
      }; 



    </script>

出典

2017-03-29 PietroR91

上記のコードに 'Moment.js'を追加するのを忘れましたか？それは私のために働いていません。 –

あなたがからあなたのlabel変数の割り当てを変更する必要があり、

var label = scatterChart.data.labels[firstPoint._index];

に、

var label = scatterChart.data.datasets[firstPoint._index].label;

そして、あなたはまた、あなたのalertなステートメントを変更する必要があります、

alert(label + ": " + value.x);

ここで働いDEMOです：https://jsfiddle.net/dt6c9jev/

・ホープ、このことができますが！

出典

2017-03-29 06:28:30

ご返信ありがとうございますが、期待どおりに機能していません。 2番目の紫色のポイント（Linea A）をクリックすると、「Linea A 04-11/14」と表示されます。「Linea A 02-11-14」は表示されません。/ – PietroR91

'アクティブポイントを動的に生成する。現在、ハードコーディングされた値を 'var firstPoint = activePoints [1];としてフェッチしているようです。 –

.getElementsAtEvent()の代わりに.getElementAtEvent()プロトタイプメソッドを使用する必要があります。最初の違いは最初のクリックだけを返し、もう一方はそのクリックのX軸のすべての点を返します。

ここは例です。

document.getElementById("canvas").onclick = function(evt) { 
    var activePoint = myLine.getElementAtEvent(event); 

    // make sure click was on an actual point 
    if (activePoint.length > 0) { 
    var clickedDatasetIndex = activePoint[0]._datasetIndex; 
    var clickedElementindex = activePoint[0]._index; 
    var label = myLine.data.labels[clickedElementindex]; 
    var value = myLine.data.datasets[clickedDatasetIndex].data[clickedElementindex];  
    alert("Clicked: " + label + " - " + value); 
    } 
};

これはcodepenでデモを見ることができます。

出典

2017-03-29 14:29:51 jordanwillis

Chart.js複数のデータセット

答えて

関連する問題