[jqPlot] 같은 차트에 막대 그래프와 꺽은선 그래프 그리기

jQuery/jqPlot 2016. 9. 29. 19:30



하나의 차트에 2개의 그래프 동시에 출력하기.




01. series 옵션을 사용하여 한개의 차트에 막대 그래프와 꺽은선 그래프 2개를 동시에 출력할 수 있다.

 jqplot_bar_plus_line_chart.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jqPlot</title>
<script type="text/javascript" src="./js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="./js/jquery.jqplot.js"></script>
<script type="text/javascript" src="./js/plugins/jqplot.barRenderer.js"></script>
<script type="text/javascript" src="./js/plugins/jqplot.categoryAxisRenderer.js"></script>
<link rel="stylesheet" type="text/css" href="./css/jquery.jqplot.css"/>
<script type="text/javascript">
jQuery(document).ready(function() {


    var member = [9, 8, 6, 8, 7, 6, 4];
    var album = [2, 3, 4, 10, 8, 5, 1];


    jQuery("#chart").jqplot([member, album], {
          title : "막대 그래프"
        , series : [

            // 첫번째 블록에서 member 배열에 대핸 데이터를 처리한다.
            
{
                // member 배열을 막대 그래프 차트로 나타낸다.
                renderer
: jQuery.jqplot.BarRenderer

            }
        ]
        , axes: {
            xaxis : {
                  renderer : jQuery.jqplot.CategoryAxisRenderer
                , ticks : ['트와이스', '러블리즈', '여자친구', 'AOA', '에이핑크', '라붐', '블랙핑크']
            }
        }
    });
});
</script>
</head>
<body>
<div id="chart" style="width:780px;height:304px;">
</body>
</html>




02. 출려결과는 아래와 같이. 하나의 막대그래프와, 다른 하나의 차트로 나오는 것을 확인 할 수 있다.








두개의 막대그래프와 하나의 꺽은선 그래프 출력하기.




01. 위와같이 막대 그래프와 꺽은선 그래프가 공존하는 가운데. 막대 그래프를 하나 이상 표기되게 할경우는 아래와 같다.

 jqplot_bar_two_line_chart.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jqPlot</title>
<script type="text/javascript" src="./js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="./js/jquery.jqplot.js"></script>
<script type="text/javascript" src="./js/plugins/jqplot.barRenderer.js"></script>
<script type="text/javascript" src="./js/plugins/jqplot.categoryAxisRenderer.js"></script>
<link rel="stylesheet" type="text/css" href="./css/jquery.jqplot.css"/>
<script type="text/javascript">
jQuery(document).ready(function() {


    var barChart1 = [9, 8, 6, 8, 7, 6, 4];
    var barChart2 = [5, 3, 4, 6, 2, 7, 8];
    var lineChart = [12, 7, 4, 10, 8, 5, 7];
   
    jQuery("#chart").jqplot([barChart1, barChart2, lineChart], {
          title : "막대 그래프 & 꺽은선 그래프"
        , series : [
            {    // barChart1 배열을 막대 그래프로 지정한다.
                renderer : jQuery.jqplot.BarRenderer
            }
            , {    // barChart2 배열을 막대 그래프로 지정한다.
                renderer : jQuery.jqplot.BarRenderer
            }
        ]
        , axes: {
            xaxis : {
                  renderer : jQuery.jqplot.CategoryAxisRenderer
                , ticks : ['A Name', 'B Name', 'C Name', 'D Name', 'E Name', 'F Name', 'G Name']
            }
        }
    });
});
</script>
</head>
<body>
<div id="chart" style="width:780px;height:304px;">
</body>
</html>



02. 출력결과는 아래처럼 막대그래프가 2개 나뉘어 나오는 것을알 수 있다.








두개의 막대 그래프를 합치고 하나의 꺽은선 그래프 출력하기.




01. 위와같이 소스를 조금 응용하여 나뉘어 출력되는 막대그래프를 합쳐서 출력해 보자.

 jqplot_bar_union_line_chart.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jqPlot</title>
<script type="text/javascript" src="./js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="./js/jquery.jqplot.js"></script>
<script type="text/javascript" src="./js/plugins/jqplot.barRenderer.js"></script>
<script type="text/javascript" src="./js/plugins/jqplot.categoryAxisRenderer.js"></script>
<link rel="stylesheet" type="text/css" href="./css/jquery.jqplot.css"/>
<script type="text/javascript">
jQuery(document).ready(function() {


    var barChart1 = [9, 8, 6, 8, 7, 6, 4];
    var barChart2 = [5, 3, 4, 6, 2, 7, 8];
    var lineChart = [12, 7, 4, 10, 8, 5, 7];
    
    jQuery("#chart").jqplot([barChart1, barChart2, lineChart], {
          title : "막대 그래프 & 꺽은선 그래프"
        , stackSeries : true      // 그래프를 하나로 합친다.
        , series : [
            {      // barChart1 배열을 막대 그래프로 지정한다.
                  renderer : jQuery.jqplot.BarRenderer
                , rendererOptions : {
                      barWidth : 35                    // 막대그래프의 넓이를 지정
                    , barPadding : -15                // 막대그래프의 여백을 지정
                    , highlightMouseOver : false    // 막대그래프의 클릭여부를 지정 (기본값 : true)
                }
            }
            , {    // barChart2 배열을 막대 그래프로 지정한다.
                  renderer : jQuery.jqplot.BarRenderer
                , rendererOptions : {
                      barWidth : 35                    // 막대그래프의 넓이를 지정
                    , barPadding : -15                // 막대그래프의 여백을 지정
                    , highlightMouseOver : false    // 막대그래프의 클릭여부를 지정 (기본값 : true)
                }
            }
            , {    // lineChart 배열을 꺽은선 그래프로 지정한다.
                  disableStack : true      // 데이터의 합또한 합쳐지는 것을 방지하기위해 꺽은선 그래프는 disableStack을 true로 선언
                  // jQuery.jqplot.LineRenderer(꺽은선 그래프)의 플러그인은 기본적으로 지정하지 않아도 된다.
                , renderer : jQuery.jqplot.LineRenderer
            }
        ]
        , axes: {
            xaxis : {
                  renderer : jQuery.jqplot.CategoryAxisRenderer
                , ticks : ['A Name', 'B Name', 'C Name', 'D Name', 'E Name', 'F Name', 'G Name']
            }
        }
    });
});
</script>
</head>
<body>
<div id="chart" style="width:780px;height:304px;">
</body>
</html>




02. 출력결과는 위의 막대 그래프 2개가 하나로 합쳐져서 출력되어지는것을 확인 할 수 있다.










[jqPlot] jqPlot 막대 그래프 2개의 데이터 하나로 합치기

jQuery/jqPlot 2016. 9. 29. 15:18

■ jqPlot 막대 2개의 데이터 하나로 합치기



 jqplot_stacked_bar_chart_with_cumulative_point_labels.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQplot</title>
<script type="text/javascript" src="./js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="./js/jquery.jqplot.js"></script>
<script type="text/javascript" src="./js/plugins/jqplot.barRenderer.js"></script>
<script type="text/javascript" src="./js/plugins/jqplot.categoryAxisRenderer.js"></script>
<script type="text/javascript" src="./js/plugins/jqplot.pointLabels.js"></script>
<link rel="stylesheet" type="text/css" href="./css/jquery.jqplot.css"/>
<script type="text/javascript">
jQuery(document).ready(function(){
    var firestLine = [14, 32, 41, 44, 40, 37, 29];
    var secondLine = [7, 12, 15, 17, 20, 27, 39];
    jQuery("#chart").jqplot([firestLine, secondLine], {
          title : "막대 그래프"
        , stackSeries : true      // stackSeries 가 true로 설정되어 있어야 두개의 데이터가 합쳐진다.
        , seriesDefaults : {
              renderer : jQuery.jqplot.BarRenderer
            , rendererOptions : { barMargin : 25 }
            , pointLabels : {
                  show : true
                , stackedValue : true
            }
      }
      , axes: {
          xaxis : { renderer : jQuery.jqplot.CategoryAxisRenderer }
      }
  });
});
</script>
</head>
<body>
<div id="chart" style="width:780px;height:304px;">
</body>
</html>




02. 출력결과는 두개의 리스트의 데이터가 합쳐져서 나타나는 것을 확인 할 수 있다.





※ 만약 stackSeriesfalse로 설정된 경우 데이터는 아래와 같이 분할되어 나타난다.


[jqPlot] jqPlot 막대 그래프에 레이블 생성하기

jQuery/jqPlot 2016. 9. 29. 15:12

■ jqPlot 막대 그래프에 레이블 생성하기




01. 이번에는 생성한 막대 그래프 위에 정보를 표시할 레이블을 올려보자. jqplot.pointLabels.js 플러그인을 추가하고 css를 지정하면된다.

 jqplot_bar_chart_with_point_labels.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQplot</title>
<script type="text/javascript" src="./js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="./js/jquery.jqplot.js"></script>
<script type="text/javascript" src="./js/plugins/jqplot.barRenderer.js"></script>
<script type="text/javascript" src="./js/plugins/jqplot.categoryAxisRenderer.js"></script>
<script type="text/javascript" src="./js/plugins/jqplot.pointLabels.js"></script>
<link rel="stylesheet" type="text/css" href="./css/jquery.jqplot.css"/>
<style type="text/css">
#chart .jqplot-point-label {
    border:1.5px solid #AAAAAA;
    padding:1px 3px;
    background-color:#EECCDD;
}
</style>

<script type="text/javascript">
jQuery(document).ready(function () {
    var line = [['트와이스', 9], ['러블리즈', 8], ['걸스데이', 4], ['에이핑크', 6], ['AOA', 8], ['라붐', 6], ['여자친구', 6], ['블랙핑크', 4], ['레드벨벳', 5]];
    jQuery("#chart").jqplot([line], {
          title:"막대 그래프"
        , seriesDefaults:{ renderer:jQuery.jqplot.BarRenderer }
        , series:[
            {
                pointLabels:{
                    show:true
                    , labels:['JYP', '울림', '드림티', '플랜에이', 'FNC', 'NH EMG', '쏘스뮤직', 'YG', 'SM']
                }
            }
        ]
        , axes:{
              xaxis:{ renderer:jQuery.jqplot.CategoryAxisRenderer }
            , yaxis:{ padMax:1.3 }
        }
    });
});
</script>
</head>
<body>
<div id="chart" style="width:780px;height:304px;">
</body>
</html>




02. 아래 출력결과처럼 막대그래프 상단에 정보를 표시하는 레이블이 나타는것을 알 수 있다.





[jqPlot] jqPlot의 막대 그래프 그리기

jQuery/jqPlot 2016. 9. 29. 11:07

■ jqPlot의 기본적인 막대 그래프



01. jqPlot을 사용하여 가장 기본적인 막대 그리프 차트를 그려보자. 코드는 아래와 같다.

 jqplot_bar_chart_with_varying_colors.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQplot</title>
<script type="text/javascript" src="./js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="./js/jquery.jqplot.js"></script>
<script type="text/javascript" src="./js/plugins/jqplot.barRenderer.js"></script>
<script type="text/javascript" src="./js/plugins/jqplot.categoryAxisRenderer.js"></script>
<link rel="stylesheet" type="text/css" href="./css/jquery.jqplot.css"/>

<script type="text/javascript">
jQuery(document).ready(function () {
    var line = [6, 5, 2, 4, 6];
    jQuery("#chart").jqplot([line], {
          title:"막대 그래프"
        , seriesDefaults:{

            // jQuery.jqplot.BarRenderer 막대 그래프를 그리기위한 플러그인

            // 해당 플러그인이 존재하지 않으면 기본적으로 꺾은선 그래프로 나타난다.

            renderer:jQuery.jqplot.BarRenderer
        }
        , axes:{
            xaxis:{

                  // jqplot.CategoryAxisRenderer 축을 카테고리 (범주)로 취급 그리드를 카테고리 구분선으로 표시 할 때 필요하다.

                  renderer:jQuery.jqplot.CategoryAxisRenderer

                  // X축 차트의 각 부분의 범주

                , ticks:['트와이스', '러블리즈', '베리굿', '라붐', '여자친구']

            }
        }
    });
});
</script>

</head>
<body>
<div id="chart" style="width:700px;height:304px;">
</body>
</html>




02. 출력결과는 아래와 같이 막대 그래프 차트가 나타나는것을 확인 할 수 있다.









■ jqPlot 막대 그래프 에 랜덤으로 색상 집어넣기




01. 위 에서 진행한 코드에서 varyBarColor 속성을 추가하여 무작위로 색상을 넣어보자.

 jqplot_bar_chart_with_varying_colors.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQplot</title>
<script type="text/javascript" src="./js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="./js/jquery.jqplot.js"></script>
<script type="text/javascript" src="./js/plugins/jqplot.barRenderer.js"></script>
<script type="text/javascript" src="./js/plugins/jqplot.categoryAxisRenderer.js"></script>
<link rel="stylesheet" type="text/css" href="./css/jquery.jqplot.css"/>

<script type="text/javascript">
jQuery(document).ready(function () {
    var line = [6, 5, 2, 4, 6];
    jQuery("#chart").jqplot([line], {
          title:"막대 그래프"
        , seriesDefaults:{
              renderer:jQuery.jqplot.BarRenderer
            , rendererOptions:{
                varyBarColor:true
            }
        }
        , axes:{
            xaxis:{
                  renderer:jQuery.jqplot.CategoryAxisRenderer

                , ticks:['트와이스', '러블리즈', '베리굿', '라붐', '여자친구']

            }
        }
    });
});
</script>

</head>
<body>
<div id="chart" style="width:700px;height:304px;">
</body>
</html>




02. 출력결과는 아래와 같이 랜덤으로 막대 그래프에 색상이 들어가 있는것을 확인 할 수 있다.








■ jqPlot 막대 그래프에 색상 지정하여 집어 넣기



01. 바로 위에서 랜덤으로 색상을 집어 넣었더라면 이제 seriesColors 옵션을 사용하여 직접 색을 커스터마이징 해보자.

 jqplot_bar_chart_with_custom_colors.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQplot</title>
<script type="text/javascript" src="./js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="./js/jquery.jqplot.js"></script>
<script type="text/javascript" src="./js/plugins/jqplot.barRenderer.js"></script>
<script type="text/javascript" src="./js/plugins/jqplot.categoryAxisRenderer.js"></script>
<link rel="stylesheet" type="text/css" href="./css/jquery.jqplot.css"/>

<script type="text/javascript">
jQuery(document).ready(function () {
    var line = [6, 5, 2, 4, 6];
    jQuery("#chart").jqplot([line], {
          title:"막대 그래프"
        , seriesColors:['#FFCCE5', '#00749F', '#73C774', '#C7754C', '#17BDB8']
        , seriesDefaults:{
              renderer:jQuery.jqplot.BarRenderer
            , rendererOptions:{
                varyBarColor:true
            }
        }
        , axes:{
            xaxis:{
                  renderer:jQuery.jqplot.CategoryAxisRenderer

                , ticks:['트와이스', '러블리즈', '베리굿', '라붐', '여자친구']

            }
        }
    });
});
</script>

</head>
<body>
<div id="chart" style="width:700px;height:304px;">
</body>
</html>



02. 위에서 직접 적용한 색상으로 막대그래프의 색상이 변경된 것을 확인 할 수 있다.








■ 한 범주에 두개이상의 막대 그래프 나타내기



 jqplot_double_bar_chart.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQplot</title>
<script type="text/javascript" src="./js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="./js/jquery.jqplot.js"></script>
<script type="text/javascript" src="./js/plugins/jqplot.barRenderer.js"></script>
<script type="text/javascript" src="./js/plugins/jqplot.categoryAxisRenderer.js"></script>
<link rel="stylesheet" type="text/css" href="./css/jquery.jqplot.css"/>
</head>
<body>
<script type="text/javascript">
jQuery(document).ready(function () {
    var member = [9, 8, 6, 8, 6];
    var album = [2, 3, 4, 10, 5];
    jQuery("#chart").jqplot([member, album], {
          title:"막대 그래프"
        , seriesColors:['#00CC99', '#FF9933']    // 두개 이상의 색을 적어도 최상의 2개의 색만 반영됨
        , stackSeries : false
        , seriesDefaults:{
              renderer:jQuery.jqplot.BarRenderer
        }
        , axes:{
            xaxis:{
                  renderer:jQuery.jqplot.CategoryAxisRenderer
                , ticks:['트와이스', '러블리즈', '여자친구', 'AOA', '라붐']
            }
        }
    });
});
</script>
<div id="chart" style="width:700px;height:304px;">
</body>
</html>





02. 위에서 직접 적용한 색상으로 막대그래프의 색상이 변경된 것을 확인 할 수 있다.






[jqPlot] 플러그인 및 옵션 정리

jQuery/jqPlot 2016. 9. 27. 17:54
참조 : 시우아빠님 블로그



■ jqPlot의 플러그인 정리



jqPlot에는 다수의 플러그인들이 있다 그 플러그인들에 따라 그릴 수 있는

  그래프도 천차만별이기에 확인해 두도록 하자.




자주 사용되는 jqPlot plugins 의 종류는 다음과 같다.


플 러 그 인

설        명

 jqplot.barRenderer.js

 · 플러그인은 'plugins'폴더에 들어 있고, 필요에 따라 개별적으로 호출한다.

 jqplot.blockRenderer.js

 · 차트를 만들 때 필요합니다.

 jqplot.bubbleRenderer.js

 · 버블 차트를 생성하는 데 필요합니다.

 jqplot.canvasOverlay.js

 · 그래프에 선을 그 적용하기 위하여 필요합니다.

 jqplot.categoryAxisRenderer.min.js

 · 축을 카테고리 (범주)로 취급 그리드를 카테고리 구분선으로 표시 할 때 필요합니다.

 jqplot.dateAxisRenderer.js

 · 날짜 또는 시간 축을 시간축으로 취급 할 때 필요합니다.

 jqplot.donutRenderer.js

 · 도넛차트를 만들 때 필요하다.

 jqplot.dragable.js

 · 계열의 데이터 요소를 드래그하여 이동하도록 할 때 필요합니다.

 jqplot.highlighter.js

 · 강조 & 툴팁에 필요합니다.

 jqplot.meterGaugeRenderer.js

 · 미터 게이지를 만들 때 필요합니다.

 jqplot.ohlcRenderer.js

 · 촛대 등의 차트를 만들 때 필요합니다.

 jqplot.pieRenderer.js

 · π(파이 차트)를 만들 때 필요합니다.

 jqplot.enhancedLegendRenderer.min.js

 · 범례의 기능을 강화한다.

 jqplot.pointLabels.js

 · 데이터 요소 레이블을 표시하는 데 필요합니다.

 jqplot.trendline.js

 · 추세선을 추가하기 위해 필요하다.










참조 : 0과 1로 표현하는 코드 디자이너




■ jqPlot의 옵션 정리




01. title 옵션


title

 text

 · 타이틀 텍스트

 show

 · 타이틀 표시여부

 fontFamily

 · 타이틀 폰트 종류

 fontSize

 · 폰트 사이즈

 textAlign

 · 타이틀 테긋트 위치 (left, center, right)

 textColor

 · 테스트 컬러





02. axes 옵션


X축 옵션

xaxis

 min

 · X축 최저값 범위지정

 amx

 · X축 최고값 범위 지정

 pad

 · X축 여백조정 면 그래프 작성시는 [0]을 지정하고, 여백을 없에는 경우가 많다.

 ticks

 · X축 눈금지정

 tickOptions

 mark

 · 눈금의 위치 설정 (outside, inside) (default : outside)

 showMark

 · 눈금 표시 여부

 showGridline

 · 그리드선 표시여부 (default : true)

 markSize

 · 눈금 사이즈 (default : 4)

 show

 · 눈금과 mark의 라벨 표시 여부 (default : true)

 showLabel

 · 눈금의 라벨 표시 여부 (default : true)

 formatString

 · 눈금의 라벨형식 지정 (%d : 정수, %f : 소수, %g : 데이터값, % : 문자열)

 showTicks

 · 눈금의 라벨 표시 여부

 showTickMarks

 · 눈금의 mark 표시 여부

 label

 · X축 라벨

 labelOptions

 fontFamily

 

 fontSize

 · 라벨 폰트 크기 설정

 renderer

 ·X축의 카테고리로 사용



Y축 옵션

yaxis

 min

 · Y축 최저값 범위지정

 amx

 · Y축 최고값 범위지정

 pad

 · Y축 여백조정 면그래프 작성시는 [0]을 지정하고, 여백을 없에는 경우가 많다.

 ticks

 · Y축 눈금지정

 tickOptions

 mark

 · 눈금의 위치 설정 (outside, inside) (default : outside)

 showMark

 · 눈금 표시 여부

 showGridline

 · 그리드선 표시여부 (default : true)

 markSize

 · 눈금 사이즈 (default : 4)

 show

 · 눈금과 mark의 라벨 표시 여부 (default : true)

 swhoLabel · 눈금의 라벨 표시 여부 (default : true)

 formatString

 · 눈금의 라벨형식 지정 (%d : 정수, %f : 소수, %g : 데이터값, % : 문자열)

 showTicks

 · 눈금의 라벨 표시 여부

 showTickMarks

 · 눈금의 mark 표시 여부

 label

 · Y축 라벨

 labelOptions

 fontFamily

 

 fontSize

 · 라벨 폰트 크기 설정

 render

 · Y축의 카테고리로 사용



03. seriesDefaults


seriesDefaults

 show

 · 그래프 표시여부 (default : true)

 color

 ·

 linePattern

 · 그래프 선종류 지정 (solid, dashed, dotted) (default : solid)

 · '.-.' 형식으로 조합 사용 가능

 · [2, 4 , 2, 7, 4, 2] 파선의 길이와 파선의 간격 다음의 파선의

 · 길이와 간격 배열로 지정 가능

 lineWidth

 · 그래프 선의 두께

 shadowAngle

 · 그래프 그림자 각도 X축세어 시계방향

 showLine

 · 그래프 선 표시 여부 (default : true)

 showMarker

 · marker 표시 여부 (default : true)

 fill

 · 그래프 선 밑 색으로 채우기 여부 (default : true)

 fillAndStroke

 · 그래프 선 표시여부 (면 그래프 생성시 사용하는 옵션)

 fillColor

 · 선 및 채우기 색

 fillAlpha

 · 선 밑 채우기 색의 불투명도

 fillToZero

 · 그래프선과 0 사이 채우기 여부 (default : false)

 renderer

 jQuery.jqplot.BarRenderer

 · 바 그래프

 jQuery.jqplot.BezierCurveRenderer

 · 곡선 그래프

 jQuery.jqplot.BlockRenderer

 · 블록 차트

 jQuery.jqplot.BubbleRenderer

 · 버블 차트

 jQuery.jqplot.DonutRenderer

 · 도넛 차트

 jQuery.jqplot.MeterGaugeRenderer

 · 미터 게이지

 jQuery.jqplot.MekkoRenderer

 · 마리메코 차트

 jQuery.jqplot.OHLCRenderer

 ·

 jQuery.jqplot.PieRenderer

 · 파이 그래프

 jQuery.jqplot.PyramidRenderer

 · 피라미드 그래프

 rendererOptions

 barDirection

 · 바생성 옵션

 · barDirection: 'vertical', //바그래프 vertical, horizontal.

 markerOptions

 show

 · 눈금 표시 여부 (default : true)

 style

 눈금 스타일 (default : filledCircle)

 · diamond, ciamond, circle, square, x, plus, dash, filedDiamond

  , filedCircle, filedSquare

 lineWidth

 · 눈금선 두께 (default : 2)

 size

 · 눈금크기 (default : 9)

 color

 · 눈금색 (default : 그래프 라인색과 같음)

 shadow

 · 눈금 그림자 표시 여부 (기본값 : true)

 shadowAngle

 · 눈금 그리자 각도, X축에서 시계방향 (기본값 : 45)

 shadowOffset

 · 눈금과 눈금 그림자의 간격 (기본값 : 1)

 shadowDepth

 · 눈금 그림자의 길이 (기본값 : 1)

 shadowAlpha

 · 눈금 그림자의 불투명도 (기본값 : 0.07)

 legend

 show

 · 범례 표시 여부 (기본값 : true)

 placement

 · 범례 표시 영역 (insideGrid, outsideGrid, outside)

 location

 · 범례 표시 위치 지정 (n, e, s, w, nw, ne, se, sw)

 xoffset

 · X축, X2축에서 범례 영역까지의 거리

 yoffset

 · Y축, Y2축에서 범례 영역까지의 거리

 stackSeries

 ·