Comment puis-je obtenir des flèches à la fin des axes x et y en utilisant highcharts.js?

Question

Je veux obtenir des flèches comme l'image ci-dessus

Answer 1

Vous pouvez vous rendre propres formes et les poser sur le dessus des lignes d'axe. Le rendu de formes personnalisées peut être réalisé via renderer.

Vous pouvez également extend Highcharts de manière à modifier la méthode responsable du rendu d'une ligne d'axe.

Une extension simplifiée pourrait ressembler à ceci:

Highcharts.wrap(Highcharts.Axis.prototype, 'getLinePath', function(p, lineWidth) { 
var linePath = p.call(this, lineWidth); 

if (this.options.arrowOnEnd) { 
    var arrowFactor = 20, 
    x, 
    y, 
    arrowPath, 
    newPath; 

    if (this.horiz) { 
    x = linePath[4] = linePath[4] - arrowFactor; 
    y = linePath[5]; 

    arrowPath = [ 
     'L', x - 0.35 * arrowFactor, y - 0.35 * arrowFactor, 
     'L', x + 1 * arrowFactor, y, 
     'L', x - 0.35 * arrowFactor, y + 0.35 * arrowFactor, 
     'L', x, y 
    ]; 
    newPath = linePath.concat(arrowPath); 
    } else { 
    x = linePath[1]; 
    y = linePath[2] = linePath[2]; // + arrowFactor; 

    arrowPath = [ 
     'M', x, y, 
     'L', x - 0.35 * arrowFactor, y + 0.35 * arrowFactor, 
     'L', x, y - 1 * arrowFactor, 
     'L', x + 0.35 * arrowFactor, y + 0.35 * arrowFactor, 
     'L', x, y 
    ]; 

    newPath = arrowPath.concat(linePath); 
    } 

    return newPath; 
} 

return linePath; 
}); 

CSS pour remplir les flèches:

.highcharts-axis-line { 
    fill: black; 
    stroke-linejoin: round; 
} 

exemple: http://jsfiddle.net/z2aagpeu/