Highstock图表在Bootstrap col-8容器中自动缩放异常问题求助

问题场景 #

我们使用Bootstrap搭建网站，通过Highstock图表展示100天的加密货币OHLC及成交量数据：

• 全屏展示时，图表能正常显示全部100天数据
• 将图表放入col-md-8容器并缩小页面宽度后，图表自动缩放，无法完整显示100天数据
• 尝试禁用rangeSelector及响应式设置后，问题仍未解决

截图说明 #

现有代码 #

HTML代码 #

<div class="container">
    <div class="row g-5">
        <div class="col-md-8">
            <div id="charts">
                <div id="container" style="height: 700px; min-width: 310px"></div>
            </div>
         </div>
     </div>
</div>

JS代码 #

(async() => {
    const data = await fetch("/crypto_price/{{ crypto.id }}?days_range=100").then(response => response.json());
    // split the data set into ohlc and volume
    const ohlc = [],
    volume = [],
    dataLength = data.length,
    // set the allowed units for data grouping
    groupingUnits = [
        ['day', // unit name
            [1] // allowed multiples
        ]
    ];
    for (let i = 0; i < dataLength; i += 1) {
        ohlc.push([
            data[i][0], // the date
            data[i][1], // open
            data[i][2], // high
            data[i][3], // low
            data[i][4] // close
        ]);
        volume.push([
            data[i][0], // the date
            data[i][5] // the volume
        ]);
    }
    // create the chart
    Highcharts.stockChart('container', {
        rangeSelector: {
            selected: 1
        },
        title: {
            text: "{{ crypto.coin_name }} Chart"
        },
        yAxis: [
            {
                labels: {
                    align: 'right',
                    x: -3
                },
                title: {
                    text: 'OHLC'
                },
                height: '60%',
                lineWidth: 2,
                resize: {
                    enabled: true
                }
            }, 
            {
                labels: {
                    align: 'right',
                    x: -3
                },
                title: {
                    text: 'Volume'
                },
                top: '65%',
                height: '35%',
                offset: 0,
                lineWidth: 2
            }
        ],
        tooltip: {
            split: true
        },
        series: [
            {
                type: 'candlestick',
                name: "{{ crypto.coin_name }}",
                data: ohlc,
                dataGrouping: {
                    units: groupingUnits
                }
            }, 
            {
                type: 'column',
                name: 'Volume',
                data: volume,
                yAxis: 1,
                dataGrouping: {
                    units: groupingUnits
                }
            }
        ]
    });
})(); 

原因分析 #

Highstock默认会根据容器宽度触发**数据分组（dataGrouping）**机制：当容器宽度不足以容纳所有数据点时，会自动合并相邻数据点来适配显示空间，导致100天的数据被压缩合并，无法完整展示。即使禁用了rangeSelector，代码中配置的groupingUnits依然会让数据分组的自动逻辑生效，最终导致轴范围被自动缩放。

解决方案 #

方案1：彻底禁用数据分组 #

在每个series的配置中添加dataGrouping.enabled: false，强制Highstock渲染所有原始数据点，不进行任何合并：

series: [
    {
        type: 'candlestick',
        name: "{{ crypto.coin_name }}",
        data: ohlc,
        dataGrouping: {
            enabled: false // 禁用数据分组
        }
    }, 
    {
        type: 'column',
        name: 'Volume',
        data: volume,
        yAxis: 1,
        dataGrouping: {
            enabled: false // 禁用数据分组
        }
    }
]

方案2：锁定X轴显示范围 #

通过xAxis.min和xAxis.max手动指定数据的起始和结束时间，强制图表显示完整的100天范围，避免自动缩放：

Highcharts.stockChart('container', {
    // ...其他配置
    xAxis: {
        min: ohlc[0][0], // 第一个数据点的时间戳
        max: ohlc[ohlc.length - 1][0] // 最后一个数据点的时间戳
    },
    // ...其他配置
})

方案3：调整容器最小宽度（妥协方案） #

给图表容器设置更大的min-width，避免宽度过小导致数据点挤压，但此方案仅适配特定屏幕尺寸，不如前两种方案通用：

<div id="container" style="height: 700px; min-width: 800px"></div>

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