[레이더 표현] Nwagon 활용 [스프링, jsp 적용 sample]

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 내용을 입력하면 해당 레이더가 출력된다.