Web-Programming/Chart, Graphe - 그래프
[jQuery] 그래프 플러그인 - Protovis 플러그인
jQuery 그래프 플러그인인 Protovis 플러그 인입니다.
밑에 이미지에 보이시는 수많은 그래피 이미지들을 제공합니다.
저처럼 자바스크립트를 잘 모르시거나 예쁜 통계를 내고자 하시는 분들이 쓰시면 좋을듯..ㅎㅎ
IE에서는 작동하지 않습니다. FF에서~
제가 이거를 찾게된 계기가 구글 대시보드에 보면 그래프들이 많이 나옵니다.
보면서 jquery에도 저런게 있을 거 같은데 하는 느낌이 들어서 찾아봤죠.
ㅎㅎ
Bar & Column Charts
Source
<html>
<head>
<title>Bar Chart</title>
<link type="text/css" rel="stylesheet" href="ex.css?3.2"/>
<script type="text/javascript" src="../protovis-r3.2.js"></script>
<script type="text/javascript" src="bar.js"></script>
<style type="text/css">
#fig {
width: 430px;
height: 275px;
}
</style>
</head>
<body><div id="center"><div id="fig">
<script type="text/javascript+protovis">
/* Sizing and scales. */
var w = 400,
h = 250,
x = pv.Scale.linear(0, 1.1).range(0, w),
y = pv.Scale.ordinal(pv.range(10)).splitBanded(0, h, 4/5);
/* The root panel. */
var vis = new pv.Panel()
.width(w)
.height(h)
.bottom(20)
.left(20)
.right(10)
.top(5);
/* The bars. */
var bar = vis.add(pv.Bar)
.data(data)
.top(function() y(this.index))
.height(y.range().band)
.left(0)
.width(x);
/* The value label. */
bar.anchor("right").add(pv.Label)
.textStyle("white")
.text(function(d) d.toFixed(1));
/* The variable label. */
bar.anchor("left").add(pv.Label)
.textMargin(5)
.textAlign("right")
.text(function() "ABCDEFGHIJK".charAt(this.index));
/* X-axis ticks. */
vis.add(pv.Rule)
.data(x.ticks(5))
.left(x)
.strokeStyle(function(d) d ? "rgba(255,255,255,.3)" : "#000")
.add(pv.Rule)
.bottom(0)
.height(5)
.strokeStyle("#000")
.anchor("bottom").add(pv.Label)
.text(x.tickFormat);
vis.render();
</script>
</div></div></body>
</html>
Data
var data = pv.range(10).map(function(d) { return Math.random() + .1; });
예제 소스입니다. ㅎㅎ생각 외로 간단하네요.
다음에 시간날 때 저도 한번 써봐야겠습니다.
▼▼▼▼ 다운로드 ▼▼▼▼
'Web-Programming > Chart, Graphe - 그래프' 카테고리의 다른 글
| [ 웹 사이트 / 오픈소스 / 그래프 / 챠트 / 플래쉬 / flash ] OPEN FLASH CHART (0) | 2011.07.20 |
|---|---|
| [ 그래프 / 차트 / 자바스크립트 / javascript / 웹 프로그래밍 ] Highcharts 다운로드 (1) | 2011.07.05 |
댓글