Chart.js - 当光标移出主画布时禁用工具提示答案

【问题标题】：Chart.js - disable tooltip when cursor moves outside the main canvasChart.js - 当光标移出主画布时禁用工具提示
【发布时间】：2021-07-01 13:52:57
【问题描述】：

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

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/

【问题讨论】：

标签： javascript chart.js chart.js2 chartjs-2.6.0

【解决方案1】：

您可以在选项中使用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, 2, 3, 4],
        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, {

  type: 'line',

  data: {
    labels: [1, 2, 3, 4],
    datasets: [{
        data: [1, 2, 3, 4],
        backgroundColor: "rgba(153,255,51,0.6)"
      },

    ]
  },
  options: {
    onHover: (e, activeElements, chart) => {
      const {
        bottom,
        top,
        right,
        left
      } = chart.chartArea;
      if (e.x >= left && e.x <= right && e.y <= bottom && e.y >= top) {
        updateTooltipShow(chart, true)
      } else {
        updateTooltipShow(chart, false)
      }
    },
    plugins: {
      tooltip: {
        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/3.4.0/chart.js"></script>

【讨论】：