Highcharts – 如何在日期时间x轴上居中标签？
我正在努力弄清楚如何在不使用类别和tickPlacement的情况下在Highcharts中将日期时间x轴上的标签居中（因为tickPlacement仅适用于类别）。
我的轴是动态创建的，所以我不能简单地设置x偏移或填充，因为这会导致不同间隔的轴看起来很奇怪。
在搞乱了配置选项后，我想我可能已经在Highcharts回调中使用x轴格式化程序和一些css / jquery noodling找到了解决方案。 请参阅下面的答案。
诀窍是使用x轴标签对象，如下所示：
xAxis: { type: 'datetime', labels: { useHTML: true, align: 'center', formatter: function () { //using a specific class for the labels helps to ensure no other labels are moved return '' + Highcharts.dateFormat(this.dateTimeLabelFormat, this.value) + ''; } } 您可以看到格式化程序将保留用户或默认设置的dateTimeLabelFormat。
然后有一个回调，做这样的事情：
function (chart) { var $container = $(chart.container); 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(); nextXPos = $nextLabel.length ? parseInt($nextLabel.css('left')) : chart.axes[0].left + chart.axes[0].width; delta = (nextXPos - thisXPos) / 2.0; newXPos = thisXPos + delta; if ($nextLabel.length || $(this).width() + newXPos < nextXPos) { $thisLabel.css('left', newXPos + 'px'); } else { $thisLabel.remove(); } }); });
简而言之，这将通过每个标签并通过计算自身与下一个标签之间的距离来确定应该移动多少（使用css）。 当它到达最后一个标签时，它会使用轴的末端将其移动以进行计算，或者如果它不适合则将其移除。 最后一部分只是我决定做出的决定，你可以选择做其他事情，如自动换行等。
你可以在这里看到jsfiddle
希望这有助于一些人。 此外，如果有任何改进，在这里看到它们会很棒。
基于现有的答案，有一个更简单的解决方案，当调整浏览器窗口大小（或以其他方式强制图表重绘）时也可以工作，即使刻度计数发生变化： http ： //jsfiddle.net/McNetic/eyyom2qg/3 /
它通过将相同的事件处理程序附加到load和redraw事件来工作：
$('#container').highcharts({ chart: { events: { load: fixLabels, redraw: fixLabels } }, [...]
处理程序本身如下所示：
var fixLabels = function() { var labels = $('div.highcharts-xaxis-labels span', this.container).sort(function(a, b) { return +parseInt($(a).css('left')) - +parseInt($(b).css('left')); }); labels.css('margin-left', (parseInt($(labels.get(1)).css('left')) - parseInt($(labels.get(0)).css('left'))) / 2 ); $(labels.get(this.xAxis[0].tickPositions.length - 1)).remove(); };
如您所见，标签的额外包装是不必要的（至少如果您没有多个xAxis）。 基本上，它的工作原理如下：
- 获取所有现有标签（重绘时，包括新添加的标签）。 2.按css属性’left’排序（在重新绘制之后它们不会以这种方式排序）
- 计算前两个标签之间的偏移量（所有标签的偏移量相同）
- 将偏移的一半设置为所有标签的左边距，有效地将它们偏移一半到右边。
- 删除最右边的标签（移动到图表外部，有时部分可见）。