Flot 不会在动态添加的元素中绘制 ()

Question

我正在处理统计仪表板，我想用 Ajax 填充单个图表 +table 面板。最初我只是静态定义了空面板的 HTML，但是自从我开始用车把对它们进行模板化后，Flot 就不想合作了：

Error: Invalid dimensions for plot, width = null, height = null

代码：

<style type="text/css">}
    .dashboard-chart { min-height: 150px; }
</style>
<div class="row" id="dashboard-container"></div>
<script id="dashboard-template" type="text/x-handlebars-template">
    <div id="{{dashboard-id}}" class="dashboard-section col-md-6">
        <div class="panel panel-default">
            <div class="panel-heading"><h1 class="panel-title">{{dashboard-title}}</h3></div>
            <div class="panel-body row-fluid">
                <div id="{{dashboard-id}}-chart" class="dashboard-chart col-md-3"></div>
                <div class="col-md-9">
                    <table id="{{dashboard-id}}-table" class="dashboard-table table table-striped">
                        <thead>{{{dashboard-thead}}}</thead>
                        <tbody></tbody>
                    </table>
                    {{{dashboard-content}}}
                </div>
            </div>
        </div>
    </div>
</script>
<script type="text/javascript">
var baseurl = "/foo_app/"
$(function(){
    // get template
    var template = Handlebars.compile($("#dashboard-template").html());
    // define dashboards
    var dashboards = [
        {
            templateargs: {
                "dashboard-id": "servertypes",
                "dashboard-title": "Server Types",
                "dashboard-thead": "<tr><th>Type</th><th>Count</th></tr>",
                "dashboard-content": ""
            },
            ajaxurl: baseurl + "ajax/test.php?type=servertypes",
            callback: function(data) {
                console.log(chart);
                console.log(chart.width());
                console.log(chart.height());
                $.plot(chart, data, chart_options); // !! -- problem here -- !!
                for(i=0;i<data.length;i++) {
                    table.append("<tr><td>"+data[i]['label']+"</td><td>"+data[i]['data']+"</td></tr>");
                }
            }
        }
    ];
    // define chart options
    var chart_options = {
        series: { pie: { show: true, innerRadius: 0.5 } },
        legend: { show: false }
    }

    for( i=0, l=dashboards.length; i<l; i++ ){
        // append dash item
        $("#dashboard-container").append(template(dashboards[i]["templateargs"]));
        // get current dash id
        var cur_id = dashboards[i]["templateargs"]["dashboard-id"];
        // get chart/table references
        var chart = $(cur_id+"-chart");
        var table = $(cur_id+"-table tbody");
        // request data
        $.ajax({
            type: "GET",
            url: dashboards[i]["ajaxurl"],
            error: function() { alert('AJAX error'); },
            success: dashboards[i]["callback"]
        });
    }
});
</script>

DOM 来源中的渲染如下：

<div id="servertypes" class="dashboard-section col-md-6">
    <div class="panel panel-default">
        <div class="panel-heading"><h1 class="panel-title">Server Types</h1></div>
        <div class="panel-body row-fluid">
            <div id="servertypes-chart" class="dashboard-chart col-md-3"></div>
            <div class="col-md-9">
                <table id="servertypes-table" class="dashboard-table table table-striped">
                    <thead><tr><th>Type</th><th>Count</th></tr></thead>
                    <tbody></tbody>
                </table>

            </div>
        </div>
    </div>
</div>

chart 对象转储到控制台为：

Object { length: 0, prevObject: Object, context: HTMLDocument → openstack_inventory, selector: "servertypes-chart" }

但是宽度和高度都以 null 的形式转储到控制台。我尝试通过模板中的 style 属性专门设置宽度和高度，但我仍然遇到相同的错误。

Answer 1

根据您的控制台输出：selector: "servertypes-chart" 这导致没有为您的图表找到 html 元素。 id-selector.

需要 "#servertypes-chart"

改变

var chart = $(cur_id+"-chart");
var table = $(cur_id+"-table tbody");

到

var chart = $("#" + cur_id+"-chart");
var table = $("#" + cur_id+"-table tbody");

Flot 不会在动态添加的元素中绘制 ()

Flot won't plot() in dynamically-added element

ajax

jquery

flot

handlebars.js