highchart将x轴标签放置在日期时间轴的刻度之间

Question

使用SO中的各种帖子/问题作为参考，我创建了一个分散的highchart jsfiddle

xAxis: {
        opposite:true,
        type: 'datetime',
        gridLineWidth: 1,
        gridLineDashStyle: 'ShortDot',
        gridLineColor:'black',
        alternateGridColor: 'lightgrey',
        tickInterval: 3 * 30 * 24 * 3600 * 1000, // 1 quarter
        labels: {
            //align: "left",
            //padding:200,
            formatter: function () {
                var s = "";
                if (Highcharts.dateFormat('%b', this.value) == 'Jan') {
                    s = s + "Q1"
                };
                if (Highcharts.dateFormat('%b', this.value) == 'Apr') {
                    s = s + "Q2"
                };
                if (Highcharts.dateFormat('%b', this.value) == 'Jul') {
                    s = s + "Q3"
                };
                if (Highcharts.dateFormat('%b', this.value) == 'Oct') {
                    s = s + "Q4"
                };
                s = s + " " + Highcharts.dateFormat('%Y', this.value);
                return s;
            }
        },
        plotLines: [{
            color: 'red', // Color value
            value: now, // Value of where the line will appear
            width: 2, // Width of the line
            label: {
                text: 'Now',
                align: 'center',
                verticalAlign: 'bottom',
                y: +20,
                rotation: 0
            }
        }]
    },

但是我对X轴标签位于刻度线附近感到惊讶。 如何移动到网格的中间？

无论如何，我可以实现以下目标吗？

我尝试对齐，填充但没有帮助。 当时间轴增加时，我仍应将标签放置在中间。 我应该用tickInterval做些什么？ 这可能是我所缺少的简单属性。

我找到了这个链接jsfiddle ，它解决了我的问题，但使用了2个x轴，并且正在从列表中填充数据。

Answer 1

我实现了Christopher Cortez在这里找到的解决方案：

但是，也更改为在highcharts load事件上触发，而不是在回调上触发，并且我将其更改为在触发HighCharts redraw事件时redraw调用它，以便在调整页面大小时它们保持对齐。

$('#container').highcharts({
        chart: {
            defaultSeriesType: 'scatter',
            events: {
                 load: centerLabels,
                 redraw: centerLabels                    
            }
        },

        /* ... all the other options ...*/

 });

哪里

function centerLabels(chart) {        
    var $container = $(chart.target.container); 
    var axes = chart.target.axes;

    var $labels = $container.find('.highcharts-axis-labels .timeline_label');
    var $thisLabel, $nextLabel, thisXPos, nextXPos, delta, newXPos;

    $labels.each(function () {
        $thisLabel = $(this).parent('span');
        thisXPos = parseInt($thisLabel.css('left'));

        $nextLabel = $thisLabel.next();
        // next position is either a label or the end of the axis
        nextXPos = $nextLabel.length ? parseInt($nextLabel.css('left')) : axes[0].left + axes[0].width;
        delta = (nextXPos - thisXPos) / 2.0;
        newXPos = thisXPos + delta;

        // remove the last label if it won't fit
        if ($nextLabel.length || $(this).width() + newXPos < nextXPos) {
            $thisLabel.css('left', newXPos + 'px');
        } else {
            $thisLabel.remove();
        }
    });
}

JSFiddle