0
차트를 만들 때마다 반복적으로 반복하지 않도록 차트 모듈을 만들려고합니다. 문제는 모듈을 여러 번 사용하려고 할 때 발생합니다.모듈 내부의 Google 차트
<!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 차트 기능을 캡슐화하려면 어떻게해야합니까? 그것은 가능한가? 당신은이 방법으로 모듈에서 개체를 삽입 할 수 있습니다 사전
문제를 설명해 주시겠습니까? 이것은 객체 지향 자바 스크립트에 대한 질문과 비슷합니다. 나는 프로토 타입을 전문가들에게 맡길 것이다. 그러나 차트 작성에 특히 관심이 있다면 jsconf에서 멋진 비디오를 추천 할 수 있습니다. - 'Dan Mané : 왜 많은 자바 스크립트 차트 라이브러리가 있습니까?', http://youtu.be/_A_FdbTkp9c – MCTaylor17
먼저, 당신의 대답에 감사드립니다. 나는 google-chart-creating 모듈을 만들려고 노력했기 때문에 다음과 같은 방법으로 차트 (선 차트)를 만들려면 몇 가지 매개 변수를 지정해야합니다. var c1 = Front_google_charts.init (htmlElment, options, data); var c2 = Front_google_charts.init (htmlElment2, opt2, data2); 반복해서 반복해서 피하십시오. :) – Termosfera