JQuery Flotでクリック可能な線を作る方法は？

Question

私はflotを使って折れ線グラフを作成しています。私が実装しようとしている機能の1つは、行の高さ（行のポイントとそれに対応する凡例を含む）です。ユーザーが行をクリックすると、ユーザーがグラフ上の他の場所をクリックすると強調表示がキャンセルされます。

試した 'plotclick'イベントですが、ポイントをクリックする必要があります。私はラインをクリックしてシリーズを取得する能力が必要です。

うまくいけば、それを行う方法があります。あなたは手動でライン上の最も近い点を検索して、このようなもので距離を計算する必要が

Answer 1

：

$('#placeholder').on('plotclick', function(event, pos, item) { 
    $('#output').empty(); 
    if (item) { // clicked on point 
     $('#output').text('series: ' + item.series.label + ' - datapoint: ' + item.dataIndex); 
     return; 
    } 
    else { // search for line 
     for (var i = 1; i < data.length; i++) { 
      if (data[i-1][0] <= pos.x && pos.x < data[i][0]) { 
       var lineX = (pos.x - data[i-1][0])/(data[i][0] - data[i-1][0]); 
       var lineY = data[i-1][1] + lineX * (data[i][1] - data[i-1][1]); 
       if (Math.abs(pos.y - lineY) < maxDistance) { 
        $('#output').html('between datapoints ' + (i-1) + ' and ' + i + '<br />' 
         + 'distance from line: ' + Math.abs(pos.y - lineY).toFixed(3)); 
       } 
       return; 
      } 
     } 
    } 
}); 

は完全な例については、このfiddleを参照してください。複数のデータ系列がある場合は、各行の最も近い点を検索し、最も近い線を計算することができます。