달력

9

« 2019/9 »

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  •  
  •  
  •  
  •  
  •  

'Factory'에 해당되는 글 38

  1. 2016.03.25 [Chart] Morris.js Donut Chart
  2. 2016.03.25 [Chart] Easy Pie Chart
  3. 2016.03.25 [Chart] Morris.js Bar Chart
  4. 2016.03.25 [Chart] Morris.js Area Chart
  5. 2016.03.25 [Chart] Morris.js Line Chart
  6. 2015.05.30 일본지진
  7. 2015.05.29 일본어 단어
  8. 2015.05.29 집앞
  9. 2015.05.22 신주쿠 서쪽입구에서..
  10. 2015.05.20 토미카
2016.03.25 19:24

[Chart] Morris.js Donut Chart CODE/jQuery 활용2016.03.25 19:24

소 스


<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script>
<meta charset=utf-8 />
<title>Morris.js Donut Chart Example</title>
<script>
jQuery(document).ready(function($) {
Morris.Donut({
element: 'donut-example',
data: [
{label: "label 1", value: 42},
{label: "label 2", value: 30},
{label: "label 3", value: 20}
]
});
});
</script>
</head>
<body>
<div style="width: 300px; height: 300px; background-color: crimson" id="donut-example"></div>
</body>
</html>


실행결과





'CODE > jQuery 활용' 카테고리의 다른 글

[Chart] Morris.js Donut Chart  (0) 2016.03.25
[Chart] Easy Pie Chart  (0) 2016.03.25
[Chart] Morris.js Bar Chart  (0) 2016.03.25
[Chart] Morris.js Area Chart  (0) 2016.03.25
[Chart] Morris.js Line Chart  (0) 2016.03.25
[jQuery] jqGrid Multiple Footer 테이블  (0) 2014.05.09
Posted by 레이칸트
2016.03.25 19:23

[Chart] Easy Pie Chart CODE/jQuery 활용2016.03.25 19:23

소 스


<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/jquery.easypiechart.js"></script>
<meta charset=utf-8 />
<title>Easy Pie Chart</title>
<style>
.chart {
position: relative;
display: inline-block;
width: 110px;
height: 110px;
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
}
.chart.chart-widget-pie {
margin-top: 5px;
margin-bottom: 5px;
}
.chart canvas {
position: absolute;
top: 0;
left: 0;
}
.percent {
display: inline-block;
line-height: 110px;
z-index: 2;
}
.percent:after {
content: '%';
margin-left: 0.1em;
font-size: .8em;
}
</style>
<script>
jQuery(document).ready(function($) {
$('.easy-pie-chart-1').easyPieChart({
easing: 'easeOutBounce',
barColor : '#8CC152',
lineWidth: 3,
onStep: function(from, to, percent) {
$(this.el).find('.percent').text(Math.round(percent));
}
});
$('.easy-pie-chart-2').easyPieChart({
easing: 'easeOutBounce',
barColor : '#F6BB42',
lineWidth: 3,
trackColor : false,
lineCap : 'butt',
onStep: function(from, to, percent) {
$(this.el).find('.percent').text(Math.round(percent));
}
});
$('.easy-pie-chart-3').easyPieChart({
easing: 'easeOutBounce',
barColor : '#E9573F',
lineWidth: 10,
lineCap : 'square',
onStep: function(from, to, percent) {
$(this.el).find('.percent').text(Math.round(percent));
}
});
$('.easy-pie-chart-4').easyPieChart({
easing: 'easeOutBounce',
barColor : '#3BAFDA',
lineWidth: 20,
onStep: function(from, to, percent) {
$(this.el).find('.percent').text(Math.round(percent));
}
});
});
</script>
</head>
<body>
<div class="chart easy-pie-chart-1" data-percent="86">
<span class="percent"></span>
</div>
<div class="chart easy-pie-chart-2" data-percent="86">
<span class="percent"></span>
</div>
<div class="chart easy-pie-chart-3" data-percent="86">
<span class="percent"></span>
</div>
<div class="chart easy-pie-chart-4" data-percent="56">
<span class="percent"></span>
</div>
</body>
</html>


실행결과

Easy Pie Chart

링크

https://github.com/rendro/easy-pie-chart











'CODE > jQuery 활용' 카테고리의 다른 글

[Chart] Morris.js Donut Chart  (0) 2016.03.25
[Chart] Easy Pie Chart  (0) 2016.03.25
[Chart] Morris.js Bar Chart  (0) 2016.03.25
[Chart] Morris.js Area Chart  (0) 2016.03.25
[Chart] Morris.js Line Chart  (0) 2016.03.25
[jQuery] jqGrid Multiple Footer 테이블  (0) 2014.05.09
Posted by 레이칸트
2016.03.25 19:21

[Chart] Morris.js Bar Chart CODE/jQuery 활용2016.03.25 19:21

소 스


[Chart] Morris.js
Bar Chart

<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script>
<meta charset=utf-8 />
<title>Morris.js Bar Chart Example</title>
<script>
jQuery(document).ready(function($) {
Morris.
Bar({
element: 'bar-example',
data: [
{ y: '2006', a: 100, b: 90 },
{ y: '2007', a: 75, b: 65 },
{ y: '2008', a: 50, b: 40 },
{ y: '2009', a: 75, b: 65 },
{ y: '2010', a: 50, b: 40 },
{ y: '2011', a: 75, b: 65 },
{ y: '2012', a: 100, b: 90 }
],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Series A', 'Series B']
});
});
</script>
</head>
<body>
<div style="width: 600px; height: 300px;" id="bar-example"></div>
</body>
</html>


실행결과









'CODE > jQuery 활용' 카테고리의 다른 글

[Chart] Morris.js Donut Chart  (0) 2016.03.25
[Chart] Easy Pie Chart  (0) 2016.03.25
[Chart] Morris.js Bar Chart  (0) 2016.03.25
[Chart] Morris.js Area Chart  (0) 2016.03.25
[Chart] Morris.js Line Chart  (0) 2016.03.25
[jQuery] jqGrid Multiple Footer 테이블  (0) 2014.05.09
Posted by 레이칸트
2016.03.25 19:19

[Chart] Morris.js Area Chart CODE/jQuery 활용2016.03.25 19:19

소 스


[Chart] Morris.js
Area Chart

<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script>
<meta charset=utf-8 />
<title>Morris.js Area Chart Example</title>
<script>
jQuery(document).ready(function($) {
Morris.
Area({
element: 'Area-example',
data: [
{ y: '2006', a: 100, b: 90 },
{ y: '2007', a: 75, b: 65 },
{ y: '2008', a: 50, b: 40 },
{ y: '2009', a: 75, b: 65 },
{ y: '2010', a: 50, b: 40 },
{ y: '2011', a: 75, b: 65 },
{ y: '2012', a: 100, b: 90 }
],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Series A', 'Series B']
});
});
</script>
</head>
<body>
<div style="width: 600px; height: 300px;" id="Area-example"></div>
</body>
</html>


실행결과









'CODE > jQuery 활용' 카테고리의 다른 글

[Chart] Easy Pie Chart  (0) 2016.03.25
[Chart] Morris.js Bar Chart  (0) 2016.03.25
[Chart] Morris.js Area Chart  (0) 2016.03.25
[Chart] Morris.js Line Chart  (0) 2016.03.25
[jQuery] jqGrid Multiple Footer 테이블  (0) 2014.05.09
[jQuery] jqGrid array 테이블  (0) 2014.05.08
Posted by 레이칸트
2016.03.25 19:17

[Chart] Morris.js Line Chart CODE/jQuery 활용2016.03.25 19:17

소 스


[Chart] Morris.js Line Chart

<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script>
<meta charset=utf-8 />
<title>Morris.js Line Chart Example</title>
<script>
jQuery(document).ready(function($) {
Morris.Line({
element: 'line-example',
data: [
{ y: '2006', a: 100, b: 90 },
{ y: '2007', a: 75, b: 65 },
{ y: '2008', a: 50, b: 40 },
{ y: '2009', a: 75, b: 65 },
{ y: '2010', a: 50, b: 40 },
{ y: '2011', a: 75, b: 65 },
{ y: '2012', a: 100, b: 90 }
],
xkey: 'y',
ykeys: ['a', 'b'],
labels: ['Series A', 'Series B']
});
});
</script>
</head>
<body>
<div style="width: 600px; height: 300px;" id="line-example"></div>
</body>
</html>


실행결과













'CODE > jQuery 활용' 카테고리의 다른 글

[Chart] Morris.js Bar Chart  (0) 2016.03.25
[Chart] Morris.js Area Chart  (0) 2016.03.25
[Chart] Morris.js Line Chart  (0) 2016.03.25
[jQuery] jqGrid Multiple Footer 테이블  (0) 2014.05.09
[jQuery] jqGrid array 테이블  (0) 2014.05.08
구글 지도 예제소스  (0) 2014.04.01
Posted by 레이칸트
2015.05.30 20:37

일본지진 나의 생활/주변사진2015.05.30 20:37

지진 좀전꺼 어질어질 전국적이네 이런적 별루 없는데​

'나의 생활 > 주변사진' 카테고리의 다른 글

일본지진  (0) 2015.05.30
일본어 단어  (0) 2015.05.29
집앞  (0) 2015.05.29
신주쿠 서쪽입구에서..  (0) 2015.05.22
중고매장에 올라온 요괴워치 메달  (0) 2015.05.19
동경 한복판에 낚시터  (0) 2015.05.19
Posted by 레이칸트
2015.05.29 16:46

일본어 단어 나의 생활/주변사진2015.05.29 16:46

단어​

'나의 생활 > 주변사진' 카테고리의 다른 글

일본지진  (0) 2015.05.30
일본어 단어  (0) 2015.05.29
집앞  (0) 2015.05.29
신주쿠 서쪽입구에서..  (0) 2015.05.22
중고매장에 올라온 요괴워치 메달  (0) 2015.05.19
동경 한복판에 낚시터  (0) 2015.05.19
Posted by 레이칸트
2015.05.29 16:05

집앞 나의 생활/주변사진2015.05.29 16:05

집앞​

'나의 생활 > 주변사진' 카테고리의 다른 글

일본지진  (0) 2015.05.30
일본어 단어  (0) 2015.05.29
집앞  (0) 2015.05.29
신주쿠 서쪽입구에서..  (0) 2015.05.22
중고매장에 올라온 요괴워치 메달  (0) 2015.05.19
동경 한복판에 낚시터  (0) 2015.05.19
Posted by 레이칸트

신주쿠 서쪽입구에서..​

'나의 생활 > 주변사진' 카테고리의 다른 글

일본어 단어  (0) 2015.05.29
집앞  (0) 2015.05.29
신주쿠 서쪽입구에서..  (0) 2015.05.22
중고매장에 올라온 요괴워치 메달  (0) 2015.05.19
동경 한복판에 낚시터  (0) 2015.05.19
간만에 둘러본 아키하바라  (0) 2015.05.19
Posted by 레이칸트
2015.05.20 12:27

토미카 나의 생활/취미2015.05.20 12:27

토미카

'나의 생활 > 취미' 카테고리의 다른 글

토미카  (0) 2015.05.20
요즘 재미나게하고있는 게임  (0) 2015.05.20
Posted by 레이칸트