在数据表中正确呈现迷你图答案

【问题标题】：Properly rendering sparklines in a datatable在数据表中正确呈现迷你图
【发布时间】：2014-01-02 01:25:14
【问题描述】：

在下面发布的示例中，我试图将 jquery.sparkline 库中的迷你图呈现为 jquery.dataTables 表中的一列数据。加载下面的示例效果很好，但仅适用于第一页。如果我单击“下一步”而不是将数据呈现为迷你图，它只会呈现数字。如果我单击“上一个”，则会显示初始设置的迷你图。如果我排序，我会得到两者的组合。

我是这两个库的新手，我试图在这个论坛和其他论坛上寻找解决方案，但到目前为止，我的发现都没有解决我的问题。有谁知道我做错了什么？

感谢您的任何建议！

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css" title="currentStyle">
    @import "http://datatables.net/release-datatables/media/css/demo_page.css";
    @import "http://datatables.net/release-datatables/media/css/jquery.dataTables.css";

        td.right {
            text-align: right;
        }
    </style>

<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script type="text/javascript" src="http://datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="http://omnipotent.net/jquery.sparkline/2.1.2/jquery.sparkline.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#dynamic').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>');
            $('#example').dataTable({
                "aaSorting": [],
                "aaData": [
                    ["0,1,2,3,4"],
                    ["4,3,2,1,0"],
                    ["0,1,2,3,4"],
                    ["4,3,2,1,0"],
                    ["0,1,2,3,4"],
                    ["4,3,2,1,0"],
                    ["0,1,2,3,4"],
                    ["4,3,2,1,0"],
                    ["0,1,2,3,4"],
                    ["4,3,2,1,0"],
                    ["0,1,2,3,4"],
                    ["4,3,2,1,0"]
                ],
                "aoColumns": [
                    { "sTitle": "Sparkline", "sClass": "center" }
                ],
                "aoColumnDefs": [
                    {
                        "aTargets": [0],
                        "mRender": function (data, type, full) {
                            return '<span class="spark">' + data + '</span>'
                        }
                    }
                ],
                "fnInitComplete": function (oSettings, json) {
                    $('.spark').sparkline('html', {
                        type: 'line',
                        minSpotColor: 'red',
                        maxSpotColor: 'green',
                        spotColor: false
                    });
                }
            });
        });
    </script>
</head>

<body id="dt_example">

<div id="container">
    <div id="dynamic"></div>
    <div class="spacer"></div>
</div>

</body>
</html>

【问题讨论】：

标签： jquery datatables sparklines

【解决方案1】：

你的回答对我不起作用，但下面的回答对我有用，我相信它更干净。

不要更改 sparkline jquery 插件，只是不要每次都在 fnDrawCallback 中调用.sparkline()。这可以通过简单地将您的选择器更改为这样来管理：

"fnDrawCallback": function (oSettings) {
    $('.spark:not(:has(canvas))').sparkline('html', {
        type: 'line',
        minSpotColor: 'red',
        maxSpotColor: 'green',
        spotColor: false
    });
}

选择器选择所有具有 spark 类的元素，不包括内部具有画布元素的元素。

【讨论】：

感谢您发布此信息！绝对更好地在本地进行，而不是需要更新库。希望这一切都被迷你图库的维护者清理干净，这样我们将来就不必做变通方法了。再次感谢您发布此内容。
图表在那里，但每当您翻页时，它们就消失了
解决了。修改后的迷你图代码，如本文底部所示：4byte.cn/question/266312/… 效果很好。您可能希望将其包含在您的答案中

【解决方案2】：

花了一些时间调试库后，我发现部分问题是我不应该在“fnInitComplete”中初始化迷你图。这仅在第一页上触发，并且文档仅包含可见行。我应该在“fnDrawCallback”中做这件事。所以代码是：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css" title="currentStyle">
        @import "/static/css/demo_page.css";
        @import "/static/css/jquery.dataTables.css";

        td.right {
            text-align: right;
        }
    </style>

    <script type="text/javascript" src="/static/js/jquery-2.0.3.js"></script>
    <script type="text/javascript" src="/static/js/jquery.dataTables.js"></script>
    <script type="text/javascript" src="/static/js/jquery.sparkline.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#dynamic').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>');
            var table = $('#example').dataTable({
                "aaSorting": [],
                "aaData": [
                    ["0,1,2,3,4"],
                    ["4,3,2,1,0"],
                    ["0,1,2,3,4"],
                    ["4,3,2,1,0"],
                    ["0,1,2,3,4"],
                    ["4,3,2,1,0"],
                    ["0,1,2,3,4"],
                    ["4,3,2,1,0"],
                    ["0,1,2,3,4"],
                    ["4,3,2,1,0"],
                    ["0,1,2,3,4"],
                    ["4,3,2,1,0"],
                    ["0,1,2,3,4"],
                    ["4,3,2,1,0"],
                    ["0,1,2,3,4"],
                    ["4,3,2,1,0"]
                ],
                "aoColumns": [
                    { "sTitle": "Sparkline", "sClass": "center" }
                ],
                "aoColumnDefs": [
                    {
                        "aTargets": [0],
                        "mRender": function (data, type, full) {
                            return '<span class="spark">' + data + '</span>';
                        }
                    },
                ],
                "fnDrawCallback": function (oSettings) {
                    $('.spark').sparkline('html', {
                        type: 'line',
                        minSpotColor: 'red',
                        maxSpotColor: 'green',
                        spotColor: false
                    });
                }
            });
        });
    </script>
</head>

<body id="dt_example">

<div id="container">
    <div id="dynamic"></div>
</div>

</body>
</html>

这仍然会导致问题，因为迷你图库将在第二次查看页面时使用错误数据重新初始化迷你图，因为我们在 fnDrawCallback 中调用“迷你图”，每次单击“下一步”或'previous' 用正确的数据重新绘制表格。如果您单击“下一步”，然后单击“上一个”，迷你图将重新初始化，但使用我们第一次调用时 DOM 中的画布数据。为了解决最后一个问题，如果我们已经这样做了，我只是修改了迷你图渲染方法以跳过渲染。我这样做的方式可能不是最好的，只是查看标签的 val 是否包含“画布”，但它确实解决了我的问题。我将向迷你图库维护者发布一个问题，看看他们是否有更好的方法来处理这个问题。

这是我在 jquery.sparkline.js 中所做的代码修改。我在大约第 947 行修改了渲染函数，以包括对“画布”的检查，如果它已经存在则返回。

    render = function () {
        var values, width, height, tmp, mhandler, sp, vals;
        if (userValues === 'html' || userValues === undefined) {
            vals = this.getAttribute(options.get('tagValuesAttribute'));
            if (vals === undefined || vals === null) {
                vals = $this.html();
            }

            # Don't re-render if we already have.
            if (vals.indexOf('canvas') === 1) {
                return;
            }

            values = vals.replace(/(^\s*<!--)|(-->\s*$)|\s+/g, '').split(',');
        } else {
            values = userValues;
        }

【讨论】：

关于这方面的任何消息，我也有同样的问题。你介意向迷你图库展示你制作的 mod 吗...谢谢
我正在发布对我的原始回复的更新，并立即更改代码。
感谢您弹出并更新您的答案，非常感谢。

【解决方案3】：

发现这个可以解决问题。在数据表中包括 3 个堆叠条形图作为迷你图。

后端数据：

<span class="mysparkline" linevalues="1,2,3,4,5,6" barvalues="1,6,2,3,4,5" ></span>

数据表代码

"fnDrawCallback": function(oSettings) {
    $('.mysparkline').sparkline('html', {
        type: 'bar',
        tagValuesAttribute: 'linevalues',
        barWidth: 6,
        barSpacing: 3,
        barColor: '#fb8072',
        width: '350px',
        tooltipFormatter: function(sp, options, fields) {
            return '<div class="jqsfield"><span style="color: ' + fields[0].color + '">&#9679;</span> Perp, New Term: ' + fields[0].value + '</div>'
        }
    });
    $('.mysparkline').sparkline('html', {
        type: 'bar',
        tagValuesAttribute: 'barvalues',
        barWidth: 6,
        barSpacing: 3,
        barColor: '#36C',
        composite: true,
        tooltipFormatter: function(sp, options, fields) {
            return '<div class="jqsfield"><span style="color: ' + fields[0].color + '">&#9679;</span> Maint, Term Renew: ' + fields[0].value + '</div>'
        }
    });
}

【讨论】：

很好的答案。我已经开始研究sparklinegithub.com/htmlwidgets/sparkline/issues/… 中的composite 功能。我喜欢示例、用例和反馈。

【解决方案4】：

我遇到了同样的问题，我发现该解决方案对于最新版本的 DataTables 来说已经过时了。对于数据表 1.10。我们需要这样做：

$('#example').dataTable( {
    "rowCallback": function( row, data ) {
        $('td:eq(0)', row).html('<span class="spark">' + data + '</span>');
    },
    "drawCallback": function (Settings) {
        $('.spark').sparkline('html', {
            type: 'line',
            minSpotColor: 'red',
            maxSpotColor: 'green',
            spotColor: false
        });
    }
});

我没有看到重新渲染迷你图的问题。我花了一些时间让它工作，所以我只是在这里发布我想出的东西来帮助任何可能有同样问题的人。谢谢。

【讨论】：

您好，您能说明一下最初应该如何在 columns 数组中呈现数据吗？
另外我在data 中指定了一个字段，因为数据本身就是一个对象，例如：$('td:eq(0)', row).html('<span class="spark">' + data[0] + '</span>');

【解决方案5】：

分页和重新渲染迷你图丢失我的 jqgrid 表中的第一个渲染迷你图的相同问题。在我的情况下，通过在渲染后删除迷你图选择器类来解决它，这样我就可以通过 jqgrid 事件 loadComplete 为所有额外加载的表调用迷你图

$('.inlinesparkline').sparkline('html', {type: 'line' ,disableHiddenCheck: true, height: '20px', width: '90px'}).removeClass('inlinesparkline');

【讨论】：