Chart.js ändern Sie die Farbe der Bar
Ich bin mit chart.js visualisieren-sort-Algorithmus. So weit ich habe keine Probleme, es umzusetzen. Das will ich jetzt ändern Sie die Farbe einer single-Bar in meiner Karte und ich kann einfach nicht herausfinden, wie es zu tun.
Es ist ein post das sollte auch die Antwort auf meine Frage, aber diese Lösung funktioniert nicht für mich.
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
}
}]
}
}
});
});
InformationsquelleAutor NecNator | 2016-08-03
Schreibe einen Kommentar Antworten abbrechen
Du musst angemeldet sein, um einen Kommentar abzugeben.
Habe ich eine Geige basiert auf dem code. Klicken Sie zunächst auf Elemente Taste für das ausfüllen der Daten. Ich änderte auch die Farbe eine bar, die beim Klick auf Art - Taste.
Bitte überprüfen Sie die
Fiddle
InformationsquelleAutor Aneesh Sivaraman
Versuchen Sie dies:
Wie bereits erwähnt, Dokumentation
backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', ] diese diff Sätze von Farb-rep-color-code für jede bar. So können Sie entsprechend ändern
Vielleicht sollte ich spezifischer mit meiner Frage. Ich möchte nicht wissen, wie 'codieren' die Farben, ich will wissen, wie man die Farbe ändern, die nach einem bestimmten Ereignis. Ich denke, wenn man sich die post erwähnte ich, dass Sie können erhalten eine bessere Vorstellung von dem, was ich meine.
InformationsquelleAutor Mayank Pandeyz