有没有办法为 Chart.js 图表上不可见的点显示工具提示？

Question

我有一个折线图，它的 Y 轴有最小值。有时数据低于这个最小值，我不想因为这一点而拉伸图表，但是当我将光标移动到 X 轴上的值时，我希望有工具提示来显示数据。

我已经创建了一个关于这个问题的代码笔：codepen

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: "line",
  data: {
    labels: ["R", "B", "Y", "G", "P", "O"],
    datasets: [
      {
         label: "# of Votes",
         data: [12, 13, 11, 12, 9, 13]
      }
    ]
  },
  options: {
    scales: {
      y: {
        min: 10
      },
    },
    interaction: {
      intersect: false,
      mode: 'nearest',
      axis: 'x',
    },
  }
});

Answer 1

您可以按照here 的说明定义interaction.mode: 'x'。

请在下面查看您修改后的代码，看看它是如何工作的。

new Chart('myChart', {
  type: "line",
  data: {
    labels: ["R", "B", "Y", "G", "P", "O"],
    datasets: [{
      label: "# of Votes",
      data: [12, 13, 11, 12, 9, 13]
    }]
  },
  options: {
    scales: {
      y: {
        min: 10
      }      
    },
    interaction: {
      intersect: false,
      mode: 'x'
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<canvas id="myChart" height="80"></canvas>