将迷你图添加到动态填充 HTML table

Question

我正在尝试在动态填充的 table 的每一行末尾添加一个 sparkline chart。这是我的代码：

function populateOverallOverview(result){
    var table = document.getElementById("firstTabOverall");

    function addCell(tr, text) {
        var td = tr.insertCell();
        td.textContent = text;
        return td;
    }

    result.forEach(function (item) {
        // sparkline chart here
        var dataSpan = document.createElement('span');
        dataSpan.sparkline(amountData, {
        type: 'bar',
        barColor: '#191919'});

        var row = table.insertRow();
        addCell(row, item.category);
        addCell(row, '$ ' + item.currentMonthAmt.toFixed(2));
        addCell(row, item.topMonthStr + ' ($ ' + item.topAmount.toFixed(2) + ')');
    });

}

amountData 的示例数据为 [5,6,7,2,0,-4,-2,4]。我的 HTML table:

<table id="firstTabOverall" class="table" style="font-size:13px">
                                        <tr>
                                            <th>Category <span id="sparkline1"></span></th>
                                            <th>Current Month Revenue</th>
                                            <th>Best Selling Month</th>
                                        </tr>
                                    </table>

我正在尝试动态创建迷你图，然后添加到该行的末尾。但是，我收到此错误消息：

Uncaught (in promise) TypeError: dataSpan.sparkline is not a function

我不确定如何使用 ID 动态创建跨度，然后将该 ID 用于 .sparkline。有什么想法吗？

Answer 1

报错信息并没有提示span元素是否创建，而是说代码找不到sparkline函数，为了解决这个问题请确保：

您已将 jquery.sparkline.js 包含在您的页面中，即 JavaScript 迷你图文件存在。
还要注意你加载的顺序 jquery 和 jquery.sparkline.js ，首先加载 jQuery 然后 sparkline

还要注意 jquery selector 总是 return 一个类似数组的 jquery 对象，它不同于 return 由 JavaScript createElement()[= 编辑的元素24=]

我想说的是：

var dataSpan = document.createElement('span');
dataSpan.sparkline(...)

不同于

$("#sparkline").sparkline(...)

建议您检索 jQuery 动态添加的元素，然后创建 sparkline 图表。

或者，创建元素后设置ID属性如下

dataSpan.setAttribute("id", "yourRandomDynamicIdHere");
$("#yourRandomDynamicIdHere").sparkline(...)

希望对您有所帮助！

Answer 2

$(document).ready(function() {
    var amountData = [5, 6, 7, 2, 0, -4, -2, 4];

    function populateOverallOverview(result) {
        var table = document.getElementById("firstTabOverall");

        function addCell(tr, text) {
            var td = tr.insertCell();
            td.textContent = text;
            return td;
        }

        result.forEach(function(item) {
            var row = table.insertRow();
            addCell(row, item.category);
            addCell(row, '$ ' + item.currentMonthAmt.toFixed(2));
            addCell(row, item.topMonthStr + ' ($ ' + item.topAmount.toFixed(2) + ')');

            var lastCell = addCell(row, ""); //Added blank cell for sparkline

            var dataSpan = $("<span>");
            dataSpan.appendTo(lastCell);
            dataSpan.sparkline(amountData, {
                type: 'bar',
                barColor: '#191919'
            });
        });

    }

    populateOverallOverview([{
        category: "Transportation",
        currentMonthAmt: 1,
        topMonthStr: 1,
        topAmount: 1
    }, {
        category: "Healthcare",
        currentMonthAmt: 1,
        topMonthStr: 1,
        topAmount: 1
    }]);
});

<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sparklines/2.1.2/jquery.sparkline.min.js"></script>
</head>

<body>
    <table id="firstTabOverall" class="table" style="font-size:13px">
        <tr>
            <th>Category</th>
            <th>Current Month Revenue</th>
            <th colspan=2>Best Selling Month</th>
        </tr>
    </table>
</body>

</html>

将迷你图添加到动态填充 HTML table

Adding sparkline chart to dynamically populated HTML table

javascript

html

html-table

sparklines