Chart.js - 当光标移动到主画布外时禁用工具提示

如何解决Chart.js - 当光标移动到主画布外时禁用工具提示

我有一个折线图，我像这样设置了工具提示

options: {
        tooltips:{
            mode: 'x',intersect: false,callbacks: {
            footer: function(tooltipItem,data) {
              return 'some text'
            }
          }
        },}

它工作正常。我遇到的问题是，当我将光标移动到主绘图/画布之外的 x 轴刻度时，工具提示仍然出现。我尝试设置 intersect: true 但只有当我直接将鼠标悬停在点上时才会显示工具提示。理想情况下，我希望工具提示在我将鼠标悬停在垂直网格线上时出现（在 intersect:false 时发生），但在我的光标移动到主画布之外时不出现。可能吗？

小提琴：https://jsfiddle.net/dqdqdq/yp47oL9t/47/

解决方法

您可以使用选项中的 onHover 回调来检查鼠标是否在 chartArea 中，如果是，请将工具提示设置为启用，否则禁用工具提示。

您可能还想检查您设置的值是否已经是正确的值，因为它会节省大量不必要的更新

示例（V2）：

const updateTooltipShow = (chart,enabled) => {
  chart.options.tooltips.enabled = enabled;
  chart.update();
}

const ctx = document.getElementById('myChart').getContext('2d');

const myChart = new Chart(ctx,{

  type: 'line',data: {
    labels: [1,2,3,4],datasets: [{
        data: [1,backgroundColor: "rgba(153,255,51,0.6)"
      },]
  },options: {
    onHover: function(e,activeElements) {
      const {
        bottom,top,right,left
      } = this.chartArea;
      if (e.x >= left && e.x <= right && e.y <= bottom && e.y >= top) {
        updateTooltipShow(this,true)
      } else {
        updateTooltipShow(this,false)
      }
    },tooltips: {
      mode: 'x',intersect: false,callbacks: {
        footer: function(tooltipItem,data) {
          return 'some text'
        }
      }
    },}

});

<canvas id="myChart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.2.0/dist/chartjs-plugin-datalabels.min.js"></script>

示例（V3）：

const updateTooltipShow = (chart,enabled) => {
  chart.options.plugins.tooltip.enabled = enabled;
  chart.update();
}

const ctx = document.getElementById('myChart').getContext('2d');

const myChart = new Chart(ctx,options: {
    onHover: (e,activeElements,chart) => {
      const {
        bottom,left
      } = chart.chartArea;
      if (e.x >= left && e.x <= right && e.y <= bottom && e.y >= top) {
        updateTooltipShow(chart,true)
      } else {
        updateTooltipShow(chart,plugins: {
      tooltip: {
        mode: 'x',callbacks: {
          footer: function(tooltipItem,data) {
            return 'some text'
          }
        }
      },}
  }
});

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