Highcharts 标记之间的恒定间距

Question

你能告诉我如何在 Highcharts 中的时间戳之间保持恒定宽度（如屏幕截图所示），并缩放图表间隔，以及如何将图表本身向左移动？

我演示了我得到的数据，区间放置的方式令人费解，也不是很漂亮

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: {},
    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,
        },
        pointWidth: 145
    },
    series: [series]
});

$.get('https://searchyoutb.com/data.php', function(response) {
    chart.series[0].setData(response);
});

https://jsfiddle.net/gashik100/3h50rcjo/11/

我想帮助解决我的问题

Answer 1

在 Highcharts Stock 中，x 轴的

ordinal

属性默认设置为

true

，这确保点之间的距离相等，而不管它们之间的实际时间差。

如果您希望刻度线之间的间距相同，只需设置：

xAxis: {
  ordinal: false
}

这个演示很好地说明了它：https://jsfiddle.net/BlackLabel/xref6g19/
API：https://api.highcharts.com/highstock/xAxis.ordinal