6
मैं अपने backbone.js ऐप में एक Google विज़ुअलाइज़ेशन चार्ट को एकीकृत करने की कोशिश कर रहा हूं। वर्तमान में मेरे पास google.load (विज़ुअलाइज़ेशन) और setOnLoadCallback (DrawVisualization) दोनों चार्टव्यू क्लास के रेंडर फ़ंक्शन में कॉल करते हैं। Google विज़ुअलाइजेशन लाइब्रेरी सही ढंग से लोड होने लगते हैं, हालांकि कॉलबैक कभी निष्पादित नहीं होता है।रीढ़ की हड्डी देखें + google visualization api
नीचे एक उदाहरण है जो समस्या दिखाता है, अगर कोई सहायता कर सकता है तो मैं बहुत आभारी रहूंगा!
<!doctype html>
<html>
<head>
<title>App</title>
<meta charset="utf-8">
</head>
<body>
<div id="content"></div>
<script src="lib/jquery-1.7.2.min.js"></script>
<script src="lib/underscore.js"></script>
<script src="lib/backbone.js"></script>
<script src="http://www.google.com/jsapi"></script>
<script>
ChartView = Backbone.View.extend({
render:function() {
$(this.el).html('<p>gviz line chart:</p>' +
'<div id="gviz" style="width:600px; height:300px;"></div>');
google.load('visualization', '1', {packages:'linechart'});
google.setOnLoadCallback(this.drawVisualization);
return this;
},
//This never gets called
drawVisualization:function() {
console.log("In draw visualization");
var data = this.createDataTable('date');
var chart = new google.visualization.LineChart(this.$('#gviz'));
chart.draw(data, null, null);
},
createDataTable:function (dateType) {
console.log("Creating datatable");
var data = new google.visualization.DataTable();
data.addColumn(dateType, 'Date');
data.addColumn('number', 'Column A');
data.addColumn('number', 'Column B');
data.addRows(4);
data.setCell(0, 0, new Date("2009/07/01"));
data.setCell(0, 1, 1);
data.setCell(0, 2, 7);
data.setCell(1, 0, new Date("2009/07/08"));
data.setCell(1, 1, 2);
data.setCell(1, 2, 4);
console.log("Created datatable " + data.toJSON());
return data;
}
});
var AppRouter = Backbone.Router.extend({
routes:{
"":"chart"
},
chart:function() {
console.log("Showing chart");
$("#content").append(new ChartView().render().el);
}
});
router = new AppRouter();
Backbone.history.start();
</script>
</body>
</html>
धन्यवाद उपयोग कर सकते हैं - इस दिन को बचाया! – necromancer