달력

7

« 2019/7 »

  •  
  • 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
  • 31
  •  
  •  
  •  
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 레이칸트