javascript - 使用 chart.js 可视化冒泡排序
问题描述
我试图形象化冒泡排序。首先我创建了简单的条形图,然后创建了函数 sortBubble。但我不确定如何在每个步骤中更改视觉列以使其在算法运行时进行。也许我应该使用动态可视化,例如 d3.js。感谢您的任何建议。
function sortBubble() {
for (var i = 0; i chart.data.datasets[0].data[j]) {
var temp = chart.data.datasets[0].data[j];
chart.data.datasets[0].data[j] = chart.data.datasets[0].data[j-1];
chart.data.datasets[0].data[j-1] = temp;
}
}
}
chart.update();
}
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Number_1', 'Number_2', 'Number_3', 'Number_4', 'Number_5', 'Number_6'],
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
}
}]
}
},
animation: {
onProgress: function(animation) {
duration:4000
}
}
});
解决方案
您可以使用该setTimeout()
方法并更新labels
,dataset.data
并dataset.backgroundColor
在每次交换数组元素时有一定的延迟。然后您还需要调用chart.update()
以确保 Chart.js 在canvas
.
请看一下下面的可运行代码,看看它是如何工作的。
function bubbleSort() {
let labels = chart.data.labels;
let data = chart.data.datasets[0].data;
let colors = chart.data.datasets[0].backgroundColor;
let swapped;
let timeout = 0;
do {
swapped = false;
for (let i = 0; i < data.length; i++) {
if (data[i] > data[i + 1]) {
swap(labels, i);
swap(data, i);
swap(colors, i);
timeout += 50;
this.updateChartDelayed(labels.slice(0), data.slice(0), colors.slice(0), timeout);
swapped = true;
}
}
} while (swapped);
}
function swap(arr, i) {
let tmp = arr[i];
arr[i] = arr[i + 1];
arr[i + 1] = tmp;
}
function updateChartDelayed(labels, data, colors, timeout) {
setTimeout(() => {
chart.data.labels = labels;
chart.data.datasets[0].data = data;
chart.data.datasets[0].backgroundColor = colors;
chart.update();
}, timeout);
}
const labels = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'];
const chart = new Chart('myChart', {
type: 'bar',
data: {
labels: labels,
datasets: [{
data: labels.map(() => Math.random()),
backgroundColor: ['#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6', '#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D', '#80B300', '#809900', '#E6B3B3', '#6680B3', '#66991A', '#66664D', '#991AFF', '#E666FF', '#4DB3FF', '#1AB399', '#4D8066', '#809980', '#E6FF80', '#1AFF33', '#999933', '#FF4D4D'],
borderWidth: 1
}]
},
options: {
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
setTimeout(() => bubbleSort(), 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="90"></canvas>
推荐阅读
- python - 根据前一页的 QCheckBox.isChecked() 跳过下一个 QWizardPage
- python - 如何在超过阈值后遍历熊猫数据框中的每一行并设置等于 nan 的值?
- java - 使用 Gradle 5 使用 Lombok 编译 Kotlin 和 Java
- r - 为什么“rbind”比“set”更快地增长数据表?
- amazon-web-services - 无效的策略角色 JSON
- loops - If then Else Loop - 不删除所有项目
- pandas - Pandas DataFrame,将索引及其名称转换为列
- c# - GroupBy 具有最新的元素和更新,而不是键和更新
- java - Spring Data Mongo - 继承和可嵌入
- nativescript - 如何在 NativeScript 中将移动应用项目转换为 Web 应用(代码共享)结构?