본문 바로가기
jQuery/jqPlot

[jqPlot] 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. 아래 출력결과처럼 막대그래프 상단에 정보를 표시하는 레이블이 나타는것을 알 수 있다.





반응형
저작자표시

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

[jqPlot] 같은 차트에 막대 그래프와 꺽은선 그래프 그리기  (0) 2016.09.29
[jqPlot] jqPlot 막대 그래프 2개의 데이터 하나로 합치기  (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

티스토리툴바