javascript - 使用tickInterval时在Highcharts中的小刻度上显示标签

Question

在带有日期时间轴的 Highcharts 图表上，我试图突出显示几周。首先，我想到使用网格并将 tickInterval 设置为 7*24*60*60*1000 并将 minorTickInterval 设置为 >24*60*60*1000。将选项 gridLineWidth 设置为 2 时，结果几乎是完美的。

问题是缩放时:出现小刻度但没有标签。我找不到如何添加它。而且标签不是动态的。

您可以尝试这个演示:https://jsfiddle.net/gdebrion/19x4nmp5/19/ 第一张图表是基本图表。缩放时，您可以看到 x 轴的变化。 第二张图是我的。星期是可见的，但是当放大直到全宽显示一天时，唯一可见的刻度是较小的刻度，没有标签......

如果你有什么想法，请告诉我。谢谢!

Answer 1

API 不提供在小刻度上显示标签的方法。 http://www.highcharts.com/docs/chart-concepts/axes

MINOR TICKS

If the minorTickInterval option is set, minor ticks are laid out between the major ones. This includes minor tick marks, and minor grid lines, which have their own options for look and feel, but excludes labels.

查看 Highcharts 的源代码，我也没有看到任何次要刻度的标签表示，而有主要刻度的标签表示 (axis.labelEdge = [];) 。 https://github.com/highcharts/highcharts/blob/b6bc666da00d37c5c4e3c0d7fe238b8526e583ea/js/parts/Axis.js

    ...
    // Major ticks
    axis.ticks = {};
    axis.labelEdge = [];
    // Minor ticks
    axis.minorTicks = {};

    // List of plotLines/Bands
    ...

更新: 这是一个稍微粗糙的解决方案，用于为 Highcharts 启用小刻度标签: http://jsfiddle.net/strince/deuez7gk/

当缩放距离太远时，代码不会处理重叠标签，因此您需要放大一点才能看到它的工作原理。

图表代码已更新为:

  // Keep track of elements created. 
  var minorTickLabels = new Array();

  ...

  events: {
    load: function() { addMinorTickLabels(this); },
    redraw: function() { addMinorTickLabels(this); }
  }

  ...

function addMinorTickLabels(chart) {
// The elements need to be destroyed, otherwise a dictionary
// internal to highcharts will accumulate and pollute the chart.
for (var i = 0; i < minorTickLabels.length; i++) {
    var textItem = minorTickLabels[i];
  textItem.destroy();
}
minorTickLabels = new Array();

var axis0 = chart.xAxis[0];
var lastIndexFound = 0;

for (var tick in axis0.minorTicks) {
  var el = axis0.minorTicks[tick];

  // Skip double labels on major ticks.
    var index = axis0.tickPositions.indexOf(el.pos, lastIndexFound);
    if (index >= 0) {
    listIndexFound = index;
    continue;
  }

        var xPos = el.mark.getBBox().x;
  var yPos = el.mark.getBBox().y;
  var labelText = 0;

        // The formatting parameters below should be passed in.
        var textItem = chart.renderer.text(Highcharts.dateFormat("%d. %b", el.pos), xPos, yPos)   
  .css({
    color: '#101010',
    fontSize: '8px'
  })
  .attr({
    rotation: -25,
    zIndex: 6
  });

  // Add the tick label to the chart.
  textItem.add();

  minorTickLabels.push(textItem);
}

};