Chart.js

Question

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

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

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

Fiddle: https://jsfiddle.net/dqdqdq/yp47oL9t/47/

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

Answer 2

我编写了一个简单的插件，用于在您将光标移出主菜单时隐藏标题 canvas:

plugins: [{
    id: "toolbarHider",
    afterEvent: (chart: any, evt: any, opts: any) => {
        const { left, right, bottom, top } = chart.chartArea;
        const e = evt.event;
        const status = e.x >= left && e.x <= right && e.y <= bottom && e.y >= top;
        if (status !== chart.options.plugins.tooltip.enabled) {
            chart.options.plugins.tooltip.enabled = status;
            chart.update();
        }
    }
}]

更多关于 Chart.js plugins。

Chart.js - 当光标移出主界面时禁用工具提示 canvas

Chart.js - disable tooltip when cursor moves outside the main canvas

javascript

chart.js2

chartjs-2.6.0