根据骨干中的下拉选择绘制图表

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>

有没有人可以告诉我如何进一步或提出一些建议才能完成它？

提前致谢！