Javascript 使用图表JS执行insertionSort

我想用图表JS和Im复制算法，使用setTimeout来显示当按下submit按钮时数据已经更改，但我想能够显示每列中数据的交换，换句话说，我想在insertionSort函数中只更改图形中的一个值，知道如何做吗？这是我当前的代码：

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;
}

函数随机数据（数量）{
设arr=[]
而（数量>0）{
randomValue=Math.floor（Math.random（）*200）；
arr.push（随机值）；
数量--；
}
返回arr；
}
函数generateLabelsFromTable（数量）
{                       
让标签=[]；
迭代器=0；
而（数量>0）{
labels.push（迭代器）
迭代器++；
数量--；
}
退货标签；
}
函数sendData（）{
var sortValue=（document.getElementById（“排序方法”）.value）；
var quantityValue=document.getElementById（“quantityNumbers”）.value；
myChart.data.labels=generateLabelsFromTable（quantityValue）；
myChart.data.datasets.forEach（（数据集）=>{
dataset.data=（随机数据（quantityValue））；
});
myChart.update（）；
开关（sortValue）{
案例“insertionSort”：
setTimeout（（）=>insertionSort（），2000）
打破
}
}
函数insertionSort（）{
var data=myChart.data.datasets[0].data；
var i；
var j；
对于（i=1；i=0&&data[j]>键）
{
数据[j+1]=数据[j]；
j=j-1；
myChart.update（）
}
数据[j+1]=键；
}
console.log（数据）
返回数据；
}

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>

const ctx=document.getElementById（'myChart'）.getContext（'2d'）；
常量xlabels=[]；
常量myChart=新图表（ctx{
类型：'bar'，
数据：{
标签：[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]，
数据集：[{
标签：“数据”，
数据：[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]，
背景颜色：[
"rgba(255,99,132,0.2)",，
“rgba（54162235,0.2）”，
"rgba(255,206,86,0.2)",，
“rgba（751921920.2）”，
“rgba（153102255,0.2）”，
‘rgba（255、159、64、0.2）’
],
边框颜色：[
"rgba(255,99,132,1)",，
“rgba（54162235,1）”，
"rgba(255,206,86,1)",，
"rgba(751921921)",，
"rgba(153102255,1)",，
‘rgba（255、159、64、1）’
],
边框宽度：1
}]
},
});
分类

这个关于冒泡排序的答案可能会为您指明正确的方向：