使用 tickInterval 时在 Highcharts 中的次要刻度上显示标签

Posted 2023-03-14

【中文标题】使用 tickInterval 时在 Highcharts 中的次要刻度上显示标签

【英文标题】：Display labels on minor tick in Highcharts when using tickInterval

【发布时间】：2016-06-20 14:34:51

【问题描述】：

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

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

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

如果您有任何想法，请告诉我。谢谢！

【参考方案1】：

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

小蜱

如果设置了 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);

;