ChartJS 很慢

Question

所以我从我的 SQL 数据库 (mariaDB) 获取所有数据，当我创建包含 100 个数据行或类似内容的饼图时，一切都很好。但是当我将 5000 个结果加载到其中时，它开始滞后或非常慢，我想知道这是由于我的 JS 代码还是 ChartJS 本身造成的？

<div id="canvas-holder" style="width:100%"><div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div>
    <canvas id="chart-area" style="display: block; width: 762px; height: 381px;" width="762" height="381" class="chartjs-render-monitor"></canvas>
</div>

/**
 * Creates a PieChart overview of results
 *
 * @param {number} pass                 Amount of passed results
 * @param {number} fail                 Amount of failed results
 * @param {number} notRun               Amount of not run results
 * @param {number} err                  Amount of error results
 * @param {number} nA                   Amount of not applicable results
 * @param {number} percentagePassed     Percentage of passed amount
 * @param {number} percentageFailed     Percentage of failed amount
 * @param {number} percentageNotRun     Percentage of not run amount
 * @param {number} percentageError      Percentage of error amount
 * @param {number} percentageNA         Percentage of not applicable amount
 */
function PieChart(pass, fail, notRun, err, nA, percentagePassed, percentageFailed, percentageNotRun, percentageError, percentageNA) {

    window.chartColors = {
        red: '#dc3545',
        green: '#1cc88a',
        blue: '#4e73df',
        yellow: '#f6c23e',
        black: '#5a5c69'
    };

    var config = {
        type: 'pie',
        data: {
            datasets: [{
                data: [
                    nA,
                    err,
                    notRun,
                    fail,
                    pass
                ],
                backgroundColor: [
                    window.chartColors.black,
                    window.chartColors.yellow,
                    window.chartColors.blue,
                    window.chartColors.red,
                    window.chartColors.green,
                ],
                label: 'Dataset 1'
            }],
            labels: [
                percentageNA + "% NA",
                percentageError + "% Error",
                percentageNotRun + "% Not Run",
                percentageFailed + "% Failed",
                percentagePassed + "% Passed"
            ]
        },
        options: {
            responsive: true
        }

    };
    window.onload = function() {
        var ctx = document.getElementById('chart-area').getContext('2d');
        window.myPie = new Chart(ctx, config);
    };
}

来自评论的建议

用户@scx 建议查看此页面：https://www.chartjs.org/docs/latest/general/performance.html

而且我可能认为动画对于大量数据来说过于消耗，所以通过设置选项 animation: false，这表现得更好。

function PieChart(pass, fail, notRun, err, nA, percentagePassed, percentageFailed, percentageNotRun, percentageError, percentageNA) {

    window.chartColors = {
        red: '#dc3545',
        green: '#1cc88a',
        blue: '#4e73df',
        yellow: '#f6c23e',
        black: '#5a5c69'
    };

    var config = {
        type: 'pie',
        data: {
            datasets: [{
                data: [
                    nA,
                    err,
                    notRun,
                    fail,
                    pass
                ],
                backgroundColor: [
                    window.chartColors.black,
                    window.chartColors.yellow,
                    window.chartColors.blue,
                    window.chartColors.red,
                    window.chartColors.green,
                ],
                label: 'Dataset 1'
            }],
            labels: [
                percentageNA + "% NA",
                percentageError + "% Error",
                percentageNotRun + "% Not Run",
                percentageFailed + "% Failed",
                percentagePassed + "% Passed"
            ]
        },
        options: {
            parsing: false,
            normalized: true,
            animation: false
        }

    };
    window.onload = function() {
        var ctx = document.getElementById('chart-area').getContext('2d');
        window.myPie = new Chart(ctx, config);
    };
}

Answer 1

用户@scx 建议查看此页面：https://www.chartjs.org/docs/latest/general/performance.html

而且我可能认为动画对于大量数据来说过于消耗，所以通过设置选项动画：false，这表现得更好。

function PieChart(pass, fail, notRun, err, nA, percentagePassed, percentageFailed, percentageNotRun, percentageError, percentageNA) {

    window.chartColors = {
        red: '#dc3545',
        green: '#1cc88a',
        blue: '#4e73df',
        yellow: '#f6c23e',
        black: '#5a5c69'
    };

    var config = {
        type: 'pie',
        data: {
            datasets: [{
                data: [
                    nA,
                    err,
                    notRun,
                    fail,
                    pass
                ],
                backgroundColor: [
                    window.chartColors.black,
                    window.chartColors.yellow,
                    window.chartColors.blue,
                    window.chartColors.red,
                    window.chartColors.green,
                ],
                label: 'Dataset 1'
            }],
            labels: [
                percentageNA + "% NA",
                percentageError + "% Error",
                percentageNotRun + "% Not Run",
                percentageFailed + "% Failed",
                percentagePassed + "% Passed"
            ]
        },
        options: {
            parsing: false,
            normalized: true,
            animation: false
        }

    };
    window.onload = function() {
        var ctx = document.getElementById('chart-area').getContext('2d');
        window.myPie = new Chart(ctx, config);
    };
}

ChartJS 很慢

ChartJS is slow

html

javascript

charts

chart.js