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


Highcharts: xAxis yearly labels centered between ticks

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

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

让我分解解决方案：
1. 月度数据点
1 个数据点对应 1 个月 :

1
2
3
4
5
6
7
8
9
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。缩放以仅显示年度刻度
使用这样的图表选项：

1
2
3
4
        xAxis: {
        minRange : 30 * 24 * 3600 * 1000, //
        minTickInterval: 12* 30 * 24 * 3600 * 1000 // An year
    },
相关讨论

没有简单的、开箱即用的解决方案。您必须使用事件并相应地重新定位标签。这是一个示例解决方案，在调整浏览器窗口大小(或以其他方式强制图表重绘)时也有效，即使滴答计数发生变化：http://jsfiddle.net/McNetic/eyyom2qg/3/

它通过将相同的事件处理程序附加到 load 和 redraw 事件来工作：

1
2
3
4
5
6
7
8
$('#container').highcharts({
  chart: {
    events: {
      load: fixLabels,
      redraw: fixLabels
    }
  },
[...]

处理程序本身如下所示：

1
2
3
4
5
6
7
8
9
  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\\' 排序(经过一些重绘后它们不是这样排序的)
  • 计算前两个标签之间的偏移量(所有标签的偏移量相同)
  • 将偏移量的一半设置为所有标签的左边距，有效地将它们向右移动一半的偏移量。
  • 删除最右边的标签(移到图表之外，有时部分可见)。

    • 这可以通过一种解决方法来完成，方法是通过回调(在加载和重绘时调用)手动调整标签位置。请在我对这篇文章的评论中查看链接到的小提琴：Highcharts - 如何在日期时间 x 轴上居中标签？

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

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

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

    看看\\'align\\'，它指定标签是在刻度的左边还是右边，还有\\'x\\'，它允许你为标签从刻度指定一个x-offset。

    相关讨论