Highcharts Format Etiketten auf gruppierten gestapelten Balkendiagramm mit $ k, M für die Währung und 'Std' für die Zeit

Question

Ich verwende highcharts. Ich habe ein gruppiertes gestapeltes Balkendiagramm, das Umsatz und Stunden als die zwei Reihen enthält, mit Rechnung/nicht berechnet als die gestapelte Reihe. Ich möchte die Etiketten auf den Bars für Stunden, abgekürzt K/M und das gleiche für Währungsbalken zeigen (aber mit '$' vor der Nummer).

Ich habe es geschafft, dies auf beiden Y-Achse zu tun, aber ich konnte dies nicht auf den Etiketten über jeden Balken (und die Summenbeschriftungen an der Spitze) sowie den Tooltip erreichen.

Das fertige Produkt soll:

1. RHS yAchse mit k für Tausende und M für Millionen. Jetzt beginnt es mit k und bleibt so. Ich will k für die Tausende und M, wie es in Millionen Werte schreitet. Ich möchte die $ davor (wie es ist).

2. LHS-Achse sieht jetzt OK aus, aber es hat das gleiche Problem, wenn die Daten 1 Million oder mehr erreichen. Es sollte wie Punkt 1 ohne das Symbol $ funktionieren.

3. Die Etikett auf jedem Balken sind als ihre jeweilige y-Achse in der gleichen Art und Weise zu formatieren ($ und k und M für Umsatz und nur die k und M, aber mit einer Dezimalstelle für Stunden).

4. Die Tooltips sollten auch wie die Etiketten in Punkt zu formatieren 3.

mein jsfiddle das Diagramm Hier zeigt. Ich kann kein Beispiel dafür finden. Danke für Anregungen.

Answer 1

Das ist eine gute Frage. Ich habe eine Geige bearbeitet (http://jsfiddle.net/brightmatrix/uy81h3os/3/), die die meisten Ihrer Fragen beantwortet, sowie einige Vorschläge, von denen ich hoffe, dass Sie sie hilfreich finden.

Zunächst können Sie für Ihre Achsenbeschriftungen das formatter-Attribut innerhalb von labels in jeder der Achsen verwenden, um festzulegen, wie Sie sie anzeigen möchten. Für Ihren Umsatz habe ich das Präfix "$" eingefügt; Ich habe einen stundenlang nicht eingeschlossen.

Ich verwendete die Highcharts.numberFormat() Funktion in der formatter für jede Achse. Dies fügt Ihren Zahlen ein Tausendertrennzeichen (Komma) hinzu und korrigiert die Dezimalpunkte (der zweite Parameter in dieser Funktion). Stundenlang hatten Sie Bruchteile von Stunden, also habe ich die Anzahl der Dezimalstellen auf 1 gesetzt. Für den Umsatz habe ich die Anzahl der Dezimalstellen auf 0 festgelegt. Fühlen Sie sich frei, diese zu ändern, wie Sie es für richtig halten.

Wie bei den K/M-Etiketten würde ich dringend empfehlen, die Werte in Tausend zu fixieren und dies in den Achsentiteln anzugeben (z. B. "Umsatz (in Tausend)"). Dies wird typischerweise in Wirtschafts- und Finanzdiagrammen durchgeführt und macht die Etiketten für Ihre Benutzer klar und konsistent. Sehen Sie sich meine Änderungen an den Attributen Ihrer Achsentiteltexte an.

Hier ist der vollständige Code für die y-Achse:

yAxis: [{ 
    title: { 
    text: 'Hours (in thousands)' 
    }, 
    labels: { 
    formatter: function() { 
     return Highcharts.numberFormat(this.value/1000,0) 
    } 
    }, 
    reversedStacks: false, 
    stackLabels: { 
    enabled: true, 
    formatter: function() { 
     return Highcharts.numberFormat(this.total,1) 
    } 
    }, 
}, { 
    title: { 
    text: 'Revenue (in thousands)' 
    }, 
    labels: { 
    formatter: function() { 
     return '$' + Highcharts.numberFormat(this.value/1000,0) 
    } 
    }, 
    stackLabels: { 
    enabled: true, 
    formatter: function() { 
     return '$' + Highcharts.numberFormat(this.total,0) 
    } 
    }, 
    opposite: true, 
    reversedStacks: false 
}], 

Ich habe eine andere Änderung Ihrer Geige, die Sie an der Spitze sehen werden.Dies fügt ein Tausendertrennzeichen für alle Ihre Zahlen hinzu, so dass sie wie zuvor bei 10,000 statt 10 000 angezeigt werden. Hier ist der Code:

Highcharts.setOptions({ 
    lang: { thousandsSep: "," } 
}); 

Dies ist eine globale Funktion, so dass Sie diese platzieren direkt wollen werden, bevor Sie Ihren Chart-Code.

Ich werde etwas über Ihre Tooltip-Formatierung recherchieren und diese Antwort mit weiteren Details bearbeiten.