Chart.js update()方法最后只能工作一次，而不是每次迭代都更新 [英] Chart.js update() method only works once in the end instead of updating every iteration

查看：37
本文介绍了Chart.js update()方法最后只能工作一次，而不是每次迭代都更新的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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中建立了一个简单的插入排序算法，该算法对从最小到最大的十个随机整数进行排序.

I have built a simple insertion sort algorithm in JavaScript, which sorts an array of ten random integers from the smallest to the largest.

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

我现在想要实现的是:可视化此排序过程的每个步骤.我引入了 sleep() 函数，该函数基本上延迟了代码执行，并且紧随该 sleep() 函数之后，我调用 myChart.update() 来更新条形图.但是结果却不是我所期望的，事实证明，所有小节在此代码执行结束时仅更新了一次，而不是在排序步骤完成时进行更新.

What I want to achieve now is: visualise each step of this sorting process. I introduced a sleep() function which basically delays the code execution and right after this sleep() function, I call myChart.update() to update the bars. But the result is not what I expected, it turned out that all bars were only updated once by the end of this code execution instead of being updated whenever a sorting step is completed.

任何人都可以帮忙吗?我的代码可以由C& P作为HTML文件执行，然后在Chrome浏览器中运行.单击 startSorting 按钮对其进行排序，并且在开发人员控制台中提供了一些简单的调试消息.

Can anyone help? My code can be executed by C&P as a HTML file and run it in Chrome browser. Click startSorting button to have it sorted, and some simple debugging messages are available in the developer console.

推荐答案

您的代码会阻止UI，因此控制台日志消息和更新的图表仅在执行完成后才能显示(请参阅https://stackoverflow.com/a/32316972/2358409 ).

Your code blocks the UI, hence the console log messages and the updated chart can only be shown once its execution has completed (see https://stackoverflow.com/a/32316972/2358409).

最好使用 sleep 函数rel ="nofollow noreferrer"> setTimeout 以便安排各个工作部分.下面的可运行代码说明了如何简化功能 insertSort 而不再执行其原来的工作.

Instead of using your own sleep function, you better use setTimeout in order to schedule individual work portions. Below runnable code illustrates how this could work while the function insertSort was simplified and no longer does what it originally did.

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
<button type="button" onclick="insertSort()">StartSorting</button>
<canvas id="myChart" height="100">

这篇关于Chart.js update()方法最后只能工作一次，而不是每次迭代都更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆