jqplot没有在淘汰代码中显示

Question

我正在关注knockout.js教程，一切都按预期工作，但在输入中为重量或盎司提交值时未填充图表。图表数据被推入阵列，我不知道是什么问题，但它没有出现。有什么想法吗？

＆＃13;

＆＃13;

$(function(){
            // global namespace
            var my = my || {};
            // models
            my.BabyWeight = function(pounds, ounces) {
                var self = this;

                self.pounds = pounds;
                self.remainingOunces = ounces;

                self.totalOunces = function() {
                    return (self.pounds * 16) + (self.remainingOunces * 1);
                };
                self.totalPounds = function() {
                    return (self.pounds * 1) + (self.remainingOunces / 16);
                };
                self.display = function() {
                    return self.pounds + 'lbs - ' + self.remainingOunces + 'oz';
                };
            };
            // view model
            my.vm = function(existingItems) {
                var self = this;

                // properties
                self.items = ko.observableArray(existingItems);
                self.msg = ko.observable("");
                self.msgType = ko.observable("info");
                self.title = ko.observable("Tracker v.001");

                // methods
                self.addItem = function() {
                    var pounds = $('#pounds').val();
                    var remainingOunces = $('#ounces').val();
                    var itemToAdd = new my.BabyWeight(pounds, remainingOunces);

                    // validate
                    if (itemToAdd.pounds == "" || itemToAdd.ounces == "") {
                        self.msgType("error");
                        self.msg("Oops, either the baby has become weightless or you didn't enter any data.");
                        return;
                    } else {
                        self.msg("");
                    }

                    // add to items array
                    self.items.push(itemToAdd);

                    // update msg
                    self.msgType("success");
                    self.msg("You've successfully weighed the baby in at " + itemToAdd.display());
                },
                self.clearItems = function() {

                    // clear items
                    self.items([]);

                    // update msg
                    self.msgType("info");
                    self.msg("All weight entries have been cleared.");
                },
                self.hideAlert = function() {
                    self.msg(""); //clearing the message will auto-hide since it's bound
                },
                self.removeItem = function(item) {

                    // remove item from items array
                    self.items.remove(item);

                    // update msg
                    self.msgType("info");
                    self.msg("The weight entry has been successfully removed.");
                }
            };

            // kick off knockout bindings
            ko.applyBindings(new my.vm([]));

            // add custom binding for charting
            ko.bindingHandlers.chart = {
                init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
                    // empty - left as placeholder if needed later
                },
                update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
                    // prepare chart values
                    var items = ko.utils.unwrapObservable(valueAccessor);
                    var chartValues = [
                        []
                    ];
                    for (var i = 0; i < items().length; i++) {
                        chartValues[0].push(items()[i].totalOunces());
                        console.log(totalOunces);
                    }

                    // clear previous chart
                    $(element).html("");

                    // plot chart
                    $.jqplot(element.id, chartValues, {
                        title: 'Baby Weight'
                    });
                }
            };

 
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/jquery.jqplot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.0.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


                <button type="submit" class="btn btn-primary"><i class="icon-ok icon-white"></i> Add Baby Weight</button>
                <button type="reset" class="btn btn-danger" data-bind="click: clearItems"><i class="icon-remove icon-white"></i> Start Over</button>
            </form>



            <!—-panel for my cute kids picture -->
            <div class="span4">

                <!-—we won’t cover adding this in the blog post -->
            </div>
        </div>
        <div class="span8">
            <div id="resultsChart" data-bind="chart: items()"></div>

            <table class="table table-striped" data-bind="visible: items().length > 0">
                <thead>
                    <tr>
                        <td>Weight</td>
                        <td>Total Pounds</td>
                        <td>Total Ounces</td>
                    </tr>
                </thead>
                <tbody data-bind="foreach: items">
                    <tr>
                        <td data-bind="text: display()"></td>
                        <td data-bind="text: totalPounds()"></td>
                        <td data-bind="text: totalOunces()"></td>
                        <td><a href="#" data-bind="click: $parent.removeItem"><i class="icon-remove"></i></a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

＆＃13;

＆＃13;

＆＃13;