Kombinieren Bar und Liniendiagramm in Javascript

Question

Erstens: Bitte sanft sein, ich bin ein newb mit JS

Ich habe ein Armaturenbrett und ich bin ein Diagramm mit JS zu schaffen. Ich arbeite an einer Vorlage, die bereits einige Beispiele hatte, also mache ich Dinge, indem ich folge, was bereits da war.

Ich habe ein Balkendiagramm, aber ich möchte ein Liniendiagramm darüber hinzufügen.

Ist das möglich? Und wenn ja, wie?

Ich glaube, ich bin mit Chart.min.js (früher in doc importiert)

Hier mein js ist (abzüglich der Daten), um die Grafik zu erzeugen.

<script> 
window.onload = function(){ 
    // Bar Chart from barChartData 
    var ctx = document.getElementById("chart-bar").getContext("2d"); 
    window.myBar = new Chart(ctx).Bar(barChartData, { 
    responsive : true 
    }); 
</script> 

der Hoffnung, jemand kann mir helfen, mit dieser ... Ich bin gut mit dem HTML, Python, Flask, mySQL, etc ..... aber js ist noch ganz neu, aber ich lerne :-).

Answer 1

Ja, es ist möglich.

Mit Chart.js können Sie Diagramme mit mehreren Datensätzen erstellen. Die Datensätze müssen nicht vom gleichen Typ sein, so dass Sie einen Datensatz mit Linien und ein weiteres mit Bars wie folgt erstellen:

datasets: [{ 
     // set one for your bars 
     type: 'bar', 
     data: [1, 2, 3, ... ] // your data for the bar chart 
     }, { 
     // set two for your lines 
     type: 'line', 
     data: [4, 5, 6, ... ] // your data for the line chart 
     }] 

und dann das Diagramm mit den Datensätzen erstellen

window.myBar = new Chart(ctx, { 
     type: 'bar', 
     data: barChartData, 
     responsive : true, 
     // other settings ... 
     }); 

Sie können etwas Inspiration von meinem Arbeitsbeispiel nehmen here