Chart.js changer la couleur de la Barre
Je suis en utilisant chart.js pour visualiser un algorithme de tri. Jusqu'à présent je n'ai eu aucun problème pour la mettre en œuvre. Maintenant, je veux changer la couleur d'un seul Bar dans mon Tableau et je ne peux pas comprendre comment le faire.
Il y a un post qui devrait répondre à ma question, cependant, 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
}
}]
}
}
});
});OriginalL'auteur NecNator | 2016-08-03
Vous devez vous connecter pour publier un commentaire.
J'ai créé un violon en fonction de votre code. Cliquez d'abord sur Éléments bouton pour le remplissage des données. J'ai changé la couleur d'une barre en cliquant sur Sorte bouton.
Veuillez vérifier les
ViolonOriginalL'auteur Aneesh Sivaraman
Essayez ceci:
Comme mentionné sur La Documentation
backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', ] ces diff ensembles de couleur rep code de couleur pour chaque barre. De sorte que vous pouvez modifier en conséquence
Je devrais peut-être été plus précis avec ma question. Je ne veux pas savoir comment coder en dur " les couleurs, je veux savoir comment changer la couleur après un certain événement. Je pense que si vous regardez le post je l'ai mentionné, vous pouvez obtenir une meilleure idée de ce que je veux dire.
OriginalL'auteur Mayank Pandeyz