Highcharts: Hinzufügen eines benutzerdefinierten Labels zu yAxis

Ich verwende Highcharts und ich weiß, dass die yAxis Etiketten automatisch generiert werden.Highcharts: Hinzufügen eines benutzerdefinierten Labels zu yAxis

Die Sache ist, ich habe diese 3D-Grafik, in der abgesehen von den Daten gibt es eine feste "Ziel" -Linie, auf der wir vergleichen, welcher Datensatz über oder unter es ist.

Da 3D-Graphen Linien nicht sehr gut darstellen, habe ich eine PlotLine verwendet und sie funktioniert wunderbar. Das Problem tritt auf, wenn ich versuche zu zeigen, wie groß dieses "Ziel" ist, denn obwohl es an der richtigen Position ist, wäre es nett, diesen Zielbetrag anzuzeigen.

Was ich tun möchte, ist auf der linken Seite des Diagramms den Wert dieser Linie anzuzeigen, so dass jeder, der es sieht, in der Lage zu wissen, wie viel das Ziel für diesen bestimmten Datensatz ist.

Hier ist ein Screenshot von der Grafik und umkreiste den Ort, wo ich die benutzerdefinierte Beschriftung hinzufügen möchten: Graph screenshot

Im Inneren des roten Kreis ist, wo ich diese benutzerdefinierte Zeichenfolge hinzufügen möchten (die Prozentzahl sein sollte) .

Ich schätze jede Hilfe, die Sie Jungs bieten können. Vielen Dank!

Quelle

2017-07-18 José Colina

Ich denke, dass Sie in der Lage sein sollten, benutzerdefiniertes Etikett Ihr Diagramm renderer.text zu verwenden, für das Hinzufügen von: http://jsfiddle.net/0hyaevax/ –

@ GrzegorzBlachliński danke für Ihre Antwort. Das funktioniert gut, und ich hatte nicht daran gedacht, Renderer-Text zu verwenden. Ich dachte über yAxis-Labels nach. Es funktioniert gut für die Standardansicht, aber da mein Graph Betrachtungswinkel beweglich ist, ist das Problem, dass es an der gleichen Stelle bleibt. [link] (http://prntscr.com/fx8iab) –

Sie möchten also etwas Ähnliches wie dieses Beispiel erreichen? http://jsfiddle.net/0hyaevax/2/ –

Sie können renderer.text zum Hinzufügen von benutzerdefiniertem Text in Ihrem Diagramm verwenden. http://api.highcharts.com/highcharts/Renderer.text

load: function() { 
    var chart = this, 
     yAxis = chart.yAxis[0], 
     plotLine = yAxis.plotLinesAndBands[0], 
     pLPath = plotLine.svgElem.d; 
    chart.renderer.text('CUSTOM LABEL', parseFloat(pLPath.split(' ')[7]) - 100, parseFloat(pLPath.split(' ')[8])).addClass('cT').attr({ 
     fill: 'red' 
    }).add(); 
    },

In dem obigen Code I plotline Pfad verwenden.

anschauliches Beispiel, wie Ihr Diagramm arbeiten kann:

http://jsfiddle.net/0hyaevax/2/

Quelle

2017-07-19 11:09:39

Highcharts: Hinzufügen eines benutzerdefinierten Labels zu yAxis

Antwort

Verwandte Themen