переменной длины клеща в Highcharts

Question

нужно создать гистограмму, где клещи х-оси, как на изображении ниже:

1. один длинный тик каждый час
2. один короткий клеща каждые 30
3. один короткий клещ каждые 15 минут

мне удалось иметь две различные длины с tickLength и minorTickLength, как вы можете видеть из этого fiddle 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/

Вы также можете добавлять новые XAxis с различной длиной клеща и различных tickInterval.

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/

С наилучшими пожеланиями.