2
chart.jsを使用してソートアルゴリズムを視覚化しています。これまで私はそれを実装することに問題はなかった。今では、Chartの1つのBarの色を変更したいのですが、それを行う方法を理解できません。Chart.jsの色を変更する
私の質問に答えるべきpostがありますが、この解決法は私のためには機能しません。
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
}
}]
}
}
});
});
ありがとうございました！これはまさに私が欲しかったものです:) – NecNator