Highcharts：以刻度为中心的 xAxis 年度标签答案

【问题标题】：Highcharts: xAxis yearly labels centered between ticksHighcharts：以刻度为中心的 xAxis 年度标签
【发布时间】：2013-04-08 12:04:46
【问题描述】：

我正在绘制带有每月数据点的折线图。但是，我希望比例仅显示年份字符串。到目前为止，很容易。但是，据我所知，Highcharts 将始终绘制相对于刻度的 xAxis 标签......并且我需要在刻度之间居中显示它们。有没有一些我想念的简单方法...？

【问题讨论】：

标签： highcharts

【解决方案1】：

据我了解，您希望的行为是：
http://jsfiddle.net/msjaiswal/U45Sr/2/

让我分解解决方案：
1。每月数据点
一个数据点对应一个月：

var data = [
    [Date.UTC(2003,1),0.872],
    [Date.UTC(2003,2),0.8714],
    [Date.UTC(2003,3),0.8638],
    [Date.UTC(2003,4),0.8567],
    [Date.UTC(2003,5),0.8536],
    [Date.UTC(2003,6),0.8564],
    ..
]

2.缩放以仅显示年度刻度
使用这样的图表选项：

        xAxis: {
        minRange : 30 * 24 * 3600 * 1000, //
        minTickInterval: 12* 30 * 24 * 3600 * 1000 // An year
    },

【讨论】：

问题是年份标签在“一月”下面，而且不在年中。

【解决方案2】：

没有简单的、开箱即用的解决方案。您必须使用事件并相应地重新定位标签。这是一个示例解决方案，在调整浏览器窗口大小（或以其他方式强制图表重绘）时也可以使用，即使滴答计数发生变化：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();
};

基本上，它是这样工作的：

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

【讨论】：

【解决方案3】：

这可以通过一种解决方法来完成，方法是通过回调（在加载和重绘时调用）手动调整标签位置。请在我对这篇文章的评论中查看链接到的小提琴：Highcharts - how can I center labels on a datetime x-axis?

【讨论】：

【解决方案4】：

有几个 xAxis 选项可以帮助你做你想做的事情。

http://api.highcharts.com/highcharts#xAxis.labels

看一下'align'，它指定标签是在刻度的左侧还是右侧，还有'x'，它允许您为标签从刻度指定x-offset。

【讨论】：

我已经这样做了。然而，数据是动态的，随着刻度之间的差距扩大，标签看起来越来越难以置信地粘在刻度上......我不知道我是否可以掌握刻度的数量，以便我可以计算它们之间的距离并即时设置中心对齐标签的 x 偏移量...

【解决方案5】：

您是否尝试过使用刻度放置？ http://api.highcharts.com/highcharts#xAxis.tickmarkPlacement

【讨论】：