728x90
반응형
Nwagon.css
다운로드
Nwagon.js
다운로드
Nwagon.html
다운로드
Nwagon_no_vml.js
다운로드

 

Nwagon.css와 Nwagon.js를 알맞은 디렉토리에 넣어놓고, ex.jsp를 실행하면...

ex.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%> 
<html>
<head>
    <meta charset="utf-8">
    <title>데모버전</title>

    <style>
        *{margin:0;padding:0;}
        div{padding:0px; overflow: hidden; height: auto;}
        .hgroup{padding:20px;background-color:#e9e9e9;}
        .hgroup h1{font-family:Tahoma;}
        .hgroup p{margin:10px 0;font-size:10px}
        h2{margin:0;padding:20px;border:1px solid #000;background-color:#f9f9f9;border-width:1px 0;font-family:Tahoma;}
   </style>

    <link rel='stylesheet' href='/css/Nwagon.css' type='text/css'>
    <script src='/js/Nwagon.js'></script>

</head>
<h2>데모버전 레이더</h2>
    <div id="chart11"></div>
    <script>

        var options = {
            'legend':{
                names: ['고양이', 'Information', 'Understandable', 'Enough', 'Epilepsy', 'Operable', 'Navigation','Error'],
                hrefs: ['http://www.naver.com','#','#','#','#','#','#','#']
                    },
            'dataset': {
                title: 'Web accessibility status',
                values: [[33,53,67,23,78,45,69, 89], [53,67,23,78,45,69, 89, 33]], 
                bgColor: '#f9f9f9',
                fgColor: '#cc79a7'
            },
            'chartDiv': 'chart11',
            'chartType': 'radar',
            'chartSize': {width:600, height:300}
        };

        Nwagon.chart(options);

   </script>

위와같이 JSP 내용을 입력하면 해당 레이더가 출력된다.

 

 

 

728x90
반응형

'외부 라이브러리' 카테고리의 다른 글

[JavaScript/JS] 이미지 로딩, 로드 속도 개선 라이브러리  (0) 2018.04.23
구글 애널리틱스(GA) 통계 사용법  (0) 2017.12.01
[Javascript/JS] 리스트 더보기 기능 구현  (2) 2017.11.14
[JavaScript/JS] 카카오스토리 공유기능 만들기  (0) 2017.11.14

티스토리툴바