Wie füge ich eine zweite Y-Achse für Balken- und Liniendiagramme in Chart.js hinzu?

Ich versuche, in Chart.js eine doppelte Y-Achse für zwei Datensatzvergleiche hinzuzufügen. Ich verwende derzeit die LineBar-Erweiterung von Leigh Quince. Die Antwort finden Sie hier: Chart.js Wie erhält man kombinierte Balken- und Liniendiagramme?

Es gibt auch eine Lösung, die vor ungefähr einem Jahr für die doppelte Y-Achse geschrieben wurde, jedoch nur für ein Liniendiagramm, und die nicht mehr mit Nicks Master synchron ist. Es scheint, als gäbe es entweder Linien- und Balkendiagramme oder Doppel-Y, aber nicht beide.

Mein Problem hier ist, dass ich TSAT% (Sättigungswerte), linke Y-Achse, Liniendiagramm, zur Menge der Ferritin-Dosierungswerte, rechte Y-Achse, Balkendiagramm darstellen muss. So muss es aussehen:

(Stackoverflow hat anscheinend die Farbe bei mir geändert, ich hoffe, Sie können die Y-Achsen-Skalen noch lesen.)

Wenn jemand eine Lösung finden kann, wäre ich sehr dankbar.

Aktueller 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 habe Quinces LineBar so geändert, dass zuerst Bar und dann Linien gerendert werden. Der Code hatte es ursprünglich umgekehrt. Aus diesem Grund kann ich möglicherweise nichts zu jsfiddle hinzufügen. Ich bearbeite und füge einen Link hinzu, wenn es mir gelingt, dort ein Beispiel hinzuzufügen.

Vielen Dank

Antworten auf die Frage(2)

Ihre Antwort auf die Frage