Question

我正在使用chart.js API渲染多个堆叠的竖条图表，但性能很慢。我甚至进行了一些更改，使得所有content对象已经由服务器处理，而不是浏览器，但我意识到绝大部分时间来自最终函数new Chart(overallStatsChart, content);。

我也试过关闭动画，这略微提高了性能，但没有那么多。

有关如何提高性能的任何想法，即初始加载？

var countryList = {"AR":"Argentina","AU":"Australia","BO":"Bolivia","BR":"Brasil","CA":"Canada","CL":"Chile","CN":"中国","CO":"Colombia","CR":"Costa Rica","CU":"Cuba","CZ":"Česká","DE":"Deutschland","DK":"Danmark","DO":"Rep. Dominicana","EC":"Ecuador","ES":"España","FI":"Suomessa","FR":"France","GR":"Ελλάδα","GT":"Guatemala","HU":"Magyarország","IE":"Ireland","IN":"India","IT":"Italia","JP":"日本","MX":"México","NI":"Nicaragua","NL":"Nederland","NO":"Norge","PA":"Panamá","PE":"Perú","PL":"Polska","PR":"Puerto Rico","PT":"Portugal","PY":"Paraguay","RO":"România","RU":"Россия","SE":"Sverige","SV":"El Salvador","TR":"Türkiye","UA":"Україна","UK":"United Kingdom","US":"USA","UY":"Uruguay","VE":"Venezuela"};

//populates country labels
var labels = [], size = 0;
for (var key in countryList){
    labels.push(key);
    size++;
}

var _data = function(i){
    var arr = [];
    for (var n=0; n<size; n++){
        arr.push(n==i ? 1 : 0);
    }            
    return arr;
};

var dataset = [], i=0;
for (var key in countryList){

    dataset.push(
        {
            label: "depreciation",
            data: _data(i),
            backgroundColor: 'navy'
        }, {
            label: "insurance",
            data: _data(i),
            backgroundColor: 'blue'
        }, {
            label: "credit",
            data: _data(i),
            backgroundColor: 'aqua'
        }, {
            label: "inspection",
            data: _data(i),
            backgroundColor: 'teal'
        }, {
            label: "road taxes",
            data: _data(i),
            backgroundColor: 'olive'
        }, {
            label: "maintenance",
            data: _data(i),
            backgroundColor: 'green'
        }, {
            label: "repairs",
            data: _data(i),
            backgroundColor: 'lime'
        }, {
            label: "fuel",
            data: _data(i),
            backgroundColor: 'maroon'
        }, {
            label: "parking",
            data: _data(i),
            backgroundColor: 'yellow'
        }, {
            label: "tolls",
            data: _data(i),
            backgroundColor: 'orange'
        }, {
            label: "fines",
            data: _data(i),
            backgroundColor: 'red'
        }, {
            label: "washing",
            data: _data(i),
            backgroundColor: 'purple'
        }, {
            label: "maintenance",
            data: _data(i),
            backgroundColor: 'green'
        }
    );

    i++;
}                          

var options = {
    maintainAspectRatio: false,
    legend: {
        position: 'bottom', // place legend on the right side of chart
        display: false, //do not display
        labels : {
            fontSize: 9,
            fontColor: 'black'
        }
    },
    scales: {
        xAxes: [{
            stacked: true, // this should be set to make the bars stacked
            beginAtZero: true
        }],
        yAxes: [{
            stacked: true, // this also..
            beginAtZero: true
        }]
    },
    animation: {
        duration : 1000,
        easing : 'linear'
    }
};

var content = {
    type: 'bar',
    data: {
        labels: labels,
        datasets: dataset
    },
    options: options
}; 

//I made tests with timestamps and here it takes the biggest part of the time
new Chart(overallStatsChart, content);

.chart {
    position: relative;
    margin: auto;
}
#overallStatsChartDiv{
    min-height: 500px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<div class="chart" id="overallStatsChartDiv">
    <canvas id="overallStatsChart"></canvas>
</div>

Answer 1

现在我明白:) 根据此answer，我错误地复制了data属性。

解决方案非常简单，每个数据属性都可以直接拥有所有值，而无需引入零。

var countryList = {"AR":"Argentina","AU":"Australia","BO":"Bolivia","BR":"Brasil","CA":"Canada","CL":"Chile","CN":"中国","CO":"Colombia","CR":"Costa Rica","CU":"Cuba","CZ":"Česká","DE":"Deutschland","DK":"Danmark","DO":"Rep. Dominicana","EC":"Ecuador","ES":"España","FI":"Suomessa","FR":"France","GR":"Ελλάδα","GT":"Guatemala","HU":"Magyarország","IE":"Ireland","IN":"India","IT":"Italia","JP":"日本","MX":"México","NI":"Nicaragua","NL":"Nederland","NO":"Norge","PA":"Panamá","PE":"Perú","PL":"Polska","PR":"Puerto Rico","PT":"Portugal","PY":"Paraguay","RO":"România","RU":"Россия","SE":"Sverige","SV":"El Salvador","TR":"Türkiye","UA":"Україна","UK":"United Kingdom","US":"USA","UY":"Uruguay","VE":"Venezuela"};

//populates country labels
var labels = [], size = 0;
for (var key in countryList){
    labels.push(key);
    size++;
}

var _data = function(){
    var arr = [];
    for (var n=0; n<size; n++){
        arr.push(1);
    }            
    return arr;
};


var dataset = [
    {
        label: "depreciation",
        data: _data(),
        backgroundColor: 'navy'
    }, {
        label: "insurance",
        data: _data(),
        backgroundColor: 'blue'
    }, {
        label: "credit",
        data: _data(),
        backgroundColor: 'aqua'
    }, {
        label: "inspection",
        data: _data(),
        backgroundColor: 'teal'
    }, {
        label: "road taxes",
        data: _data(),
        backgroundColor: 'olive'
    }, {
        label: "maintenance",
        data: _data(),
        backgroundColor: 'green'
    }, {
        label: "repairs",
        data: _data(),
        backgroundColor: 'lime'
    }, {
        label: "fuel",
        data: _data(),
        backgroundColor: 'maroon'
    }, {
        label: "parking",
        data: _data(),
        backgroundColor: 'yellow'
    }, {
        label: "tolls",
        data: _data(),
        backgroundColor: 'orange'
    }, {
        label: "fines",
        data: _data(),
        backgroundColor: 'red'
    }, {
        label: "washing",
        data: _data(),
        backgroundColor: 'purple'
    }, {
        label: "maintenance",
        data: _data(),
        backgroundColor: 'green'
    }
];                      

var options = {
    maintainAspectRatio: false,
    legend: {
        position: 'bottom', // place legend on the right side of chart
        display: false, //do not display
        labels : {
            fontSize: 9,
            fontColor: 'black'
        }
    },
    scales: {
        xAxes: [{
            stacked: true, // this should be set to make the bars stacked
            beginAtZero: true
        }],
        yAxes: [{
            stacked: true, // this also..
            beginAtZero: true
        }]
    },
    animation: {
        duration : 1000,
        easing : 'linear'
    }
};

var content = {
    type: 'bar',
    data: {
        labels: labels,
        datasets: dataset
    },
    options: options
}; 

//I made tests with timestamps and here it takes the biggest part of the time
new Chart(overallStatsChart, content);

.chart {
    position: relative;
    margin: auto;
}
#overallStatsChartDiv{
    min-height: 500px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<div class="chart" id="overallStatsChartDiv">
    <canvas id="overallStatsChart"></canvas>
</div>

Chart.js渲染垂直堆积条形图太慢

1 个答案: