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

Question

我試圖想象冒泡排序。 首先我創建了簡單的條形圖，然后創建了函數 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
               
          }
                }
    });

Answer 1

您可以使用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>