2
Ich verwende chart.js, um einen Sortieralgorithmus zu visualisieren. Bis jetzt hatte ich keine Probleme, es zu implementieren. Jetzt möchte ich die Farbe eines einzelnen Balkens in meinem Chart ändern und ich kann einfach nicht herausfinden, wie es geht.Chart.js Farbe von Bar ändern
Es gibt eine post, die meine Frage beantworten sollte, 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
}
}]
}
}
});
});
Vielen Dank !! Das ist genau das, was ich wollte :) – NecNator