使用chart.js可视化气泡排序 [英] Visualising bubble sort using chart.js

问题描述

我试图形象化气泡排序.首先，我创建了简单的条形图，然后创建了功能sortBubble.但是我不确定如何在算法运行时在每一步上进行可视化更改以使其变色.也许对于动态可视化，我应该使用d3.js之类的东西.谢谢您的建议.

I tried to visualise bubble sort. First I created simple bar chart, then created function sortBubble. But I am not sure how you can on each step change visually columns to make it at the time algorithm runs.Maybe for dynamic visualisation should I use for example d3.js .Thanks for any suggestion.

 

    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 上重新绘制更新的图表.

You can use the setTimeout() method and update the labels, dataset.data and dataset.backgroundColor with a certain delay each time array elements are swapped. Then you also need to invoke chart.update() to make sure, Chart.js re-draws the updated chart on the canvas.

请查看下面的可运行代码，并查看其工作原理.

Please take a look at the runnable code below and see how it works.

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>

这篇关于使用chart.js可视化气泡排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！