如何更改 HighChart xAxis 时间线以匹配本地时间而不是 UTC？

Question

请注意，在我的屏幕截图中，工具提示显示的是正确的当地时间。但是 xAxis 时间线显示的是 UTC 时间下午 12:00。

我在 2 个地方将 global:useUTC 设置为 false：

在我的图表配置中：

 vm.config = {
    global: { useUTC : false }, // <--
    options: {
    // ....

以及在加载图表后运行的 setHighCharts 函数：

const setHighChartOptions = (color, background, gridLine) => {
    Highcharts.setOptions({
        global: { useUTC: false }, // <--
        chart: {
            backgroundColor: background
        },
        legend: {
            itemStyle: { color: color }
        },
        loading: {
            labelStyle: { color: color },
            style: { backgroundColor: background }
        },
        xAxis: { labels: {style: { color: color }}}
    });

    chart.get('y-axis-price').update({
        gridLineColor: gridLine,
        gridLineDashStyle: 'longdash'
    }, false);

    chart.get('x-axis-sentiment').update({
        tickColor: background
    }, false);

    chart.get('x-axis-alert').update({
        tickColor: background
    }, false);
};

我缺少什么吗？ :(

Answer 1

刚刚想通了！

我的chartConfig 中的global 对象毫无用处......关键是 setHighChartOptions 函数。这需要运行才能将useUTC 设置为false。

问题出在我的应用程序中，只有在您更改主题时才会调用该函数。所以现在我只是在加载图表后立即调用它，现在 useUTC 被正确设置为 false。

const initHighChart = (chart, urlObject) => {
    setHighChartOptions('#fff', '#474747', '#656565');
    let ticker = urlRetrieve.ticker(urlObject);
    let epoch  = urlRetrieve.epochs(urlObject);
    setNewChartTicker(chart, ticker, epoch.start, epoch.end);
};