■ 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. 위에서 직접 적용한 색상으로 막대그래프의 색상이 변경된 것을 확인 할 수 있다.
