본문 바로가기
jQuery/jqPlot

[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개가 하나로 합쳐져서 출력되어지는것을 확인 할 수 있다.










반응형
저작자표시

'jQuery > jqPlot' 카테고리의 다른 글

[jqPlot] jqPlot 막대 그래프 2개의 데이터 하나로 합치기  (0) 2016.09.29
[jqPlot] jqPlot 막대 그래프에 레이블 생성하기  (0) 2016.09.29
[jqPlot] jqPlot의 막대 그래프 그리기  (0) 2016.09.29
[jqPlot] 플러그인 및 옵션 정리  (0) 2016.09.27
[jqPlot] jqPlot 프로젝트 세팅하기.  (0) 2016.09.27

'jQuery/jqPlot' Related Articles

티스토리툴바