Question

在带有 datetime 轴的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

如果设置了minorTickInterval选项，则在主要选项之间布置次要标记。这包括次要刻度线和次要网格线，它们有自己的外观和感觉选项，但排除标签。

看一下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);
}

};

使用tickInterval时，在Highcharts中显示小标记上的标签

1 个答案: