gpt4 book ai didi

javascript - 模块模式内的 Google 图表

转载 作者:行者123 更新时间:2023-12-02 16:37:14 25 4
gpt4 key购买 nike

我正在尝试制作一个图表模块,以避免每次我想创建图表时都重复自己。当我尝试获取模块的多个实例时,问题就出现了。

<!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 图表功能封装在模块内?有可能吗?提前致谢

最佳答案

您可以通过以下方式在模块中插入对象:

(function() {

ObjectToInsert.doSomething();

})(ObjectToInsert);

此外,这还将提高性能,因为 JavaScript 解释器将在模块上下文中查找 doSomething 方法。

<小时/>

来源:

  1. Professional JavaScript fow Web Developers - 尼古拉斯·C·扎卡斯
  2. High Performance JavaScript - 尼古拉斯·C·扎卡斯

关于javascript - 模块模式内的 Google 图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27823397/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com