使用Plotly.js展示（频谱图）``````````````````````````````````````````

完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Plotly.js Spectrogram Example</title>
    <script src="https://cdn.plot.ly/plotly-3.0.0-rc.1.min.js" charset="utf-8"></script>
</head>
<body>
    <div id="spectrogram"></div>
    <div id="dopplerPlot" style="width: 100%; height: 500px;"></div>
    <div id="heatmapPlot" style="width: 100%; height: 600px;"></div>
    <script>
         // 生成时间和频率范围
         const times = [];
        const frequencies = [];
        const snrData = [];

          // 时间范围 (0:00 到 24:00, 每小时)
          for (let t = 0; t <= 24; t += 0.15) {
            times.push(t); // 使用小时数作为内部数据
        }

        // 频率范围 (45 到 90 MHz)
        for (let f = 45; f <= 90; f += 1) {
            frequencies.push(f);
        }

        // 高斯分布参数调整
        const signals = [
            { A: 13, f0: 55, t0: 3, sigma_f: 2, sigma_t: 0.1 },  
            { A: 13, f0: 50, t0: 4, sigma_f: 2, sigma_t: 0.1 },  
            { A: 6, f0: 55, t0: 5, sigma_f: 2, sigma_t: 0.1 } ,  
            { A:13 , f0: 55, t0: 18, sigma_f: 2, sigma_t: 0.1 },   
            { A: 13, f0: 55, t0: 19, sigma_f: 2, sigma_t: 0.1 },
            { A: 6, f0: 55, t0: 21, sigma_f: 2, sigma_t: 0.1 },
        ];

        // 填充 SNR 数据
        for (let i = 0; i < frequencies.length; i++) {
            const row = [];
            for (let j = 0; j < times.length; j++) {
                // 时间 (小时)
                const t = times[j];

                // 基础噪声
                let snr = -17 + Math.random() * 1.1; // 更大的背景随机噪声

                // 增强信号 (多个高斯分布叠加)
                for (const signal of signals) {
                    const { A, f0, t0, sigma_f, sigma_t } = signal;
                    snr += A * Math.exp(
                        -((frequencies[i] - f0) ** 2) / (2 * sigma_f ** 2) -
                        ((t - t0) ** 2) / (2 * sigma_t ** 2)
                    );
                }

                row.push(snr);
            }
            snrData.push(row);
        }

       // 自定义显示的时间点 (0:00, 4:00, 8:00,12:00, 16:00,20:00,  24:00)
       const customTickVals = [0, 4, 8, 12, 16,20,24]; // 时间 (小时)
        const customTickText = ['0:00', '4:00', '8:00', '12:00', '16:00', '20:00','24:00']; // 标签

        // 创建热力图
        const trace = {
            z: snrData,
            x: times,
            y: frequencies,
            type: 'heatmap',
            colorscale: 'Jet',
            colorbar: {
                title: 'SNR/dB',
                titleside: 'right',
            },
            zmin: -25,
            zmax: 15,
        };

        const layout = {
            title: 'Simulated Doppler Heatmap with Selected Time Points',
            xaxis: {
                title: 'Time (UT)',
                tickvals: customTickVals, // 仅显示重要时间点
                ticktext: customTickText, // 自定义时间标签
                tickangle: -45, // 旋转标签
            },
            yaxis: {
                title: 'Frequency (MHz)',
            },
        };

        // 绘制热力图
        Plotly.newPlot('heatmapPlot', [trace], layout);
    </script>
</body>
</html>