Chart.js update（）方法最后只工作一次，而不是每次迭代都更新

问题描述 投票：0回答：1

function insertSort(inputArray = myChart.data.datasets[0].data) {
    let inputArrayLength = inputArray.length;
    let outerIndex = 1;
    let innerIndex = 0;
    while(outerIndex<inputArrayLength) {
        innerIndex = outerIndex - 1;
        temp = outerIndex;
        while(innerIndex>=0){
            if (inputArray[temp]<inputArray[innerIndex]){
                inputArray[innerIndex] = [inputArray[temp], inputArray[temp] = inputArray[innerIndex]][0];
                temp = innerIndex;
                innerIndex--;
            } else {
                innerIndex--;
            }
        }
        sleep(1000);
        console.log('Intermediate result is: ', inputArray);
        myChart.data.datasets[0].data = inputArray;
        myChart.update();
        outerIndex++;
    }
    console.log('Final result is: ', inputArray);
    return true;
}
function sleep(milliseconds) {
  console.log('going in sleep');
  const date = Date.now();
  let currentDate = null;
  do {
    currentDate = Date.now();
  } while (currentDate - date < milliseconds);
  console.log('out of sleep');
}
let ctx = document.getElementById('myChart').getContext('2d');
let randomArray = Array.from({length: 10}, () => Math.floor(Math.random() * 10+1));
let myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange', 'Blue', 'Blue', 'Blue', 'Blue'],
        datasets: [{
            label: '# of Votes',
            data: randomArray,
            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(54, 162, 235, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(54, 162, 235, 0.2)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <button type="button" onclick="insertSort()">StartSorting</button>
    <canvas id="myChart" width="400" height="400">
    </canvas>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

我在JavaScript中建立了一个简单的插入排序算法，该算法对从最小到最大的十个随机整数进行排序。

  • 通过使用Chart.js库将结果可视化，十个不同高度的条形被排序并从最短到最高更新。

我现在想要实现的是：可视化此排序过程的每个步骤。我引入了sleep（）函数，该函数基本上延迟了代码执行，在此sleep（）函数之后，我调用myChart.update（）] >更新酒吧。但是结果却不是我所期望的，事实证明，所有小节在此代码执行结束时仅更新了一次，而不是在排序步骤完成时进行更新。

有人可以帮忙吗？我的代码可以由C＆P作为HTML文件执行，并可以在Chrome浏览器中运行。单击startSorting

按钮对其进行排序，并且开发者控制台中提供了一些简单的调试消息。

function insertSort（inputArray = myChart.data.datasets [0] .data）{让inputArrayLength = inputArray.length;令externalIndex = 1;让innerIndex = 0; while（outerIndex <...>] >>

javascript chart.js insertion-sort
1个回答
0
投票

代替使用sleep，可能最好使用setTimeout。下面的可运行代码说明了如何简化函数setTimeout并且不再执行其最初的工作时如何工作。

insertSort
function insertSort(inputArray = myChart.data.datasets[0].data) {
    let inputArrayLength = inputArray.length;
    let outerIndex = 1;
    while(outerIndex<inputArrayLength) {
        setTimeout(() => {           
           myChart.data.datasets[0].data = Array.from({length: 10}, () => Math.floor(Math.random() * 10+1));
           console.log('Intermediate result is: ', myChart.data.datasets[0].data.join(', '));
           myChart.update();
        }, 1000 * outerIndex);
        outerIndex++;
    }
    console.log('Final result is: ', inputArray.join(', '));
    return true;
}

let ctx = document.getElementById('myChart').getContext('2d');
let randomArray = Array.from({length: 10}, () => Math.floor(Math.random() * 10+1));
let myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange', 'Blue', 'Blue', 'Blue', 'Blue'],
        datasets: [{
            label: '# of Votes',
            data: randomArray,
            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(54, 162, 235, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(54, 162, 235, 0.2)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.