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 |
댓글