Images actives: étiquettes annuelles xAxis centrées entre les graduations

Question

Je dessine un graphique linéaire avec des points de données mensuels. Cependant, je veux que l'échelle affiche uniquement les chaînes de l'année. Jusqu'à présent, si facile. Cependant, pour autant que je puisse voir, les Highcharts dessinent toujours les étiquettes xAxis par rapport aux ticks ... et je dois les afficher centrées entre les ticks. Y a-t-il un moyen simple de faire cela que j'ai manqué, s'il vous plaît ...?

Answer 1

Il existe plusieurs options xAxis qui peuvent vous aider à faire ce que vous voulez.

http://api.highcharts.com/highcharts#xAxis.labels

Jetez un oeil à « aligner » qui indique si les étiquettes sont à gauche ou à droite de la tique, et aussi « x » qui vous permet de spécifier un décalage x pour l'étiquette de la cocher.

Answer 2

Avez-vous essayé d'utiliser le placement de tiques? http://api.highcharts.com/highcharts#xAxis.tickmarkPlacement

Answer 3

Selon ma compréhension, le comportement que vous désirez est:
http://jsfiddle.net/msjaiswal/U45Sr/2/

Laissez-moi de briser la solution:
1. Données mensuelles Points
Un point de données correspondant à un mois:

var data = [ 
    [Date.UTC(2003,1),0.872], 
    [Date.UTC(2003,2),0.8714], 
    [Date.UTC(2003,3),0.8638], 
    [Date.UTC(2003,4),0.8567], 
    [Date.UTC(2003,5),0.8536], 
    [Date.UTC(2003,6),0.8564], 
    .. 
] 

2. échelle pour afficher uniquement les tiques annuelle
Utilisez les options de tableau comme celui-ci:

 xAxis: { 
     minRange : 30 * 24 * 3600 * 1000, // 
     minTickInterval: 12* 30 * 24 * 3600 * 1000 // An year 
    }, 

Answer 4

Cela peut être fait avec une solution de contournement en ajustant manuellement le positionnement de l'étiquette par un rappel (appelé à la fois la charge et redessiner). S'il vous plaît voir le violon lié à dans mon commentaire sur ce post: Highcharts - how can I center labels on a datetime x-axis?

Answer 5

Il n'y a pas de solution simple, prêt à l'emploi. Vous devez utiliser des événements et repositionner les étiquettes en conséquence. Voici une solution d'échantillon qui fonctionne également lors du redimensionnement de la fenêtre du navigateur (ou autrement forcer le graphique à redessiner), même lorsque les changements de nombre de tics: http://jsfiddle.net/McNetic/eyyom2qg/3/

Il fonctionne en attachant le même gestionnaire d'événements à la fois la load et redraw événements:

$('#container').highcharts({ 
    chart: { 
    events: { 
     load: fixLabels, 
     redraw: fixLabels 
    } 
    }, 
[...] 

Le gestionnaire lui-même ressemble à ceci:

var fixLabels = function() { 
    var labels = $('div.highcharts-xaxis-labels span', this.container).sort(function(a, b) { 
    return +parseInt($(a).css('left')) - +parseInt($(b).css('left')); 
    }); 
    labels.css('margin-left', 
    (parseInt($(labels.get(1)).css('left')) - parseInt($(labels.get(0)).css('left')))/2 
); 
    $(labels.get(this.xAxis[0].tickPositions.length - 1)).remove(); 
}; 

Fondamentalement, cela fonctionne comme ceci:

1. Récupère toutes les étiquettes existantes (lorsqu'elles sont redessinées, cela inclut les nouvelles ajoutées). 2. Trier par la propriété css 'left' (ils ne sont pas triés de cette manière après un nouveau dessin)
2. Calculer le décalage entre les deux premières étiquettes (le décalage est le même pour toutes les étiquettes)
3. Définir la moitié du décalage en tant que marge -lors de toutes les étiquettes, en les décalant efficacement de la moitié du décalage vers la droite.
4. Retirer l'étiquette la plus à droite (déplacée à l'extérieur de la carte, parfois partiellement visible).