Gewusst wie: hinzufügen der zweiten Y-Achse für Balken-und Liniendiagramm in Chart.js?

Ich versuche, fügen Sie ein Doppel-Y-Achse in Chart.js für zwei dataset-Vergleiche. Ich bin derzeit mit Leigh Quitte ist LineBar Erweiterung, die die Antwort finden Sie hier: Chart.js wie man Kombinierte Balken-und Liniendiagrammen?

Gibt es auch eine Lösung geschrieben, vor etwa einem Jahr für das doppelte Y-Achse, aber nur für eine Linie charts, und seine Art, out-of-sync mit Nick ist master. Scheint es gibt entweder Linien-und Balkendiagramme, oder Doppel-Y, aber nicht beide.

Mein Problem hier ist, dass ich zu vertreten TSAT % (Sättigung), linke Y-Achse, Linien-Diagramm, um die Höhe der Ferritin-Dosierung, Rechte Y-Achse-Balkendiagramm. Hier ist, was ich brauche, dass es so Aussehen:

Gewusst wie: hinzufügen der zweiten Y-Achse für Balken-und Liniendiagramm in Chart.js?

(Scheint Stackoverflow hat sich verändert und die Farbe auf mich, hoffe man kann noch Lesen die Y-Achse skaliert)

Wenn jemand comp eine Lösung wäre ich sehr dankbar.

Aktuelle code:

            var data = {
                labels: ["Jun 2013", "Jul 2013","Aug 2013","Sep 2013","Oct 2013","Nov 2013","Dec 2013", "Jan 2014", "Feb 2014", "Mar 2014", "Apr 2014", "May 2014"],
                datasets: [

                    {
                        label: "TSAT",
                        type: "line",
                        fillColor: "transparent",
                        strokeColor: "#a33a59",
                        pointColor: "#a33a59",
                        pointHighlightStroke: "#FFF",
                        data:[33,32.9,32.9,33.2,33.2,33.2,32.7,32.9,32.9,32.7,32.7,32.7]
                    },                  
                    {
                        label: "Ferritin",
                        type: "bar",
                        fillColor: "#ed7141",
                        strokeColor: "#ed7141",
                        data: [939,929,949,991,992,993,976,976,973,986,972,939]
                    }
                ]
            };

            var options = {
                responsive: true,
                scaleOverride: true,
                scaleSteps: 10,
                scaleStepWidth: 5,
                scaleStartValue: 0,
                showTooltips: false,
                pointDot: true,
                pointDotRadius : 10,
                datasetStrokeWidth : 3,
                bezierCurve : false,
                scaleShowLines: false,
                scaleGridLineWidth : 2,
                scaleGridLineColor : "#EEEEEE",
                scaleLineWidth: 3,
                scaleLineColor: "#000000",
                scaleFontFamily: 'Gotham Book,sans-serif',
                scaleFontSize: 18,
            }

            ctx = $("#myChart").get(0).getContext("2d");
            TSATChart = new Chart(ctx).LineBar(data, options);      

BTW... ich modifiziert Quitte ist LineBar zu Rendern Bar zuerst, dann die Linien. Der code ursprünglich hatte es Umgekehrt. Als solcher, ich kann nicht in der Lage sein, etwas zu jsfiddle, werde ich Bearbeiten und einen link hinzufügen, wenn ich mich erfolgreich mit dem hinzufügen von ein Beispiel gibt.

Danke!

  • Hallo, nach der Lektüre dieses habe ich jetzt geändert, meine version zu Rendern bars, dann sind die Linien auch. Cheers, das ist eine viel logischere Reihenfolge.
  • Dank Der Quitte. Sorry für die Aufnahme so lange, um danke zu sagen, aber ich hatte nicht die Kommentar-Rechte für eine Weile dort. Dieses Projekt hat bestanden, aber Ihre code-änderung ist sehr nützlich. 🙂
  • Eine funktionierende JSFiddle-Beispiel - jsfiddle.net/fixit/yny5f4s6
  • Hi das prob ein bisschen spät jetzt, aber nur, damit Sie wissen, habe ich endlich eine Funktion Hinzugefügt, für mehrere y-Achsen, eine vollständige Antwort auf eine ähnliche Frage gepostet vor kurzem stackoverflow.com/questions/33236941/...
InformationsquelleAutor JBMcClure | 2015-01-21
Schreibe einen Kommentar