Question

使用SO中的各种帖子/问题作为参考，我创建了一个散点图高架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轴标签位于刻度线附近。如何移动到网格中间？

existing chart

反正我能达到以下目的吗？

我尝试了对齐，填充，但没有帮助。当时间轴增加时，我仍然应该将标签放在中间。我应该用 tickInterval 做点什么吗？这可能是一个我想念的简单财产。

我发现此链接jsfiddle解决了我的问题，但是使用了2个x轴，并且我填写了列表中的数据。

Answer 1

我实施了Christopher Cortez＆＃39;找到解决方案here：

但是，也改为触发highcharts load事件，而不是回调，并且我已将其更改为在HighCharts 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

高图在日期时间轴上的刻度之间放置x轴标签

1 个答案: