使用chart.js可视化冒泡排序

// 创建一个柱状图
var ctx = document.getElementById('bubbleSortChart').getContext('2d');
var chart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['元素1', '元素2', '元素3', '元素4', '元素5'],
    datasets: [{
      label: '待排序元素',
      data: [5, 3, 1, 4, 2],
      backgroundColor: 'rgba(0, 123, 255, 0.5)',
      borderColor: 'rgba(0, 123, 255, 1)',
      borderWidth: 1
    }]
  },
  options: {
    animation: {
      duration: 0 // 禁用动画效果
    },
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
});

// 冒泡排序函数
function bubbleSort() {
  var data = chart.data.datasets[0].data;
  var len = data.length;
  
  for (var i = 0; i < len - 1; i++) {
    for (var j = 0; j < len - 1 - i; j++) {
      if (data[j] > data[j + 1]) {
        // 交换相邻元素的位置
        var temp = data[j];
        data[j] = data[j + 1];
        data[j + 1] = temp;
        
        // 更新柱子的高度和颜色
        chart.data.datasets[0].backgroundColor[j] = 'rgba(255, 0, 0, 0.5)';
        chart.data.datasets[0].backgroundColor[j + 1] = 'rgba(255, 0, 0, 0.5)';
        chart.update();
        
        // 延迟一段时间，以显示排序的过程
        await sleep(1000);
        
        // 还原柱子的颜色
        chart.data.datasets[0].backgroundColor[j] = 'rgba(0, 123, 255, 0.5)';
        chart.data.datasets[0].backgroundColor[j + 1] = 'rgba(0, 123, 255, 0.5)';
      }
    }
  }
  
  // 排序完成后更新柱子的颜色
  chart.data.datasets[0].backgroundColor = 'rgba(0, 255, 0, 0.5)';
  chart.update();
}

// 延迟函数
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}