骨干視圖+谷歌可視化API
[英]backbone view + google visualisation api
問題描述
我正在嘗試將google可視化圖表集成到我的backbone.js應用程序中。 目前，我在ChartView類的render函數中同時具有google.load（可視化）和setOnLoadCallback（drawVisualization）調用。 谷歌可視化庫似乎正在加載正確，但回調永遠不會執行。
下面是一個顯示問題的例子，如果有人可以幫助我會非常感激！
<!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>
4 個解決方案
解決方案1
12 已采納 2012-07-09 21:47:43
好吧，在另一個月之前為后代錄制這個。 可以將回調設置為google.load調用本身的arg，而不是使用google.setOnLoadCallback方法。 還必須調整代碼以獲取jquery對象的第一個子代，它工作正常。
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', {'callback':this.drawVisualization,
'packages':['linechart']});
return this;
},
drawVisualization:function () {
console.log("In draw visualization");
var data = new google.visualization.DataTable();
data.addColumn('date', '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);
var chart = new google.visualization.LineChart(this.$('#gviz').get(0));
chart.draw(data, null, null);
}
});
解決方案2
3 2012-08-20 17:07:48
如果您使用require.js進行依賴關系管理，我發現使用單一調用來加載特定模塊可以很好地工作。
define(
[
'backbone'
, 'socialPages/data/statCollection'
, 'date'
, 'https://www.google.com/jsapi?autoload={"modules":[{"name":"visualization","version":"1","packages":["corechart","table"]}]}'
], function(
Backbone
, StatsCollection
) {
return Backbone.View.extend({
initialize: function() {
_.bindAll( this
, '_chartDataChanged'
, '_drawChart'
, '_fetchStats'
, '_generateFields'
, '_generateRows'
, '_generateStatsTotals'
, '_lineChartOptions'
, '_onItemSelected'
, '_padWithZeroValues'
, '_setChartDimensions'
, 'clean'
, 'render'
);
this._firstRender = true;
this._sampleRate = 'month';
this.statsCollection = new StatsCollection();
this.dimensions = this._setChartDimensions();
this.statsCollection.bind( 'all' , this._chartDataChanged );
this._fetchStats();
if( window.google ) {
google.setOnLoadCallback( this._drawChart );
}
}
解決方案3
2 2013-06-13 14:09:37
您可以使用https://github.com/kontera-technologies/Backbone.GoogleChart
chart = new Backbone.GoogleChart({
chartType: 'ColumnChart',
dataTable: [['Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'],
[700, 300, 400, 500, 600, 800]],
options: {'title': 'Countries'},
});
$("body").append(chart.render().el)
解決方案4
0 2012-06-15 20:52:57
我目前正在使用帶有GoogleCharts的backbone.js。 您可以在腳本中加載backbone.js視圖，而不是在View的render（）方法中加載Google可視化。
<script>
google.load('visualization', '1', {packages:'linechart'});
ChartView = Backbone.View.extend({
render:function () {
this.drawVisualization();
return this;
},
drawVisualization:function () {
....
chart.draw(data, null, null);
}
</script>
這可能仍會產生不同的錯誤。 我注意到從渲染中調用“chart.draw”（此時視圖的'el'仍然不是DOM的一部分導致Google Charts發出“您的瀏覽器不支持圖表”錯誤。
在確定View的'el'已插入到DOM的DOM中之后，我會觸發'drawVisualization'函數。 在視圖中的事件（或它的模型）。 說：
<script>
google.load('visualization', '1', {packages:'linechart'});
ChartView = Backbone.View.extend({
events:{
this.model.on('change',this.drawVisualization, this);
},
render:function () {
this.drawVisualization();
return this;
},
drawVisualization:function () {
....
chart.draw(data, null, null);
}
</script>
希望這可以幫助。
未捕獲的TypeError：無法讀取undefined的屬性'row' - google visualization api
[英]Uncaught TypeError: Cannot read property 'row' of undefined - google visualisation api
如何為Google DataTables編寫自定義格式化程序（用於可視化API）
[英]How to write a custom formatter for Google DataTables (for use on visualisation api)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.