프로그래밍/JavaScript

구글차트(Google Chart) 사용해서 그래프 생성하기 - Bar 차트

dev109 2017. 11. 2. 12:44
반응형

구글차트(google-chart)의 bar 그래프입니다. 주제와 데이터는 임의로 지정하였으며, 원한다면 DB의 데이터를 사용할 수 있습니다.



* 툴팁은 마우스 오버 시에 나타납니다.





소스코드

*html 한 페이지에 구성했습니다. (jsp파일에서도 당연히 사용 가능해요.)


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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>column chart</title>
</head>
 
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
 
<body>
  <!-- chart가 생성될 공간 -->
  <div id="bar_chart_div"></div>
</body>
 
<script>
google.charts.load('current', {'packages':['bar','corechart']});
 
    function schedulerSuccessAndFailChart() {
        var data = google.visualization.arrayToDataTable([
               ["Title","성공", {role:'annotation'}, "실패", {role:'annotation'}],
                        [""
                ,413, 413 //성공데이터
                ,24, 24] //실패데이터
       ]);
 
       var barChartOption = {
               bars: 'vertical',
               height :260,
               width :'100%',
               legend: { position: "top" },
               isStacked: false,
               tooltip:{textStyle : {fontSize:12}, showColorCode : true},
               animation: { //차트가 뿌려질때 실행될 애니메이션 효과
                 startup: true,
                 duration: 1000,
                 easing: 'linear' },
               annotations: {
                   textStyle: {
                     fontSize: 15,
                     bold: true,
                     italic: true,
                     color: '#871b47',
                     auraColor: '#d799ae',
                     opacity: 0.8
                   }
              }
        };
 
       var chart = new google.visualization.BarChart(document.getElementById('bar_chart_div'));
 
       chart.draw(data, barChartOption);
       //반응형 그래프 출력 - 반응형 그래프를 원하지 않을 시 제거하거나 주석처리 하세요.
       window.addEventListener('resize', function() { chart.draw(data, barChartOption); }, false);
    }
 
    google.charts.setOnLoadCallback(schedulerSuccessAndFailChart);
 
 
 
</script>
</html>
 
cs




옵션 맛보기 - 굵은 빨간 글씨가 위의 소스에서 변경한 옵션입니다.


var barChartOption = {
               bars: 'vertical',
               height :260,
               width :'100%',
               legend: { position: "right" },
               isStacked: false,
               tooltip:{textStyle : {fontSize:32}, showColorCode : false},
               animation: { //차트가 뿌려질때 실행될 애니메이션 효과
                 startup: true,
                 duration: 1000,
                 easing: 'linear' },
               annotations: {
                   textStyle: {
                     fontSize: 35,
                     bold: false,
                     italic: true,
                     color: '#871b47',
                     auraColor: '#d799ae',
                     opacity: 1.8
                   }
              }
        };





반응형
저작자표시 비영리