Highcharts-如何在日期時間x軸上居中放置標簽？

Question

我很難在不使用類別和tickPlacement的情況下試圖弄清楚如何在Highcharts的日期時間x軸上居中放置標簽（因為tickPlacement僅適用於類別）。

我的軸是動態創建的，因此我不能簡單地設置x偏移或填充，因為這會導致不同間隔的軸看起來很奇怪。

在弄亂了配置選項之后，我想我可能已經找到了使用x軸格式化程序和Highcharts回調中的某些CSS / jQuery點綴的解決方案。 請參閱下面的答案。

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

希望這對某些人有幫助。 另外，如果有任何改進，很高興在這里看到它們。

Answer 2

根據現有的答案，有一個更簡單的解決方案在調整瀏覽器窗口大小（或以其他方式強制重新繪制圖表）時也適用，即使滴答計數發生變化也是如此： http : //jsfiddle.net/McNetic/eyyom2qg/3 /

它通過將相同的事件處理程序附加到load和redraw事件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的情況下）。 基本上，它是這樣的：

1. 獲取所有現有標簽（重繪時，包括新添加的標簽）。 2.按css屬性“ left”排序（在重畫后不會以這種方式排序）
2. 計算前兩個標簽之間的偏移量（所有標簽的偏移量都相同）
3. 將偏移量的一半設置為所有標簽的左邊距，有效地將它們向右偏移一半。
4. 刪除最右邊的標簽（移到圖表外部，有時部分可見）。