Verwendung von Jqplot zum Anzeigen von zwei Gruppen von verschiedenfarbigen Balken in demselben gestapelten Balkendiagramm

Wenn Sie die Option stackSeries: true einstellen, wird die gewünschte Anzeige für Balkendiagramme erstellt.

Offizielle Quellen:

• jqPlot Quellcode: Quellcode, Version 1.0.8r1250 von 2013-03-27. Für dieses Problem, src/jqplot.core.js Zeilen 2499, 2563 und 2649.
• jqPlot-Dokumentation: Es besagt, dass die API-Dokumentation am genauesten ist. Sie können auch die Webseite , README.txt, optionsTutorial.txt, jqPlotOptions.txt, jqPlotOptions.txt , jqPlotCssStyling.txt, usage.txt, changes.txt in der 1.0.8r1250 allgemeine Veröffentlichung

Die jqPlot-Dokumentation ist nicht auf dem neuesten Stand, also habe ich mir die Quellcode . Leider gibt es keine Möglichkeit, zwei Sätze von Balken mit einem gestapelten Balkendiagramm direkt zu haben. Die Eigenschaft jqPlot.stackSeries ist nur ein boolescher Wert. Es ist nur die Funktion, jqPlot zu sagen, dass jede Reihe so viele Balken übereinander gestapelt werden soll, wie es Werte in den verschiedenen Reihen gibt. Jede Serie wird mit einem Wert pro Balken dargestellt, wobei sich die erste Reihe unten befindet. Mit anderen Worten, alle [0] -Werte werden im ersten Balken, [1] -Werte im zweiten Balken usw. dargestellt. Der in der Leiste angezeigte Wert ist die Summe des [n] -Werts für die aktuelle Reihe und alle vorherigen Reihen. Es gibt keine Möglichkeit anzugeben, dass es zwei oder mehr Gruppierungen von Reihen gibt. Die Fähigkeit, das Gewünschte zu tun, existiert in jqPlot nicht.

Aber Sie können erreichen, was Sie wünschen:

Die Tatsache, dass jqPlot nicht nativ unterstützt, was Sie wollen, bedeutet nicht, dass Sie es nicht tun können, sondern nur, dass Sie kreativ werden müssen.

Der gewünschte Graph kann als zwei getrennte Graphen betrachtet werden, die übereinander gelegt wurden, wobei der Abstand zwischen den Balken der einzelnen Graphen ausreicht, um genügend Platz ( seriesDefaults.rendererOptions.barMargin ) für die Balken des anderen Graphen zu überlagern neben ihnen.

Sie können jqPlot verwenden, um Folgendes zu erstellen:

In diesem Diagramm sind der Maßstab, der Hintergrund und die Gitternetzlinien sichtbar. Beachten Sie, dass das Diagramm einen zusätzlichen Balken enthält. Dies ist erforderlich, um genügend Hintergrund- und Rasterlinien für den letzten Balken des anderen Diagramms bereitzustellen.

Sie können jqPlot auch verwenden, um das zweite Diagramm zu erstellen:

In diesem Diagramm sind der Maßstab und die Gitterlinien in jqPlot so eingestellt, dass sie nicht sichtbar sind.

Der Hintergrund wird auf transparent gesetzt. Beachten Sie, dass Sie die Position dieses Diagramms etwas nach rechts verschieben müssen, wenn Sie <div> relativ zum ersten Diagramm positionieren.

Überlagert, Sie enden mit:

Sie verwenden dann eine leere <div> mit der gleichen Hintergrundfarbe wie die Hintergrundfarbe Ihrer Webseite und überlagern diese, um den zusätzlichen Balken des ersten Graphen zu überdecken, aber genug vom Hintergrund und den Gitterlinien des ersten Graphen zu verlängern ein bisschen nach dem letzten Balken des zweiten Graphen.

Sie werden enden mit:

Sie können eine funktionierende Lösung bei JSFiddle mit jqPlot 1.0.8r1250 sehen.

Vergleicht man die ursprüngliche Anfrage mit der endgültigen Version des Graphen, der mit dieser Methode erstellt wurde, sieht man, dass sie sehr nahe sind: Der auffälligste Unterschied zwischen den beiden ist der größere Abstand zwischen der Y-Achse in der jqPlot-Version. Leider scheint es keine Option zu geben, diesen Betrag für gestapelte Balkendiagramme zu reduzieren.

Beachten Sie, dass das Fehlen eines Rahmens auf der rechten Seite des Diagramms, das dieser Code erzeugt, beabsichtigt ist, weil es in der ursprünglichen Anforderung nicht vorhanden war. Persönlich bevorzuge ich einen Rand auf der rechten Seite des Graphen. Wenn Sie das CSS ein wenig ändern, ist das leicht zu bekommen: Meine bevorzugte Version des Diagramms enthält einen Rand auf der linken Seite und gleicht das Leerzeichen aus:

Sie können ein funktionierendes JSFiddle dieser Version sehen.

Alles in allem ist es nicht so schwierig. Es wäre natürlich einfacher, wenn jqPlot mehrere Sätze von Balken unterstützt. Hoffentlich wird es irgendwann. Die letzte Veröffentlichung war 2013-03-27 und es scheint keine Entwicklungsarbeit nach dieser Zeit gegeben zu haben. Zuvor gab es alle paar Monate Releases. Aber jqPlot wird unter den GPL- und MIT-Lizenzen veröffentlicht, damit jeder die Arbeit fortsetzen kann.

Der obige Code basiert auf der Beispielseite, die in der Frage aufgeführt ist.

Praktische Lösung ...

Bild: