可变蜱长度

Question

我需要创建一个柱形图，其中x轴蜱像下面的图像中：

1. 每隔一个小时长的刻度
2. 一个短刻度每30
3. 一个较短的刻度，每15分钟

我设法与tickLength两种不同长度和minorTickLength，你可以从这个看小提琴https://jsfiddle.net/depsir/pso8yya7/

有什么办法可以添加第三个滴答声长度吗？我正在考虑类似labels.formatter的东西，但对于时钟长度，但任何其他选项将不胜感激

Answer 1

我认为可能的解决方案之一是每改变一次minorTicks路径，所以它会稍微长一点。您可以在加载和重绘事件回调函数内更改它。

var makeCustomTicks = function(chart) { 
    var ind, d, newD, additionalLength = 8; 
    Highcharts.each(chart.xAxis[0].getMinorTickPositions(), function(p, i) { 
     if (i % 2 === 0) { 
     d = chart.xAxis[0].minorTicks[p].mark.d; 
     ind = d.lastIndexOf(' '); 
     length = parseFloat(d.substring(d.lastIndexOf(' '), d.length)) + additionalLength; 
     newD = d.substring(0, d.lastIndexOf(' ') + 1) + length; 
     chart.xAxis[0].minorTicks[p].mark.attr({ 
      d: newD 
     }); 
     } 
    }) 
    } 

在这里你可以看到一个例子是如何工作的：https://jsfiddle.net/pso8yya7/2/

您也可以用不同的刻度长度和不同tickInterval添加新的x轴。

xAxis: [{ 
    type: "datetime", 
    tickInterval: 60 * 60 * 1000, 
    minorTickInterval: 15 * 60 * 1000, 
    minorTickWidth: 1, 
    tickLength: 25, 
    minorTickLength: 10, 
    labels: { 
    y: 30, 
    } 
}, { 
    type: "datetime", 
    tickInterval: 30 * 60 * 1000, 
    tickLength: 20, 
    offset: 0, 
    linkedTo: 0, 
    labels: { 
    enabled: false 
    } 
}], 

在这里你可以看到一个例子是如何工作的： https://jsfiddle.net/pso8yya7/3/

最好的问候。