ChartJS is slow

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

，我可能认为动画对于大量数据来说太容易消耗了，所以通过设置选项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);
};
}