如何为折线图显示吸附至线条的工具提示而非仅数据点？

当然可以实现这种跟随线条坐标的工具提示，下面是主流图表库的具体实现方案：

Chart.js #

在Chart.js中，你可以通过调整交互模式+自定义回调来实现：

1. 开启interaction.mode为'nearest'并设置intersect: false，让鼠标无需精确命中数据点就能触发提示
2. 自定义tooltip的标签回调，自动计算当前鼠标位置对应的折线插值数据

示例代码：

const chart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['1月', '2月', '3月', '4月'],
    datasets: [{
      label: '销售额',
      data: [120, 190, 300, 210],
      borderColor: 'rgb(75, 192, 192)',
      tension: 0.1
    }]
  },
  options: {
    interaction: {
      mode: 'nearest',
      intersect: false
    },
    plugins: {
      tooltip: {
        callbacks: {
          label: function(context) {
            const yValue = context.parsed.y;
            return `销售额: ${yValue.toFixed(2)}`;
          }
        }
      }
    }
  }
});

ECharts #

ECharts里只需配置tooltip触发方式和轴线指针，就能自动实现线条任意位置的提示：

示例代码：

const myChart = echarts.init(document.getElementById('main'));
const option = {
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月']
  },
  yAxis: {
    type: 'value'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'line' // 显示跟随鼠标的横向轴线
    }
  },
  series: [{
    data: [120, 190, 300, 210],
    type: 'line'
  }]
};
myChart.setOption(option);

通用实现思路 #

不管用哪个图表库，核心逻辑都是这三步：

• 关闭tooltip仅触发于数据点的限制，允许鼠标在图表区域内任意位置触发
• 鼠标移动时，计算当前坐标在折线上的插值数据
• 将计算出的插值数据渲染到tooltip中

内容的提问来源于stack exchange，提问作者zeekrey