javascript - 使用 Chart JS 进行插入排序

Question

我想使用 Chart JS 重现算法，我使用 setTimeout 来显示按下按钮提交时数据已更改，但我希望能够显示每一列中数据的交换，换句话说，我想更改在我的插入排序函数中，图表中只有一个值，知道我该怎么做吗？这是我当前的代码：

JS代码

function randomData(quantity) {
    let arr = []
    while (quantity > 0) {
        randomValue = Math.floor(Math.random() * 200);
        arr.push(randomValue);
        quantity--;
    }
    return arr;
}

function generateLabelsFromTable(quantity)
{                       
    let labels = [];
    iterator = 0;
    while (quantity > 0) {
        labels.push(iterator)
        iterator ++;
        quantity --;
    }
    return labels;
}

function sendData() {

    var sortValue = (document.getElementById("sort-method").value);
    var quantityValue = document.getElementById("quantityNumbers").value;

    myChart.data.labels = generateLabelsFromTable(quantityValue);
    myChart.data.datasets.forEach((dataset) => {
        dataset.data = (randomData(quantityValue));
    });

    myChart.update();

    switch (sortValue) {
        case 'insertionSort':
            setTimeout(()=> insertionSort(), 2000)
            break;
    }
}

function insertionSort() {
    var data = myChart.data.datasets[0].data;
    var i;
    var j;
    for (i = 1; i < data.length ; i++)
    {
        key = data[i];
        j = i - 1;
 
        while (j >= 0 && data[j] > key)
        {
            data[j + 1] = data[j];
            j = j - 1;
            myChart.update()
        }
        data[j + 1] = key;
    }
    console.log(data)
    return data;
}

HTML 代码

<canvas id="myChart"></canvas>
    <script>
        
        const ctx = document.getElementById('myChart').getContext('2d');
        const xlabels = [];
        const myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15],
                datasets: [{
                    label: 'Data',
                    data: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15],
                    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
                }]
            },
        
        });
        

    </script>
    
    <div class = "main-button">
        <button id="submit" type="submit" value="Submit" onclick="sendData()">
            Sort
        </button>
    </div>

标签： javascripthtmlchart.js