Question

我正在绘制包含月度数据点的折线图。但是，我希望比例仅显示年份字符串。到目前为止，这么容易。但是，据我所知，Highcharts总是会相对于刻度线绘制xAxis标签......我需要以刻度线为中心显示它们。是否有一些简单的方法可以解决这个问题，我想错过，请...？

Answer 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
    },

Answer 2

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

Answer 3

没有简单，开箱即用的解决方案。您必须使用事件并相应地重新定位标签。这是一个示例解决方案，在调整浏览器窗口大小（或以其他方式强制图表重绘）时也有效，即使刻度计数发生变化：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属性排序＆＃39; left＆＃39; （在重新绘制之后，它们不会以这种方式排序）
计算前两个标签之间的偏移量（所有标签的偏移量相同）
将偏移的一半设置为所有标签的左边距，有效地将偏移的一半移到右边。
删除最右边的标签（移动到图表外部，有时部分可见）。

Answer 4

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

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

查看'align'，它指定标签是在刻度线的左侧还是右侧，还有'x'，它允许您从刻度线中为标签指定x偏移量。

Answer 5

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

Highcharts：xAxis年度标签集中在刻度线之间

5 个答案: