NVD3을 이용하기 위해서는 다음을 다운로드받는다.
필요한 파일은,
d3.min.js
nv.d3.min.js
nv.d3.min.css
세개이며, 다음과 같이 <head>에 추가한다.
js파일은 html파일 위 js폴더에 있다고 가정한다.
<script src="js/d3.min.js"></script>
<script src="js/nv.d3.min.js"></script>
<link rel="stylesheet" type="text/css" href="js/nv.d3.min.css">
<body>에는 다음과 같이 추가한다.
<div id="chart">
<svg style="height:80px">
</svg>
</div>
모든준비는 완료되었다. 홈페이지에 있는 그대로의 코드 포함 전체 코드다.
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>D3.js GetStarted</title><!-- D3.js 추가 -->
<script src="js/d3.min.js"></script>
<script src="js/nv.d3.min.js"></script>
<link rel="stylesheet" type="text/css" href="js/nv.d3.min.css">
<style>
</style>
</head>
<body>
<div id="chart">
<svg style="height:80px">
</svg>
</div>
<script>
nv.addGraph(function() {
var chart = nv.models.bulletChart();d3.select('#chart svg')
.datum(exampleData())
.transition().duration(1000)
.call(chart);return chart;
});
function exampleData() {
return {
"title":"Revenue", //Label the bullet chart
"subtitle":"US$, in thousands", //sub-label for bullet chart
"ranges":[150,225,300], //Minimum, mean and maximum values.
"measures":[220], //Value representing current measurement (the thick blue line in the example)
"markers":[250] //Place a marker on the chart (the white triangle marker)
};
}
</script></body>
</html>
*css를 추가하지않으면, 이상한 검정색으로 나타나기 때문에, 조심한다.
'웹 & 프레임워크' 카테고리의 다른 글
| [링크] RESTful (0) | 2016.12.03 |
|---|---|
| visual studio (비주얼스튜디오) 이용시 npm not installed (2) | 2016.10.04 |
| JavaScript Trend (0) | 2015.12.30 |
| [목업 프로젝트] MPLD3 과 데이터 시각화. (1) | 2015.12.30 |
| [목업 프로젝트] 테마 꾸미기 (0) | 2015.12.26 |