Highcharts: Datenbeschriftungen für Kreisdiagramme werden außerhalb der Leinwand gezeichnet

Ich habe dieses Problem auch - ich denke, dies sollte eher als Fehler denn als Verbesserung bezeichnet werden, da die Software nicht wie erwartet funktioniert

+1 zu diesem Problem, könnte die Größe des Kuchens je nach Datenbeschriftung automatisch angepasst werden??

+1

Auch hier +1. Mein Unternehmen hat vor kurzem eine Lizenz zur Nutzung dieser Software erworben. Diesen Fehler zu beheben wäre eine große Hilfe. Kann sich jemand bei Highslide mit Priorität/Kommentar dazu einmischen, was hier vor sich geht? Diese ist seit einem Jahr geöffnet.

+1. Was Randallmorey sagte - genau die gleiche Situation. Stimmen Sie auch Rowanmanning zu, Dinge abzuhacken ist ein Fehler.

Dieser Fehler wurde vor 2 Jahren geöffnet. Irgendein Fortschritt? Piecharts sind für uns nutzlos, wenn die Etiketten abgehackt werden.
Es ist immer noch als Verbesserung gekennzeichnet.

Den Platzbedarf für Datenetiketten zu ermitteln ist sehr kompliziert, und wir
wird ihm zu diesem Zeitpunkt nicht die höchste Priorität einräumen. Sie müssen die entsprechenden hinzufügen
Ränder und Tortengröße, um dies zu vermeiden. Sie können auch den Breitenstil der
dataLabels, um Zeilenumbrüche zu erzwingen.

+1

Ich habe auch dieses Problem.

Dies sollte als Bug markiert werden, Enhancement bedeutet, dass es richtig funktioniert, aber verbessert werden kann, was hier offensichtlich nicht der Fall ist.
+1

hey @highslide-software, wird es dafür eine Lösung geben? Kann ein Canvas-basiertes Diagramm eine mögliche Lösung sein?

+1

+1 Dieses Problem habe ich auch.

ich auch

Okay Leute, ich werde versuchen eine Lösung zu finden. Wir brauchen eine rekursive Logik, die Datenlabels zeichnet, herausfindet, ob sie überschwappen, und dann die Größe des Kuchens rekursiv verkleinert, bis alle Labels vorhanden sind.

Folgendes haben wir gemacht:

• Die Standardoption für die Tortengröße wurde auf null geändert. Wenn die Kreisgröße null ist, wird der Kreis automatisch in den Plotbereich eingepasst. Wenn Datenbeschriftungen deaktiviert sind, füllen die Kreise den Plotbereich vollständig aus. Wenn Datenbeschriftungen aktiviert sind, werden die Datenbeschriftungen auch in den Plotbereich eingepasst.
• Die Standardoption für das Tortenzentrum wurde in [null, null] geändert. Die Zentrierung wird für die X- und Y-Option unabhängig gehandhabt. Null bedeutet automatisch, sodass der Kreis immer dann in den Plotbereich passt, wenn die Größe ebenfalls Null ist.
• Option minSize hinzugefügt. Wenn die Größe null ist, wird sie nicht unterschritten.

Demos:

• http://jsfiddle.net/highcharts/CjgLg/ . Fassen Sie den Größenänderungsgriff unten rechts an, um zu sehen, wie die automatische Größe gehandhabt wird.
• http://jsfiddle.net/highcharts/9tqSn/ . Als Folge der dynamischen Größe kann sich die Größe des Kuchens selbst abhängig von den vorhandenen Datenbeschriftungen ändern. Beachten Sie, wie sie sich ändert, wenn Slices in dieser Demo ein- und ausgeblendet werden.

Alle Kommentare sind willkommen!

Ich habe eine Reihe wirklich langer Datenlabels (ich kann sie nicht wirklich kürzer machen), die wahrscheinlich dazu führen, dass das Diagramm absurd winzig ist. Gibt es eine Möglichkeit, die Etiketten automatisch auf zwei oder drei Zeilen umbrechen zu lassen, wenn sie eine bestimmte Breite überschreiten?

Danke!

Ja, ich denke, Sie können dataLabels.style.width auf beispielsweise '100px' setzen.

Vielen Dank dafür - Gibt es eine Schätzung, wann dies in 'Master' oder in einer Veröffentlichung zusammengeführt wird?

Ich habe einen Fall, in dem ich mehrere Tortendiagramme auf einer Seite in einer 2x2-Formation anzeigt. Jeder Kuchen hat die gleichen Beschriftungen, aber unterschiedliche Daten.

Diese Lösung kann also 4 unterschiedlich große Torten erzeugen, was nicht wünschenswert ist - gibt es eine Möglichkeit, dies zu vermeiden und die Etiketten trotzdem passend zu machen? Ich möchte wirklich, dass die Datenlabels an das Diagramm angepasst werden, nicht an den Kuchen. Danke im Voraus.

Dies wird veröffentlicht und in Master zusammengeführt, wenn Highcharts 3.0 herauskommt, hoffentlich noch vor Weihnachten.

Falls Sie mehrere Kreise in demselben Diagramm haben, müssen Sie dennoch die absolute Größe verwenden. Theoretisch könnte das, was Sie beschreiben, gelöst werden, indem Sie jeden Kuchen anpassen und dann die kleinste Kuchengröße für alle verwenden. Ich bin mir jedoch nicht sicher, wie dies in der Praxis funktionieren wird, da die Torten innerhalb des Plotbereichs und nicht relativ zueinander angepasst werden.

@highslide-software Beachten Sie, dass die obigen Beispiele aufgrund des CDN für Highcharts nicht funktionieren. Ich habe die Geigenbeispiele für alle, die sich dafür interessieren, korrigiert:

http://jsfiddle.net/CjgLg/13/ . Fassen Sie den Größenänderungsgriff unten rechts an, um zu sehen, wie die automatische Größe gehandhabt wird.
http://jsfiddle.net/9tqSn/11/ . Als Folge der dynamischen Größe kann sich die Größe des Kuchens selbst abhängig von den vorhandenen Datenbeschriftungen ändern. Beachten Sie, wie sie sich ändert, wenn Slices in dieser Demo ein- und ausgeblendet werden.

Danke für die Fehlerbehebung! +1 :)

Ich habe ein Problem mit dieser Funktion zur automatischen Größenanpassung bei Donuts. Es funktioniert gut für einzelne Torten, aber wenn es auf einem 2er Torte (dh einem Donut) verwendet wird, werden sowohl die inneren als auch die äußeren Torten unabhängig voneinander in der Größe angepasst. Insbesondere wenn der innere Kreis keine spinnenähnlichen Legenden aufweist und der äußere Kreis diese, wird die Größe des inneren Kreises überhaupt nicht geändert und der äußere Kreis wird tatsächlich so angepasst, dass er in das Ansichtsfenster passt. Dies führt zu einem verzerrten Diagramm (normalerweise wird der innere Kreis breiter als der äußere Kreis, wodurch das Aussehen und die Semantik des Diagramms vollständig zerstört werden).

Besteht die Möglichkeit, dass Sie diesen Fix auch auf die Unterstützung von Donuts als einen einzigen großen Kuchen ausweiten?

Hier ist ein Beispiel: http://jsfiddle.net/mmarchetta/34VAT/2/

Der Kuchen, der dort der äußere zu sein scheint (grün/blau), ist eigentlich der innere Kuchen, und der mit mehr Scheiben, der wie der innere aussieht, ist tatsächlich der äußere.

Danke!

Ich habe das gleiche Problem mit dem Donut-Diagramm, die Beschriftungen erstrecken sich außerhalb des Diagramms.

Dieser Fall zeigt, wie Etiketten abgeschnitten werden: http://jsfiddle.net/highcharts/7okk430t/

Ich habe daran gearbeitet und die Logik untersucht, um Auslassungspunkte zu überlaufenden Datenbeschriftungen hinzuzufügen. Es funktioniert derzeit gut bei statischen Diagrammen, bricht jedoch bei dynamischer Größenänderung oder Aktualisierung des Diagramms ab.

Eine Live-Demo finden Sie unter http://jsfiddle.net/highcharts/7okk430t/1/.

.. und hier ist das Diff:

diff --git a/js/parts/DataLabels.js b/js/parts/DataLabels.js
index c72fabf..a7222c5 100644
--- a/js/parts/DataLabels.js
+++ b/js/parts/DataLabels.js
@@ -619,13 +619,41 @@ if (seriesTypes.pie) {
     * fall within the plot area.
     */
    seriesTypes.pie.prototype.placeDataLabels = function () {
+
+       var chart = this.chart,
+           spacing = chart.spacing;
        each(this.points, function (point) {
            var dataLabel = point.dataLabel,
-               _pos;
+               _pos,
+               overflow,
+               ellipsis;

            if (dataLabel && point.visible) {
                _pos = dataLabel._pos;
                if (_pos) {
+                   
+                   if (dataLabel._attr.align === 'right') {
+                       overflow = _pos.x - dataLabel.width;
+                       if (overflow < spacing[3]) {
+                           ellipsis = true;
+                       }
+                   }
+
+                   if (dataLabel._attr.align === 'left') {
+                       overflow = chart.chartWidth - _pos.x - dataLabel.width - spacing[1] - spacing[3];
+                       if (overflow < spacing[1]) {
+                           ellipsis = true;
+                       }
+                   }
+
+                   if (ellipsis) {
+                       dataLabel._attr.width = dataLabel.width + overflow;
+                       dataLabel.css({
+                           width: dataLabel._attr.width + PX,
+                           textOverflow: 'ellipsis'
+                       });
+                   }
+
                    dataLabel.attr(dataLabel._attr);
                    dataLabel[dataLabel.moved ? 'animate' : 'attr'](_pos);
                    dataLabel.moved = true;
diff --git a/js/parts/SvgRenderer.js b/js/parts/SvgRenderer.js
index 1f8b71d..fcc629d 100644
--- a/js/parts/SvgRenderer.js
+++ b/js/parts/SvgRenderer.js
@@ -10,7 +10,7 @@ SVGElement.prototype = {
    opacity: 1,
    // For labels, these CSS properties are applied to the <text> node directly
    textProps: ['fontSize', 'fontWeight', 'fontFamily', 'fontStyle', 'color', 
-       'lineHeight', 'width', 'textDecoration', 'textShadow'],
+       'lineHeight', 'width', 'textDecoration', 'textOverflow', 'textShadow'],

    /**
     * Initialize the SVG renderer

Ich habe das Javascript von hier (http://jsfiddle.net/CjgLg/13/) ausprobiert und bekomme Folgendes:

Nicht abgefangener TypeError: $(...).resizable ist keine Funktion

Die Methode resizable erfordert die jQuery-Benutzeroberfläche.

Ah ... importierte diese 2 (jquery-ui.css und jquery-ui.min.js) und funktioniert jetzt gut, danke!

Ich habe auch Datenetiketten abschneiden lassen.

+1 für die Ellipsenlösung, die in hohe Diagramme implementiert werden soll.

Warum ist dieses Thema geschlossen? Es wurde 2011 gestartet, aber ich habe dieses Problem 2017 immer noch.

Das passiert immer noch

Ich verwende die Version 5.0.11
Und es passiert immer noch auf dem Donut-Chart.