javascript - Highcharts - 如何将标签居中放置在日期时间 x 轴上？

Question

我很难弄清楚如何在不使用类别和 tickPlacement 的情况下在 Highcharts 中将标签居中放置在日期时间 x 轴上(因为 tickPlacement 仅适用于类别)。

我的轴是动态创建的，所以我不能简单地设置 x 偏移或填充，因为这会导致不同间隔的轴看起来很奇怪。

在弄乱了配置选项之后，我想我可能已经找到了一个解决方案，使用 x 轴格式化程序和 Highcharts 回调中的一些 css/jquery noodling。请参阅下面我的回答。

Answer 1

诀窍是像这样使用 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 '<span class="timeline_label">' + Highcharts.dateFormat(this.dateTimeLabelFormat, this.value) + '</span>';
    }
}

您可以看到格式化程序将保留用户设置或默认设置的任何 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 here

希望这对某些人有所帮助。此外，如果有任何改进，很高兴在这里看到它们。