1

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

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

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

4

2 回答 2

4

诀窍是像这样使用 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

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

于 2013-08-29T16:29:36.457 回答
1

基于现有的答案，有一个更简单的解决方案在调整浏览器窗口大小（或以其他方式强制图表重绘）时也有效，即使滴答计数发生变化：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）。基本上，它是这样工作的：

  1. 获取所有现有标签（重绘时，这包括新添加的标签）。2.按css属性'left'排序（经过一些重绘后它们不会这样排序）
  2. 计算前两个标签之间的偏移量（所有标签的偏移量相同）
  3. 将偏移量的一半设置为所有标签的左边距，有效地将它们向右移动一半的偏移量。
  4. 删除最右边的标签（移到图表之外，有时部分可见）。
于 2016-10-20T09:58:30.870 回答