Notice
Recent Posts
Recent Comments
Link
«   2024/04   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
Total
관리 메뉴

moozi

introduce3.html 본문

TIS_2016/HTML5_4기

introduce3.html

moozi 2016. 10. 6. 14:59

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>아수라</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">    

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />

    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

    

    <!-- google chart ---------------------------------->

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

    <script type="text/javascript">

      google.charts.load("current", {packages:["corechart"]});

      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([

          ['Task', '평점'],

          ['1점',     7],

          ['2점',      3],

          ['3점',  4],

          ['4점', 5],

          ['5점',    12],

          ['6점',     12],

          ['7점',     15],

          ['8점',  17],

          ['9점', 9],

          ['10점',    16]  

        ]);


        var options = {

          title: '관람객 평점',

          is3D: true,

        };


        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));

        chart.draw(data, options);

      }

    </script>

    

    

    

    

    <style>

        .ui-block-a, .ui-block-b{

            font-size: 8px !important;

            padding-bottom: 5px;

        }

        .ui-block-a h6, .ui-block-b h6{

            color:blue;

        }

        .thumbnail{

            width:80px;

            float:left;

            padding-right:3px;

        }

    </style>

</head>

<body>

    <div data-role="page">

        <div data-role="header" data-position="fixed">

            <a href="index.html" data-icon="home" rel="external">home</a>

            <a href="index.html" data-icon="back" rel="external">prev</a>

            <h1>영화소개</h1>

            <div data-role="navbar">

                <ul>

                    <li><a href="introduce.html" rel="external">줄거리</a></li>

                    <li><a href="introduce2.html" rel="external">등장인물</a></li>

                    <li><a href="introduce3.html"  rel="external" class="ui-btn-active">평점</a></li>

                </ul>

            </div>

        </div>

        <div data-role="content">

           <h3>평점</h3>

           <div id="piechart_3d" style="width: 100%; height: 500px;"></div>

        </div>

        <div data-role="footer" data-position="fixed">

            <h1>&copy;CGV. All rights reserved.</h1>

        </div>

    </div>

</body>

</html>

'TIS_2016 > HTML5_4기' 카테고리의 다른 글

bootStrap연습문제01  (0) 2016.10.07
jQueryMobile 연습문제01  (0) 2016.10.06
introduce2.html  (0) 2016.10.06
html 연습문제05  (0) 2016.10.05
html 연습문제3,4  (0) 2016.10.04
'TIS_2016/HTML5_4기' Related Articles more
Comments