Highcharts:xAxis 年度标签在刻度线之间居中

问题描述 投票:0回答:5

我正在绘制带有每月数据点的折线图。但是,我希望比例尺仅显示年份字符串。 到目前为止,一切都很简单。然而,据我所知,Highcharts 将始终绘制相对于刻度线的 xAxis 标签...并且我需要将它们显示在刻度线之间的中心。 请问我缺少一些简单的方法吗?

highcharts
5个回答
3
投票

根据我的理解,您想要的行为是:
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 // a 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();
};

基本上,它的工作原理如下:

  1. 获取所有现有标签(重绘时,包括新添加的标签)。 2. 按 css 属性“left”排序(经过重绘后,它们不再以这种方式排序)
  2. 计算前两个标签之间的偏移量(所有标签的偏移量相同)
  3. 将偏移量的一半设置为所有标签的左边距,有效地将它们向右移动一半偏移量。
  4. 删除最右边的标签(移到图表之外,有时部分可见)。

0
投票

可以通过回调(在加载和重绘时调用)手动调整标签位置来解决此问题。请参阅我对这篇文章的评论中链接的小提琴:Highcharts - 如何在日期时间 x 轴上居中标签?


-1
投票

有几个 xAxis 选项可以帮助您完成您想要的操作。

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

看一下“align”,它指定标签是在刻度线的左侧还是右侧,还有“x”,它允许您指定标签相对于刻度线的 x 偏移量。


-1
投票
© www.soinside.com 2019 - 2024. All rights reserved.