Highcharts时间戳恒定间距设置及图表左移方法求助

一、实现时间戳对应点宽度恒定且自适应缩放 #

当前固定设置pointWidth:145会导致缩放时布局混乱，可通过监听图表重绘事件动态计算点宽度，确保不同区间下点间距相对恒定：

1. 移除固定的pointWidth配置，改为在图表redraw事件中动态计算
2. 获取当前x轴可见范围内的点数，结合图表可用宽度计算合适的点宽度

关键修改代码段：

chart: {
    events: {
        redraw: function() {
            var series = this.series[0];
            if (!series || series.data.length === 0) return;
            
            // 过滤出当前可见的点
            var visiblePoints = series.points.filter(point => point.isInside);
            if (visiblePoints.length === 0) return;
            
            // 计算可用绘图宽度，预留点间距后分配给每个点
            var plotWidth = this.plotWidth;
            var spacing = 2;
            var calculatedPointWidth = Math.floor((plotWidth / visiblePoints.length) - spacing);
            // 设置最小宽度避免缩放后点过窄
            calculatedPointWidth = Math.max(calculatedPointWidth, 5);
            
            series.update({ pointWidth: calculatedPointWidth }, false);
            this.redraw(false);
        }
    }
},
plotOptions: {
    series: {
        lastVisiblePrice: true,
        pointPadding: 0,
        groupPadding: 0
    }
}

二、将图表整体向左偏移 #

有两种常用实现方式：

方式1：调整图表整体左边距 #

直接修改chart配置的marginLeft，偏移整个图表（包括坐标轴、系列、标题等元素）：

chart: {
    marginLeft: 50, // 向左偏移50px，可按需调整数值
    // ... 其他事件配置
}

方式2：仅偏移x轴及系列 #

通过xAxis.offset属性单独偏移坐标轴和数据系列，不影响图例、标题等外围元素：

xAxis: {
    type: 'datetime',
    max: date.getTime() + 60000*2,
    offset: 30 // 向左偏移30px
}

完整修改后代码 #

var tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
var date = new Date();

var series = {
    tooltip: {
        valueDecimals: 4
    },
    id: 'aapl-ohlc',
    name: 'AAPL Stock Price',
    data: [],
    fillColor: {
        linearGradient: {
            x1: 0,
            y1: 0,
            x2: 0,
            y2: 1
        },
        stops: [
            [0, Highcharts.getOptions().colors[0]],
            [1, Highcharts.color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
        ]
    },
    threshold: null
}

var chart = Highcharts.stockChart('container', {
    time: {
        useUTC: false,
        timezone: tz,
    },
    chart: {
        marginLeft: 50, // 整体向左偏移50px
        events: {
            redraw: function() {
                var series = this.series[0];
                if (!series || series.data.length === 0) return;
                
                var visiblePoints = series.points.filter(point => point.isInside);
                if (visiblePoints.length === 0) return;
                
                var plotWidth = this.plotWidth;
                var spacing = 2;
                var calculatedPointWidth = Math.floor((plotWidth / visiblePoints.length) - spacing);
                calculatedPointWidth = Math.max(calculatedPointWidth, 5);
                
                series.update({ pointWidth: calculatedPointWidth }, false);
                this.redraw(false);
            }
        }
    },
    boost: {
        useGPUTranslations: true,
        seriesThreshold: 5
    },
    exporting: {
        enabled: false
    },
    rangeSelector: {
        inputEnabled: false,
        selected: 0,
        buttons: [{
            type: 'minute',
            count: 5,
            text: '5m',
            events: {
                click: function () {
                    alert('Clicked button');
                }
            }
        }, {
            type: 'minute',
            count: 10,
            text: '10m'
        }, {
            type: 'month',
            count: 6,
            text: '6m'
        }, {
            type: 'ytd',
            text: 'YTD'
        }, {
            type: 'year',
            count: 1,
            text: '1y'
        }, {
            type: 'all',
            text: 'All'
        }]
    },
    yAxis: [{
        labels: {
            align: 'left',
        },
        height: '80%',
        resize: {
            enabled: true
        },
    }, {
        labels: {
            align: 'left'
        },
        top: '80%',
        height: '20%',
    }],
    xAxis: {
        type: 'datetime',
        max: date.getTime() + 60000*2,
    },
    plotOptions: {
        series: {
            lastVisiblePrice: true,
            pointPadding: 0,
            groupPadding: 0
        }
    },
    series: [series]
});

// 加载数据（替换为实际数据接口）
$.get('https://searchyoutb.com/data.php', function(response) {
    chart.series[0].setData(response);
});

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