模块模式中的Google图表
模块模式中的Google图表
提问于 2015-01-07 15:59:20
我试图制作一个图表模块，以避免每次我想要创建一个图表时重复自己。当我试图获得我的模块的多个内容时，问题就出现了。
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
</head>
<body>
<div id="ex0"></div>
<script type="text/javascript">
$(document).ready(function() {
var options = {
width: 500,
height: 100,
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Popularity'
}
};
var columns = [
{
'type': 'number',
'value': 'X'
},
{
'type': 'number',
'value': 'Dogs'
}
]
var data = [
[0, 0], [1, 10], [2, 23],
[3, 17], [4, 18], [5, 9],
[6, 11], [7, 27], [8, 33],
[9, 40], [10, 32], [11, 35],
[12, 30], [13, 40], [14, 42],
[15, 47], [16, 44], [17, 48]
];
var chart1 = new Front_google_charts('ex0', columns, options, data);
chart1.init();
});
var Front_google_charts = (function() {
var htmlElement = null;
var columns = null;
var options = null;
var rowsContent = null;
function chart(e, c, o, r) {
google.load('visualization', '1', { packages: ['corechart'] });
google.setOnLoadCallback(this.drawChart);
this.htmlElement = e;
this.columns = c;
this.options = o;
this.rowsContent = r;
}
chart.prototype.setData = function() {
var data = new google.visualization.DataTable();
for (var i = 0; i < this.columns.length; i++) {
data.addColumn(this.columns[i].type, this.columns[i].value);
}
return data;
}
chart.prototype.drawChart = function() {
var data = setData();
data.addRows(rowsContent);
var chart = new google.visualization.LineChart(document.getElementById(htmlElement));
chart.draw(data, options);
}
chart.prototype = {
init: function() {
this.drawChart();
return this;
},
setSettings: function(e, c, o) {
columns = c;
htmlElement = e;
options = o;
},
setRowsContent: function(rows) {
rowsContent = rows;
}
};
return chart;
})();
</script>
</body>
</html>我如何将google图表功能封装在模块中？有可能吗？提前感谢
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-01-10 18:33:04
我终于有了自己的解决方案，它实际上是有效的：
Stack Overflow用户
发布于 2015-01-07 16:09:12
您可以这样在模块中插入对象：
(function() {
ObjectToInsert.doSomething();
})(ObjectToInsert);此外，这将提高性能，因为JavaScript解释器将在模块的上下文中查找doSomething方法。
资料来源：
- 专业JavaScript fow开发人员 -尼古拉斯·C·扎卡斯
- 高性能JavaScript -尼古拉斯·C·扎卡斯
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27823397
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号