数据表单元格中的 ChartJS 性能答案

【问题标题】：ChartJS in Datatable cell performance数据表单元格中的 ChartJS 性能
【发布时间】：2017-01-01 15:34:24
【问题描述】：

所以出于某种原因，我必须将一个小图表放入一个列单元格中。我用一个简单的 div 完成了它并初始化了每个图表：

<div>
     <canvas id="6" height="50px" width="150px"></canvas>
</div>

jsFiddle

这对于 10 个数据集或 20 个数据集非常有用。但是我得到了一个包含 380 行的巨大数据表，并且在等待“2 分钟”之后，它甚至可以加载每个表行的图表。有没有更好的方法来做到这一点，或者提高性能？

【问题讨论】：

不需要加载看不见的东西：对于图表，也许只初始化视口内的东西？
好吧，我现在得到了一个变体。它只加载第一页的图表。但是，如果我切换到第二个，显然图表不会加载。有没有办法告诉数据表在页面更改时调用函数？
我看到你已经自己想出了一个解决方案！ :)

标签： performance charts datatable chart.js css-tables

【解决方案1】：

我找到了解决方案。就像这篇文章中提到的：Pagination triggers 我调用一个函数来初始化数据表绘制上的可见图表。意味着我只在它们被查看时才绘制它们。出色的性能和超薄的解决方案。

$('#Table')
            .on( 'draw.dt',   function () {  initSparkline(); } )
            .dataTable();

});

【讨论】：

【解决方案2】：

另一种选择可能是使用drawCallback 选项来使用表中的数据，以在每次为页面更改重新绘制 DataTable 时为可见行呈现图表。

下面是一个简化的示例，说明如何为圆环图完成此操作。

$('#dataTableId').DataTable({
    // I use the "columns" option to tell each column what data to show.
    // One column should have a uniquely id'ed canvas.
    "columns": [
        { "data": "id" },
        { "data": "A" },
        { "data": "B" },
        { "data": function(row){
            return "<canvas height=\"40px\" width=\"40px\" id=\"chart"+row.id+"\"></canvas>";
            },
            "orderable": false}
    ],
    "drawCallback": function() {
        // Get data, only from the rows displayed on the current page.
        var data = this.api().rows({page:'current'}).data();

        // The first draw appears to have a length of 0,
        // but subsequent ones have length equal to number of rows drawn.
        if (data.length !== 0){
            // Loop through each row to render each chart
            for (var i = 0; i < data.length; i++) {

                // Find the chart intended for this data
                var ctx = $("#chart"+data[i].id);

                // Make the chart
                var newChart = new Chart(ctx, {
                "type": "doughnut",
                "data": {
                    "labels": [
                        "A",
                        "B"
                    ],
                    "datasets": [{
                        "data": [data[i].A,data[i].B]
                    }],
                },
                }) // /Chart
            }
        }
    }

    // In a real table, the  object passed into the DataTable() function will 
    // probably also use other options, such as "ajax", "serverSide" or
    // "pageLength". For simplicity, only "columns" and "drawCallback" are 
    // shown in this example.

}); // /DataTable

【讨论】：