Flask中修改ChartJS图表数据点悬停标签的技术问题

先排查几个关键问题，逐一修复：

1. 修正数据集循环的一致性问题 #

你的代码里，labels和allTimes遍历的是results_lc，但data部分遍历的是results_sc，这会导致数据索引不匹配，悬停时取到错误的swimtime。把data循环改成results_lc：

data: [
{% for result in results_lc %}
  {{ result.fina_points }},
{% endfor %}],

2. 适配ChartJS v3+的tooltip配置（核心问题） #

如果你的ChartJS是v3及以上版本，配置项里的tooltips要改成单数的tooltip，这是版本迭代后的配置变更：

options: {
  plugins: {
    legend: {
      display: false
    },
    tooltip: { // 改为单数tooltip
      callbacks: {
        label: function(context) {
          return `swimtime: ${allTimes[context.dataIndex]}`;
        }
      }
    }
  }
}

3. 修复allTimes数组的语法错误 #

循环生成allTimes时，最后一个元素会多一个逗号，可能触发JS语法错误。用Flask的join过滤器优化：

const allTimes = [
  {{ results_lc | map(attribute='swimtime') | map('tojson') | join(', ') }}
];

这样自动处理逗号，避免语法问题。

完整修正后的代码 #

<script>
  const allTimes = [
    {{ results_lc | map(attribute='swimtime') | map('tojson') | join(', ') }}
  ];

  var ctx = document.getElementById("myAreaChart");
  var myLineChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: [
        {{ results_lc | map(attribute='date') | map('tojson') | join(', ') }}
      ],
      datasets: [{
        label: "FINA points",
        lineTension: 0.3,
        backgroundColor: "rgba(192,0,0,0.2)",
        borderColor: "rgba(192,0,0,1)",
        pointRadius: 5,
        fill: true,
        pointBackgroundColor: "rgba(192,0,0,1)",
        pointBorderColor: "rgba(255,255,255,0.8)",
        pointHoverRadius: 5,
        pointHoverBackgroundColor: "rgba(192,0,0,1)",
        pointHitRadius: 50,
        pointBorderWidth: 2,
        data: [
          {{ results_lc | map(attribute='fina_points') | join(', ') }}
        ],
      }],
    },
    options: {
      plugins: {
        legend: {
          display: false
        },
        tooltip: {
          callbacks: {
            label: function(context) {
              return `swimtime: ${allTimes[context.dataIndex]}`;
            }
          }
        }
      }
    }
  });
</script>

额外验证点 #

• 确认results_lc里的swimtime、date、fina_points属性都正确存在且不为空
• 检查浏览器控制台是否有JS语法错误，比如数组逗号、未定义变量等

内容的提问来源于stack exchange，提问作者Igor Rębas