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坐标。

另请注意，我在工具提示页脚中不需要它，我只是将其用作测试输出的便捷方式。我想要的是在固定位置始终可见的工具提示，以显示鼠标悬停在当前的实际图表x位置，而不管最近的数据点。

Answer 1

我终于收集了信息并做了数学计算。这里只是一个片段，向您展示如果有其他人遇到此问题。

＆＃13;

$(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));
    }
  });
});

＆＃13;

<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>

＆＃13;

Answer 2

使用秤的内置功能可以稍微简化半蹄的答案。

ctx.mousemove(function(evt) {
    let x = chart.scales['x-axis-1'].getValueForPixel(evt.offsetX);
    let y = chart.scales['y-axis-1'].getValueForPixel(evt.offsetY);
    console.log(x, y);
});

API的New Scales页上有Scales接口的说明。

chart.js 2.0当前鼠标坐标工具提示

2 个答案: