使用ChartJS将两个数据集合并绘制到同一折线图的实现问题

核心思路 #

你使用的是Chart.js库，合并两张折线图的核心逻辑如下：

• 统一使用第一组全量的labels作为图表的x轴基准（因为第二组峰值标签全部包含在第一组内）
• 把两个折线的配置放到同一个datasets数组中
• 对峰值数据集做数据适配，在没有峰值的x轴位置填null，Chart.js会自动跳过空值，仅在有峰值的位置渲染对应点

实现代码 #

<script>
// 第一步：先把峰值数据转成「标签-值」的映射表，方便后续匹配x轴
const peakMap = {};
const peakLabels = {{ labels2 | safe }};
const peakValues = {{ values2 | safe }};
peakLabels.forEach((label, index) => {
    peakMap[label] = peakValues[index];
});

// 第二步：生成适配全量x轴的峰值数据数组，匹配不到的位置填null
const fullLabels = {{ labels | safe }};
const adaptedPeakData = fullLabels.map(label => peakMap[label] ?? null);

// 第三步：统一配置图表，把两个数据集放到同一个datasets数组里
var mergedChartConfig = {
    type: 'line',
    data: {
        labels: fullLabels,
        datasets: [
            {
                label: 'Sweep data',
                data: {{ values | safe }},
                borderColor: 'red', // 折线本身颜色由borderColor控制，可按需调整
                backgroundColor: 'red',
                fill: false,
                display: true               
            },
            {
                label: 'Peak data',
                data: adaptedPeakData,
                borderColor: 'black',
                backgroundColor: 'black',
                fill: false,
                display: true,
                // 可选配置：让峰值点更突出
                pointRadius: 5,
                pointHoverRadius: 7
            }
        ]
    }, 
    options: {
        // 原有自定义配置可以直接放在此处
    }
};

window.onload = function(){
    var ctx = document.getElementById("canvas1").getContext("2d");
    window.myLine = new Chart(ctx, mergedChartConfig);  
    // 不需要再初始化canvas2，可直接删除页面中的canvas2元素
};
</script>

额外可选配置 #

• 如果不需要峰值的连线，仅需要显示离散的峰值点，可以给峰值的dataset添加配置showLine: false，就只会渲染点不会绘制折线
• 如果需要调整折线、点的样式，可以参考Chart.js官方文档的对应配置项修改参数即可

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