如何在单页中动态生成多个Highstock图表？

首先，我注意到你原代码里有几个关键问题需要修正，同时我会帮你实现数据动态变化的核心功能：

1. 修正原代码的核心问题 #

你的循环里每次创建新图表时，错误地把父容器container传给了Highcharts.stockChart，这会导致所有图表都渲染到同一个容器里，覆盖之前的内容。应该把新创建的div作为图表容器。另外，createConfig函数需要你自己实现，用来生成Highstock的配置项。

2. 完整实现示例 #

下面是一个可运行的示例，包含多图表初始化和单图表动态更新数据两种场景（根据你的需求选择）：

场景1：初始化多个图表，每个图表对应一个快照数据 #

<div class="container"></div>

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script>
window.onload = function() {
    // 模拟你的快照数据
    const somedata = [
        { name: '快照1', data: [[1620000000000, 10], [1620086400000, 20], [1620172800000, 15]] },
        { name: '快照2', data: [[1620000000000, 5], [1620086400000, 15], [1620172800000, 25]] }
    ];

    const container = document.querySelector('.container');

    // 生成Highstock配置的辅助函数
    function createConfig(snapshot) {
        return {
            title: { text: snapshot.name },
            series: [{
                name: '动态数据',
                data: snapshot.data
            }]
        };
    }

    // 循环创建多个图表
    somedata.forEach(function(snapshot) {
        const chartDiv = document.createElement('div');
        chartDiv.classList.add('chart-container');
        // 给每个图表容器设置高度，不然图表显示不出来
        chartDiv.style.height = '300px';
        container.appendChild(chartDiv);
        
        // 注意：这里要把新创建的chartDiv作为容器
        const chart = new Highcharts.stockChart(chartDiv, createConfig(snapshot));
        
        // 如果需要给每个图表添加动态更新逻辑，比如定时添加数据
        setInterval(() => {
            const now = new Date().getTime();
            const randomValue = Math.floor(Math.random() * 30);
            // 动态添加新数据点，同时保持数据点数量不超过10个
            chart.series[0].addPoint([now, randomValue], true, chart.series[0].data.length >= 10);
        }, 2000);
    });
};
</script>

场景2：单个图表动态更新数据数量 #

如果你只需要一个图表，动态调整数据点的数量（比如实时新增或删除旧数据），可以用下面的简化版：

<div id="dynamic-chart" style="height: 400px;"></div>

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script>
window.onload = function() {
    // 初始化图表
    const chart = new Highcharts.stockChart('dynamic-chart', {
        title: { text: '实时动态数据' },
        series: [{
            name: '数量变化',
            data: [] // 初始空数据
        }]
    });

    // 模拟实时数据更新，每2秒添加一个新数据点，超过15个就删除最旧的
    setInterval(() => {
        const currentTime = new Date().getTime();
        const randomValue = Math.floor(Math.random() * 50);
        // addPoint参数说明：[数据点], 是否重绘, 是否移除最旧的点
        chart.series[0].addPoint([currentTime, randomValue], true, chart.series[0].data.length >= 15);
    }, 2000);
};
</script>

3. 关键API说明 #

• chart.series[0].addPoint(): 用于向系列添加新数据点，第三个参数设为true时会自动移除最旧的数据点，保持数据数量稳定。
• chart.series[0].setData(): 如果需要一次性替换整个数据集，可以用这个方法，比如chart.series[0].setData(newDataArray, true)，第二个参数true表示重绘图表。
• 图表容器必须设置固定高度，否则Highcharts无法正确渲染。

内容的提问来源于stack exchange，提问作者Василий Пупкин