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

在带有日期时间轴的Highcharts图表上，我试图突出显示周数。首先，我想到了使用网格并将tickInterval设置为

7*24*60*60*1000

，minorTickInterval设置为

24*60*60*1000

。将选项gridLineWidth设置为

2

，结果几乎完美

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

您可以尝试以下演示： 第一个图表是基本图表。缩放时，可以看到x轴的变化。 第二张图表是我的。周是可见的，但当放大到全幅显示一天时，唯一可见的刻度是小刻度，没有标签

---

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

API不提供在小刻度上显示标签的方法。

小蜱

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

在查看Highcharts的源代码时，我也没有看到与主刻度（axis.labelEdge=[]；）相同的小刻度的任何标签表示。

更新： 下面是一个略为粗略的解决方案，用于为高图启用小刻度标签：

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

图表代码已更新为：

  // 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);
}

//跟踪创建的元素。
var minorTickLabels=新数组（）；
...
活动：{
load:function（）{addMinorTickLabels（this）；}，
重画：函数（）{addMinorTickLabels（this）；}
}
...
函数addMinorTickLabels（图表）{
//需要销毁这些元素，否则将创建字典
//内部到高位图表将累积并污染图表。
对于（var i=0；i=0）{
listIndexFound=索引；
继续；
}
var xPos=el.mark.getBBox（）.x；
var yPos=el.mark.getBBox（）.y；
var-labelText=0；
//应传入下面的格式化参数。
var textItem=chart.renderer.text（Highcharts.dateFormat（“%d.%b”，el.pos），xPos，yPos）
.css({
颜色：“#101010”，
字体大小：“8px”
})
艾特先生({
轮调：-25，
zIndex:6
});
//将勾号标签添加到图表中。
textItem.add（）；
minorTickLabels.push（textItem）；
}

})

  // 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);
}