jquery - 基于主干中的下拉选择绘制图表

Question

当用户使用 Backbone.js、Highchart 和车把在下拉列表中选择不同的选项时，我正在尝试绘制图表。我使用集合来存储 JSON 值并使用 toJSON 函数在下拉列表中显示所有值并绘制图表。一切都像绘制图表一样完美地工作，并在下拉列表中显示值。

现在我试图仅在页面加载时绘制前两个值（两个条）。之后，第一个值/条将是一个常量，它不需要绘制图表，并且必须根据下拉选择绘制第二个条形图。比如用户选择 Edvin 需要为 Edvin 用户绘制图表等等。

为了实现，我使用了“选择”主干事件。当下拉值更改时，我正在调用“tableModified”函数。然后我再次检查该值是否与集合值匹配，我正在调用“modifyTableValue”函数。当我更改下拉列表中的任何值时，上面的“tableModified”函数会被触发，并且我可以在控制台中看到所选下拉列表的值。

在这里，我尝试显示前两个条形图，之后需要根据下拉列表中的选择绘制图表。

这是我的主干 JS 代码

<script>
    $(document).ready(function () {
        callSer(".clg-chart");
    });

    // Backbone Model
    var ClgModel = Backbone.Model.extend({});
    // Backbone Collection
    var ClgCollection = Backbone.Collection.extend({
        model: ClgModel
    });
    loadFromJson = function (input) {

        if (_.isArray(input)) {
            var collection = new ClgCollection();

            _.each(input, function (data) {
                var a = collection.length;
                collection.add(loadFromJson(data));
            });
            return collection;
        }

        return new ClgModel({
            ClgName: input.Name,
            ClgRates: input.Rate
        });
    };
    // Backbone View
    var ClgView = Backbone.View.extend({
        collection: ClgCollection,
        events: {
            "change select.clgchart-selection": "tableModified"
        },
        initialize: function () {
            //        console.log("initialize fun");
        },
        render: function () {
            var that = this;
            this.collection.each(function (clgTableModel) {
                if (clgTableModel.get("selectedSnapshot")) {
                    that.modifyTableValue(clgTableModel);
                }
            });
            var rates = new Array();
            var categories = new Array();
            var series = new Array();
            var data = new Array();
            var colors = ['#045DSD', '#997779', '#997779', '#997779', '#997779'];
            var chartHeight = this.collection.length * 70;
            this.$el.find('.chartcalc .chart-fade').height(chartHeight);
            var labelColor = [];
            this.collection.each(function (model, i) {
                categories.push(model.get("ClgName"));
                rates.push(model.get("ClgRates"));
                dataObject = new Object();
                dataObject.y = rates[i];
                dataObject.color = colors[i];
                data.push(dataObject);
                seriesObject = new Object();
                seriesObject.borderWidth = 0;
                seriesObject.name = categories[i];
                seriesObject.data = rates[i];
                seriesObject.shadow = false;
                series.push(seriesObject);

                if (true) {
                    // #RE# To draw right side chart bar
                    if (i === 0) {
                        that.$el.find('.clgchart-labels').append('<tr><td>' + categories[i] + '</td></tr>');
                    } else {
                        that.$el.find('.clgchart-labels').append('<tr><td>' + categories[i] + '</td></tr>');
                    }
                }
                console.log("categories:" + categories[i]);
                console.log("rates:" + rates[i]);
            });

            var renderToElement = this.$el.find(".chart-clg")[0];
            if (true) {
                // #RE# To draw left chart section
                this.initChartObj(chartHeight);

            }
            var templateSrc = "{{#each clgTables}}<option {{#if selectedSnapshot}}selected{{/if}}>{{ClgName}}</option>{{/each}}";
            var template = Handlebars.compile(templateSrc);
            var serializedTablesValues = {
                clgTables: this.collection.toJSON()
            };
            var selectorElement = this.$el.find("select.clgchart-selection");
            selectorElement.html("<option>Choose</option>" + template(serializedTablesValues));
            this.chartingObj.addSeries({
                name: 'clg values',
                data: data,
                shadow: false
            }, false);

            that.chartingObj.setSize(that.getChartWidth(), chartHeight, false);
            this.chartingObj.redraw();
        },
        modifyTableValue: function (clgTableModel) {
            console.log("inside modifyTableValue");
            this.collection.reset(clgTableModel.get("ClgName").models);
        },
        tableModified: function (args) {
            var selectedTerm = $(args.target).val();
            console.log("selectedTerm:" + selectedTerm);
            var that = this;
            this.collection.each(function (clgTableModel) {
                if (selectedTerm === clgTableModel.get("ClgName")) {
                    that.modifyTableValue(clgTableModel);
                }
            });
        },
        initChartObj: function (chartHeight, series) {
            Highcharts.numberFormat(this.y, 2);
            var chartWidth = this.getChartWidth();
            this.chartingObj = new Highcharts.Chart({
                chart: {
                    renderTo: this.$el.find(".chart-clg")[0],
                    type: 'bar'
                }
            });

            this.isChartInitialized = true;
        },
        getChartWidth: function () {
            //console.log("inside getChartWidth");
            var chartWidth = 365;

            return chartWidth;
        }
    });

    callSer = function (dispSelector) {
        var test = new Array();
        test = {
            "root": [{
                "Ischart": false,
                "re": {
                    "Name": "Depo"
                },
                "Clg": [{
                    "Name": "james",
                    "Rate": 0.05
                }, {
                    "Name": "Jack",
                    "Rate": 0.55
                }, {
                    "Name": "Edvin",
                    "Rate": 0.95
                }, {
                    "Name": "Mcd",
                    "Rate": 0.21,
                }],
            }]
        };
        var tables = loadFromJson(test.root[0].Clg);
        var clgValueTable = new ClgView({
            collection: tables,
            el: dispSelector,
            showCharts: false
        });

        clgValueTable.render();

    };
</script>

谁能告诉我如何进一步进行或提出一些建议以完成它？

提前致谢！