Charts.js散点图如何在Django项目中让悬浮提示显示标签名与坐标

你当前使用的是Chart.js v2.x版本，要实现提示框显示「数据集标签名(x值,y值)」的效果，只需在options配置块中调整tooltip的自定义回调逻辑即可，现有数据集、坐标轴、交互样式的配置完全不需要改动。

具体修改步骤 #

将你代码中现有写的tooltip: { isHtml: false }整段替换为以下配置：

tooltip: {
  callbacks: {
    label: function(tooltipItem, chartData) {
      // 读取当前悬浮点所属数据集的标签，也就是你代码中定义的name_1、name_2这类国家名称
      const currentDatasetName = chartData.datasets[tooltipItem.datasetIndex].label || '';
      // 按需求格式拼接x、y轴的数值
      return `${currentDatasetName}(${tooltipItem.xLabel}, ${tooltipItem.yLabel})`;
    }
  }
}

该配置完全兼容你当前使用的Chart.js v2.x版本，不会和已设置的点半径、坐标轴刻度等配置产生冲突，修改后页面刷新即可生效。

实用调整技巧 #

• 如果需要控制数值的小数精度，避免浮点数计算带来的显示错位，可以在拼接时对数值做格式化，比如x轴保留2位小数、y轴取整：

  const xVal = Number(tooltipItem.xLabel).toFixed(2);
  const yVal = Number(tooltipItem.yLabel).toFixed(0);
  return `${currentDatasetName}(${xVal}, ${yVal})`;
  

• 不需要额外给每个数据点手动绑定标签字段，你现有给每个datasets设置label的写法，会被回调逻辑直接读取识别，无需改动现有数据结构。

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