그러냐

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

jquery

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

관절분리 2016. 1. 28. 15:47
반응형
  • 글꼴
  • 확대
  • 축소
  •  

     

    <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>

     

     

    출처 : http://closetoyou.co.kr/?c=program/javascriptjquery&uid=53&PHPSESSID=fddf690fc2685a3f78999e043010c16b

    반응형

    'jquery' 카테고리의 다른 글

    [jQuery] Select박스 option 값 선택하기  (0) 2017.04.25
    checkbox all checked  (0) 2016.07.07
    사진 보기 lightGallery - 아파치 라이센스  (0) 2016.01.27
    [XE] 제이쿼리로 에디터에 내용 넣기  (0) 2016.01.27
    jquery datepicker  (0) 2016.01.27