chart.js 2.0當前鼠標座標工具提示

Question

我正在用chart.js實現一些點圖。沒有問題，但我想要做的是有一個工具提示，不僅附加到給定的數據點。現在你可以創建一個工具提示，它會在圖表上給定的數據點附近顯示一個彈出窗口。例如，如果我有數據點[1,5]，[2,6]和[3,7]，它會高興地顯示這三個數據點。

但我想要的是當我在1,5和2,6之間看到我在x軸上的確切位置。 1.5，1.6，等

工具提示爲chart.js之選項叫我可以做這樣的事情裏面：

tooltips: { mode: 'index', intersect: false, callbacks: { footer: function(tooltipItems, data) { return 'x:' + this._eventPosition.x + ' y:' + this._eventPosition.y; }, }, footerFontStyle: 'normal' }

但是，這是在畫布上的x和y的位置，並有與實際的x和y座標無關。我似乎無法在chart.js中找到任何可用數據，這些數據可以獲得鼠標當前位置的實際圖表x，y座標。

另請注意我不需要它在tooltip頁腳中，我只是用它作爲測試輸出的便捷方式。我想要的是在固定位置始終可見的工具提示，以顯示鼠標懸停在當前的實際圖表x位置，而不考慮最近的數據點。

Answer 1

我終於收集了信息，並做了數學。這裏只是一個片段，告訴你如果其他人有這個問題。

$(document).ready(function() { 
 
    var ctx = $("#graph_1"); 
 
    var dataArray = [ {x:1,y:1},{x:2,y:3},{x:3,y:5},{x:4,y:8},{x:5,y:7},{x:6,y:4},{x:7,y:2},{x:8,y:1} ]; 
 
    
 
    var myChart = new Chart(ctx, { 
 
    type: 'scatter', 
 
    data: { 
 
     datasets: [{ 
 
     label: "test", 
 
     fill: false, 
 
     data: dataArray 
 
     }] 
 
    }, 
 
    options: { 
 
     title: { 
 
     display: true, 
 
     text: 'Test Graph' 
 
     }, 
 
     animation: { 
 
     duration: 0, 
 
     }, // general animation time 
 
     hover: { 
 
     animationDuration: 0, 
 
     }, // duration of animations when hovering an item 
 
     responsiveAnimationDuration: 0, // animation duration after a resize 
 
     scales: { 
 
     xAxes: [{ 
 
      display: true, 
 
      scaleLabel: { 
 
      display: true, 
 
      labelString: 'x axis label' 
 
      } 
 
     }], 
 
     yAxes: [{ 
 
      display: true, 
 
      scaleLabel: { 
 
      display: true, 
 
      labelString: 'y axis label' 
 
      } 
 
     }] 
 
     }, 
 
     tooltips: { 
 
     mode: 'index', 
 
     intersect: false, 
 
     callbacks: { 
 
      // Use the footer callback to display the sum of the items showing in the tooltip 
 
      footer: function(tooltipItems, data) { 
 
      //return 'x:' + this._eventPosition.x + ' y:' + this._eventPosition.y; 
 
      }, 
 
     }, 
 
     footerFontStyle: 'normal' 
 
     }, 
 
    } 
 

 
    }); 
 

 
    ctx.mousemove(function(evt) { 
 
    //console.log(evt.offsetX + "," + evt.offsetY); 
 
    var ytop = myChart.chartArea.top; 
 
    var ybottom = myChart.chartArea.bottom; 
 
    var ymin = myChart.scales['y-axis-1'].min; 
 
    var ymax = myChart.scales['y-axis-1'].max; 
 
    var newy = ''; 
 
    var showstuff = 0; 
 
    if (evt.offsetY <= ybottom && evt.offsetY >= ytop) { 
 
     newy = Math.abs((evt.offsetY - ytop)/(ybottom - ytop)); 
 
     newy = (newy - 1) * -1; 
 
     newy = newy * (Math.abs(ymax - ymin)) + ymin; 
 
     showstuff = 1; 
 
    } 
 
    var xtop = myChart.chartArea.left; 
 
    var xbottom = myChart.chartArea.right; 
 
    var xmin = myChart.scales['x-axis-1'].min; 
 
    var xmax = myChart.scales['x-axis-1'].max; 
 
    var newx = ''; 
 
    if (evt.offsetX <= xbottom && evt.offsetX >= xtop && showstuff == 1) { 
 
     newx = Math.abs((evt.offsetX - xtop)/(xbottom - xtop)); 
 
     newx = newx * (Math.abs(xmax - xmin)) + xmin; 
 
    } 
 
    if (newy != '' && newx != '') { 
 
     //console.log(newx + ',' + newy); 
 
     $("#graph_coords").html('Mouse Coordinates: ' + newx.toFixed(2) + ',' + newy.toFixed(2)); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<SCRIPT src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></SCRIPT> 
 

 
<DIV id="graph_coords"></DIV> 
 
<DIV class="chart-container" style="position: relative; height:40vh; width:80vw;"> 
 
    <CANVAS id="graph_1" style="background-color: #CBCBCB;"></CANVAS> 
 
</DIV>