ChartJS v2如何为x轴数值点配置鼠标悬浮显示的字符串标签

前置准备 #

• 构造与arrayX长度、索引完全匹配的自定义字符串标签数组，示例命名为customXLabels，每个位置存储对应x轴数值点要展示的文本标注，例如customXLabels[0]对应arrayX[0]的标注。

完整配置代码 #

// 自定义字符串标签数组，与arrayX索引一一对应
const customXLabels = ["场景A", "场景B", "场景C", /* 按数组长度补全所有标注 */];

const data = {
  labels: arrayX,
  datasets: [{
    label: 'ArrayY',
    data: arrayY,
    fill: false,
    borderColor: 'rgb(75, 192, 192)',
    tension: 0.1
  }]
};

const options = {
  // 配置悬浮提示框回调
  tooltips: {
    callbacks: {
      label: function(tooltipItem, data) {
        const pointIndex = tooltipItem.index;
        // 自定义tooltip显示内容，可按需调整拼接格式
        return `${customXLabels[pointIndex]} | X值：${tooltipItem.xLabel} | Y值：${tooltipItem.yLabel}`;
      }
    }
  }
};

// 初始化图表时传入配置即可
new Chart(document.getElementById("你的图表容器ID"), {
  type: 'line',
  data: data,
  options: options
});

效果演示 #

你可以根据需求调整回调返回值的拼接格式，比如不需要展示原始X数值时，直接删除对应拼接字段即可。

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