Jquery 在主干中基于下拉选择绘制图表

当用户使用Backbone.js、Highchart和handlebar在下拉列表中选择不同选项时，我试图绘制一张图表。我使用collection来存储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>

$（文档）.ready（函数（）{
callSer（“clg图表”）；
});
//主干模型
var ClgModel=Backbone.Model.extend（{}）；
//主干集
var ClgCollection=Backbone.Collection.extend({
型号：ClgModel
});
loadFromJson=函数（输入）{
如果（u.isArray（输入））{
var collection=new ClgCollection（）；
_.每个（输入、功能（数据）{
var a=collection.length；
add（loadFromJson（data））；
});
回收；
}
返回新的ClgModel({
ClgName:input.Name，
ClgRates：输入。速率
});
};
//主干视图
var ClgView=Backbone.View.extend({
收藏：ClgCollection，
活动：{
“更改选择。clgchart选择”：“tableModified”
},
初始化：函数（）{
//console.log（“初始化乐趣”）；
},
渲染：函数（）{
var=这个；
this.collection.each（函数（clgTableModel）{
if（clgTableModel.get（“selectedSnapshot”））{
即.modifyTableValue（clgTableModel）；
}
});
var rates=新数组（）；
var categories=新数组（）；
var系列=新数组（）；
var data=新数组（）；
变量颜色=[“#045DSD”、“#997779”、“#997779”、“#997779”、“#997779”]；
var chartHeight=this.collection.length*70；
这是.el.find（'.chartcalc.chart fade'）.height（chartHeight）；
var labelColor=[]；
此.collection.each（函数（模型，i）{
categories.push（model.get（“ClgName”）；
价格推送（模型获取（“ClgRates”）；
dataObject=新对象（）；
dataObject.y=速率[i]；
dataObject.color=颜色[i]；
数据推送（dataObject）；
serieObject=新对象（）；
seriesObject.borderWidth=0；
serieObject.name=类别[i]；
serieobject.data=速率[i]；
serieObject.shadow=false；
串行推送（串行对象）；
如果（真）{
//#RE#绘制右侧图表条
如果（i==0）{
即.el.find（'.clgchart labels'）.append（''+categories[i]+''）；
}否则{
即.el.find（'.clgchart labels'）.append（''+categories[i]+''）；
}
}
console.log（“类别：“+categories[i]）；
控制台日志（“费率：+费率[i]）；
});
var renderToElement=this.$el.find（“.chart clg”）[0]；
如果（真）{
//#RE#绘制左侧图表部分
这是initChartObj（图表高度）；
}
var templateSrc=“{{{#each clgTables}}{{{ClgName}}{{/each}}”；
var template=handlebar.compile（templateSrc）；
变量SerializedTablesValue={
clgTables:this.collection.toJSON（）
};
var selectorElement=this.$el.find（“select.clgchart selection”）；
html（“选择”+模板（SerializedTablesValue））；
this.chartingObj.addSeries({
名称：“clg值”，
数据：数据，
影子：错
}，假）；
that.chartingObj.setSize（that.getChartWidth（），chartHeight，false）；
this.chartingObj.redraw（）；
},
modifyTableValue:函数（clgTableModel）{
log（“内部modifyTableValue”）；
this.collection.reset（clgTableModel.get（“ClgName”）.models）；
},
tableModified:函数（args）{
var selectedTerm=$（args.target.val（）；
日志（“selectedTerm:+selectedTerm”）；
var=这个；
this.collection.each（函数（clgTableModel）{
if（selectedTerm==clgTableModel.get（“ClgName”））{
即.modifyTableValue（clgTableModel）；
}
});
},
initChartObj:函数（chartHeight，系列）{
数字格式（this.y，2）；
var chartWidth=this.getChartWidth（）；
this.chartingObj=新的Highcharts.Chart({
图表：{
renderTo:this.$el.find（“.chart clg”）[0]，
类型：'bar'
}
});
this.isChartInitialized=true；
},
getChartWidth:函数（）{
//console.log（“insi