JS, HTML & CSS

제이쿼리, 그래프, 그래프 종결자

관리자 | 2013.01.21 15:16 | 조회 7091

 

 

<script language="javascript" type="text/javascript" src="./graph/excanvas.js"></script>
<script type="text/javascript" src="./graph/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="./graph/plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="./graph/plugins/jqplot.pieRenderer.min.js"></script>
<script type="text/javascript" src="./graph/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="./graph/plugins/jqplot.pointLabels.min.js"></script>
<link rel="stylesheet" type="text/css" href="./graph/jquery.jqplot.min.css" />

<script class="code" type="text/javascript">
$(document).ready(function(){
$.jqplot.config.enablePlugins = true;
var s1 = [<?=$nAry2?>]; //ex) 100,200,150, 300, 200, 200, 200, 200, 100, 150, 110, 120
var s2 = [<?=$nAry?>]; // ticks 숫자만큼 콤마로 구분해서 값 저장
var sg = [<?=$nAryg?>];

var ticks = ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'];

plot1 = $.jqplot('chart1', [s1,s2,sg], {
// Only animate if we're not using excanvas (not in IE 7 or IE 8)..
animate: !$.jqplot.use_excanvas,
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks },
y2axis: {
pad: 0,
tickOptions: {
formatString: "%'d만원"
},
rendererOptions: {
forceTickAt0: false
},
max:2000,
numberTicks:5

},
yaxis: {
pad: 0,
tickOptions: {
formatString: "%'d건"
},
rendererOptions: {
// align the ticks on the y2 axis with the y axis.
alignTicks: true,
forceTickAt0: true
},
max:30,
numberTicks:5
}
},


series: [
{
label: '<?=$Rdate-1?>년',
yaxis: 'yaxis',
shadow: true,
renderer: $.jqplot.BarRenderer,
pointLabels: { show: true,hideZeros:true,ypadding:-1 }

},
{
label: '<?=$Rdate?>년',
yaxis: 'yaxis',
shadow: true,
renderer: $.jqplot.BarRenderer,
pointLabels: { show: true,hideZeros:true,ypadding:-1 }

},
{
label: '금액',
yaxis: 'y2axis',
shadow: true,
pointLabels: { show: true,hideZeros:true }
}

],
legend: {
show: true,
location: 'w', // compass direction, nw, n, ne, e, se, s, sw, w.
xoffset: 0, // pixel offset of the legend box from the x (or x2) axis.
yoffset: 0, // pixel offset of the legend box from the y (or y2) axis.
placement: 'outsideGrid'
},
highlighter: { show: false }
});


});</script>

twitter facebook me2day 요즘
3개(1/1페이지)
JS, HTML & CSS
번호 제목 글쓴이 조회 날짜
3 [라이브러리소개] 제이쿼리 + CSS 이용한 튜토리얼~ [1] 관리자 5419 2013.03.07 18:20
2 [라이브러리소개] 롤링 갤러리 관리자 3433 2013.01.21 15:17
>> [라이브러리소개] 제이쿼리, 그래프, 그래프 종결자 첨부파일 [1] 관리자 7092 2013.01.21 15:16
많이 본 글
댓글 많은 글