Möglich, 2 Balken im Balkendiagramm (chart.js) zusammenzuführen

Question

Zur Zeit habe ich ein Balkendiagramm mit 2 Ergebnissen, die Seite für Seite mit chart.js auf Rails 5 vergleichen. Wie im ersten Bild gezeigt.

Es zeigt den aktuellen Spielstand auf der linken Leiste und voller Punktzahl auf der rechten Leiste.

Aber ich habe die Bitte, dass die Balkendiagramme kombinieren und die Legenden für den aktuellen Score und die volle Punktzahl zeigen müssen.

gesucht um, aber es nur gerade gestapeltes Balkendiagramm gefunden. Ist es möglich 2 Bars miteinander zu kombinieren?

Answer 1

Ich habe die Lösung gefunden. Für Chart.js 2.1.x ab (es funktioniert nicht Chart.js 1.xx), können Sie den Datensatz mit benutzerdefinierten Option anwenden, wie unten gezeigt:

var options = { 
    scales:{ 
    xAxes: [{ stacked: true }], 
    yAxes: [{ stacked: true }] 
    } 
}; 

var myBarChart = new Chart(ctx, { 
    type: 'bar', 
    data: data, 
    options: options 
}); 

ich das Diagramm js 2.2 verwenden. 1 Edelstein von this source. Die Hilfsmethode aus Zeile 3-35 bietet einen Einblick in das Erstellen eines gestapelten Balkendiagramms. Irgendwie hat es nicht die Möglichkeit, die Daten von der gegebenen Methode einzugeben. Lassen Sie sich also die Hilfsmethode außer Kraft setzen:

def chart2_bar id=nil, size=nil, data={}, options={} 
    html = "<canvas id=\"myChart_bar\" width=\"#{size[:width]}px\" height=\"#{size[:height]}px\"></canvas>".html_safe 
    script = javascript_tag do 
     <<-END.html_safe 
     var ctx = document.getElementById("myChart_bar"); 
     var data = "#{data.to_json}"; 
     var options = "#{options.to_json}"; 
     var myBarChart = new Chart(ctx, { 
     type: 'bar', 
     data: data, 
     options: options 
     }); 
     END 
    end 
    return html + script 
    end 

Die Daten im JSON-Format sein muss oder sonst würde es als String-Format behandelt werden, und so Fehler. Sie können eine Instanzvariable erstellen und wie gewohnt an die Hilfsmethode übergeben.

Ich würde nicht sagen, das ist die perfekte Lösung, aber es funktioniert gut von der Generierung von HTML und auch PDF (mit breed-pdf).