Отображать ярлыки на второстепенных отметках в Highcharts при использовании tickInterval

Question

На диаграмме Highcharts с datetime ось, я пытаюсь выделить недели. Во-первых, у меня возникла идея использовать сетку и установить 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

НЕСОВЕРШЕННОЛЕТНИЙ КЛЕЩИ

Если параметр 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 
    ... 

UPDATE: Вот немного грубое решение для того, чтобы незначительные клеща этикетки для 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); 
} 

};