Chart.js双折线图配置问题：为第二组峰值数据设置对应标签

云上老周

2026-10-20

问题修复方案

你当前的代码存在三个核心问题：

峰值数据集的data格式错误，不应该把整个values2、labels2数组塞到单个x/y字段中，需要把每个峰值处理为独立的坐标对象
峰值的x、y坐标写反了，x轴应为峰值对应的位置（labels2的值），y轴应为峰值数值（values2的值）
需要显式指定x轴为线性轴，才能同时匹配第一组的顺序索引和第二组的独立坐标

修改后完整代码

<script>
// 先把后端传入的峰值数据处理为坐标数组
const peakPositions = {{ labels2 | safe }};
const peakValues = {{ values2 | safe }};
const peakDataset = peakPositions.map((pos, idx) => ({
  x: pos,
  y: peakValues[idx]
}));

var line_chart = {
  type: 'line',
  data: {
    labels: {{ labels1 | safe }}, // 对应原1~values1长度的索引数组
    datasets: [
      {
        label: 'Sweep data',
        data: {{ values1 | safe }},
        borderColor: 'red',
        borderWidth: 1,
        fill: false,
        pointRadius: 0 // 5万点关闭点显示，大幅提升渲染性能
      },
      {
        label: 'Peak data',
        data: peakDataset,
        borderColor: 'black',
        backgroundColor: 'black',
        borderWidth: 1,
        showLine: false, // 不需要峰值连线就设为false，要连线可改true
        pointRadius: 5 // 放大峰值点方便识别
      }
    ]
  },
  options: {
    scales: {
      x: {
        type: 'linear', // 必须指定为线性轴，支持自定义x坐标
        title: {
          display: true,
          text: '位置'
        }
      },
      y: {
        title: {
          display: true,
          text: '数值'
        }
      }
    }
  }
}

var context = document.getElementById('myChart').getContext('2d');
new Chart(context, line_chart);
</script>