当用户使用 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>
谁能告诉我如何进一步进行或提出一些建议以完成它?
提前致谢!