Stacked bar javascript

Status
Niet open voor verdere reacties.

maximan241

Nieuwe gebruiker
Lid geworden
9 feb 2018
Berichten
1
Ik probeer een stacked bar diagram te krijgen via javascript. Ik krijg het alleen niet voor elkaar dat er 3 opgestapelde delen komen met ieder een andere kleur. Iemand een suggestie? Dit is mijn code:

HTML:

<canvas id="myChart8" width="450" height="150"></canvas>

Javascript:


var ctx = document.getElementById('myChart8').getContext('2d');
var chart8 = new Chart(ctx, {

type: 'bar',


data: {
labels: ["Score1,Score2,Score3"],
datasets: [{
data: [33, 34, 33],
backgroundColor:["#f38b4a","#56d798","#ff8397"],

}]
},

options: {
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true,
}]
}
}
});
 
Is het een opdracht dat het in pure JS geschreven moet worden?
Pak anders gewoon een library op Github of Google.
 
Het lijkt erop dat je Chart.js gebruikt. Dit voorbeeld werkt met Chart.js v2.1
Code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.bundle.min.js"></script>
<canvas id="myChart8" style="max-width:450px; max-height:150px;"></canvas>
<script>
var chart8 = {
  type: "bar",
  data: {
    labels: ["Team 1", "Team 2", "Team 3"],
    datasets: [{
      label: "januari",
      backgroundColor: "#f38b4a",
      data: [18, 24, 35]
    }, {
      label: "februari",
      backgroundColor: "#56d798",
      data: [30, 16, 15]
    }, {
      label: "maart",
      backgroundColor: "#ff8397",
      data: [12, 20, 10]
    }]
  },
  options: {
    scales: {
      xAxes: [{
        stacked: true
      }],
      yAxes: [{
        stacked: true
      }]
    }
  }
};
var ctx = document.getElementById("myChart8").getContext("2d");
new Chart(ctx, chart8);
</script>
Gebruik een <!doctype html> en zet geen , (komma) achter een regel als je daarna een } tegenkomt.

Suc6. Have fun.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan