Chart.js折线图：如何仅显示高低数据点并配置自定义Tooltip

Hey there! 我来帮你搞定这个Chart.js的折线图需求，其实核心就是通过数据点样式控制和自定义Tooltip回调来实现，一步步来：

首先你得先从数据数组里找出最大值、最小值对应的所有索引（毕竟可能存在多个相同的最高/最低值），这样后面才能精准控制这些点的显示：

const data = [12, 19, 3, 5, 2, 3, 20]; // 替换成你的实际数据
const maxValue = Math.max(...data);
const minValue = Math.min(...data);
// 收集所有最高值和最低值的索引
const highlightIndices = [
  ...data.map((val, idx) => val === maxValue ? idx : null).filter(idx => idx !== null),
  ...data.map((val, idx) => val === minValue ? idx : null).filter(idx => idx !== null)
];

在Chart的dataset配置里，我们用pointRadius函数来控制每个点的显示：默认情况下，只有高低值的点显示半径，其他点设为0（隐藏）；鼠标悬停时，所有点都显示半径，这样普通点就能在hover时出现了：

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], // 替换成你的标签
    datasets: [{
      label: '业务数据',
      data: data,
      borderColor: 'rgb(75, 192, 192)',
      tension: 0.1,
      // 控制默认点的显示：高低值点显示半径6，其余隐藏
      pointRadius: (context) => highlightIndices.includes(context.dataIndex) ? 6 : 0,
      // 控制hover时的点显示：所有点都显示半径4
      pointHoverRadius: 4,
      pointHoverBackgroundColor: 'rgb(255, 99, 132)'
    }]
  },

接下来在plugins.tooltip里配置回调函数，识别当前hover的是不是高低值点，然后显示自定义的提示内容：

options: {
    plugins: {
      tooltip: {
        callbacks: {
          // 自定义tooltip的数值标签
          label: (context) => {
            const value = context.parsed.y;
            if (value === maxValue) {
              return `🔥 最高值: ${value}`;
            } else if (value === minValue) {
              return `❄️ 最低值: ${value}`;
            } else {
              return `数值: ${value}`;
            }
          },
          // 也可以自定义标题，给高低点加特殊标识
          title: (context) => {
            const value = context[0].parsed.y;
            if (value === maxValue) {
              return `${context[0].label} (峰值月份)`;
            } else if (value === minValue) {
              return `${context[0].label} (谷值月份)`;
            } else {
              return context[0].label;
            }
          }
        }
      }
    }
  }
});

• 如果你的数据是动态加载的，记得把找高低值索引的逻辑放在数据更新之后再执行，避免索引错误
• 如果有多个数据集，只需要把highlightIndices的逻辑对应到每个数据集，或者在pointRadius的context里判断当前对应的dataset即可

这样配置完之后，折线图默认只会显示最高和最低值的点，鼠标悬停到其他位置时，对应的点会自动出现，并且Tooltip会根据点的类型显示不同的个性化内容～

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