web-dev-qa-db-fra.com

Chart.js change la couleur de la barre

J'utilise chart.js pour visualiser un algorithme de tri. Jusqu'à présent, je n'ai eu aucun problème à le mettre en œuvre. Maintenant, je veux changer la couleur d'une seule barre dans mon graphique et je n'arrive pas à comprendre comment le faire.

Il y a un post qui devrait répondre à ma question, mais cette solution ne fonctionne pas pour moi.

HTML

<!DOCTYPE html>
<html>
  <head>
    <script src="jquery-3.0.0.js"></script>
    <script src="script.js"></script>
    <script src="jquery-ui.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/color/jquery.color-2.1.2.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.bundle.js"></script>
    <link rel="stylesheet" href="stylesheet.css">
    <link rel="stylesheet" href="jquery-ui.css">

  <title>Shell Sort</title>
  </head>
  <body>
    <button class='button' id='fillChart'>Elements</button>
    <button class='button' id='sort'>Sort</button>
    <canvas height='75' width='300' id='barChart'></canvas>
  </body>
</html>

CSS

body{
    background-color:#F8FBEF;
}
.button {
    position: relative;
    background-color: #1C1C1C;
    border: none;
    font-size: 28px;
    color: #FFFFFF;
    padding: 20px;
    width: 200px;
    text-align: center;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
}

.button:after {
    content: "";
    background: #f1f1f1;
    display: block;
    position: absolute;
    padding-top: 300%;
    padding-left: 350%;
    margin-left: -20px !important;
    margin-top: -120%;
    opacity: 0;
    transition: all 0.8s
}

.button:active:after {
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s
}

JS

$(document).ready(function(){

  var numbers = [];

//########################---Array Of Random Numbers----########################
  function createNumbers(){
    numbers = [];
    for(var i = 0; i < 6; i++){
      var random = Math.floor((Math.random() * 100) + 1);
      numbers.Push(random);
    }
  };

  //########################---Fill Chart With Array----########################
  $('#fillChart').click(function(){
    barChart.data.datasets[0].backgroundColor = "rgba(192,192,192,1)";
    createNumbers();
    console.log('Not Sorted:');
    for(var i = 0; i < numbers.length; i++){
      console.log(numbers[i]);
    }
    fillData()
    barChart.update();
  });

  //########################---Fill Data With Array----########################
  function fillData(){
    for(var i = 0; i < numbers.length; i++){
      barChart.data.datasets[0].data[i] = numbers[i];
      console.log('Data:' + barChart.data.datasets[0].data[i]);
    }
  }

//##############################---Sort Array----###############################
    $('#sort').click(function(){
      shellSort(numbers);
      console.log('Sorted');
      for(var i = 0; i < numbers.length; i++){
        console.log(numbers[i]);
      }
      fillData();
      barChart.datasets[0].bars[0].backgroundColor = "rgba(000,111,111,55)";
      barChart.update();
    });

  //##############################---shellSort----##############################
  function shellSort (a) {
    for (var h = a.length; h = parseInt(h / 2);) {
        for (var i = h; i < a.length; i++) {
            var k = a[i];
            for (var j = i; j >= h && k < a[j - h]; j -= h)
                a[j] = a[j - h];
            a[j] = k;
        }
    }
    return a;
}

  //##############################---Bar Chart----##############################
  var ctx = $('#barChart');
  var barChart = new Chart(ctx, {
      type: 'bar',
      data: {
          labels: ["Element 1", "Element 2", "Element 3", "Elemenmt 4", "Element 5"],
          datasets: [{
              label: 'Sort',
              data: [0,0,0,0,0],
              backgroundColor: [],
              borderColor: [],
              borderWidth: 1
          }]
      },
      options: {
          scales: {
              yAxes: [{
                  ticks: {
                      beginAtZero:true
                  }
              }]
          }
      }
  });




});
jquerychartscolorsbar-chartchart.js
8
NecNator

J'ai créé un violon basé sur votre code. Cliquez d'abord sur le bouton Éléments pour remplir les données. J'ai changé la couleur d'une barre en cliquant sur le bouton Trier .

Veuillez vérifier Fiddle

4
Aneesh Sivaraman

Essaye ça:

<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
</script>

Comme mentionné sur Documentation

1
Mayank Pandeyz