骨干视图+谷歌可视化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.