html5jp_graphs 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/.gitigore +2 -0
- data/README.rdoc +82 -0
- data/Rakefile +22 -0
- data/html5jp_graphs.gemspec +17 -0
- data/lib/examples/sample_graph_circle_1.html +54 -0
- data/lib/examples/sample_graph_circle_2.html +61 -0
- data/lib/examples/sample_graph_line_1.html +44 -0
- data/lib/examples/sample_graph_line_2.html +53 -0
- data/lib/examples/sample_graph_radar_1.html +47 -0
- data/lib/examples/sample_graph_radar_2.html +52 -0
- data/lib/examples/sample_graph_vbar_1.html +51 -0
- data/lib/examples/sample_graph_vbar_2.html +52 -0
- data/lib/examples/sample_graph_vbar_3.html +52 -0
- data/lib/examples/sample_graph_vbar_4.html +52 -0
- data/lib/generators/html5jp_graphs/USAGE +8 -0
- data/lib/generators/html5jp_graphs/html5jp_graphs_generator.rb +12 -0
- data/lib/generators/html5jp_graphs/templates/excanvas/AUTHORS +10 -0
- data/lib/generators/html5jp_graphs/templates/excanvas/COPYING +202 -0
- data/lib/generators/html5jp_graphs/templates/excanvas/README +22 -0
- data/lib/generators/html5jp_graphs/templates/excanvas/examples/example1.html +93 -0
- data/lib/generators/html5jp_graphs/templates/excanvas/examples/example2.html +513 -0
- data/lib/generators/html5jp_graphs/templates/excanvas/examples/example3.html +284 -0
- data/lib/generators/html5jp_graphs/templates/excanvas/examples/ff.jpg +0 -0
- data/lib/generators/html5jp_graphs/templates/excanvas/excanvas-compressed.js +19 -0
- data/lib/generators/html5jp_graphs/templates/excanvas/excanvas.js +785 -0
- data/lib/generators/html5jp_graphs/templates/excanvas/testcases/arc.html +49 -0
- data/lib/generators/html5jp_graphs/templates/excanvas/testcases/linewidth.html +47 -0
- data/lib/generators/html5jp_graphs/templates/excanvas/testcases/overflow.html +37 -0
- data/lib/generators/html5jp_graphs/templates/excanvas/testcases/quadraticcurve.html +74 -0
- data/lib/generators/html5jp_graphs/templates/excanvas/testcases/resizing.html +65 -0
- data/lib/generators/html5jp_graphs/templates/graph/circle.js +407 -0
- data/lib/generators/html5jp_graphs/templates/graph/line.js +577 -0
- data/lib/generators/html5jp_graphs/templates/graph/radar.js +545 -0
- data/lib/generators/html5jp_graphs/templates/graph/vbar.js +1156 -0
- data/lib/html5jp_graphs.rb +1 -0
- data/lib/html5jp_graphs/version.rb +3 -0
- data/lib/html5jp_graphs_helper.rb +255 -0
- data/tasks/html5jp_graphs_tasks.rake +4 -0
- data/test/html5jp_graphs_test.rb +8 -0
- metadata +88 -0
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>Arc Test</title>
|
|
5
|
+
<style>
|
|
6
|
+
|
|
7
|
+
body {
|
|
8
|
+
text-align: center
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
</style>
|
|
12
|
+
<!--[if IE]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->
|
|
13
|
+
<script>
|
|
14
|
+
|
|
15
|
+
window.onload = function() {
|
|
16
|
+
var ctx = document.getElementById('c').getContext('2d');
|
|
17
|
+
|
|
18
|
+
ctx.beginPath();
|
|
19
|
+
ctx.arc(25, 25, 20, 0, Math.PI, false);
|
|
20
|
+
ctx.stroke();
|
|
21
|
+
|
|
22
|
+
ctx.save();
|
|
23
|
+
ctx.scale(0.5, 0.5);
|
|
24
|
+
ctx.beginPath();
|
|
25
|
+
ctx.arc(75, 25, 20, 0, Math.PI * 2, false);
|
|
26
|
+
ctx.stroke();
|
|
27
|
+
ctx.restore();
|
|
28
|
+
|
|
29
|
+
ctx.beginPath();
|
|
30
|
+
ctx.arc(25, 75, 20, 0, Math.PI, true);
|
|
31
|
+
ctx.stroke();
|
|
32
|
+
|
|
33
|
+
ctx.beginPath();
|
|
34
|
+
ctx.arc(75, 75, 20, 0, Math.PI * 2, true);
|
|
35
|
+
ctx.stroke();
|
|
36
|
+
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
</script>
|
|
40
|
+
</head>
|
|
41
|
+
<body>
|
|
42
|
+
|
|
43
|
+
<canvas id=c width=200 height=100></canvas>
|
|
44
|
+
|
|
45
|
+
<p>This tests that drawing arches work in the same way in different
|
|
46
|
+
browsers.</p>
|
|
47
|
+
|
|
48
|
+
</body>
|
|
49
|
+
</html>
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>Line Width Test</title>
|
|
5
|
+
<style>
|
|
6
|
+
|
|
7
|
+
body {
|
|
8
|
+
text-align: center
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
</style>
|
|
12
|
+
<!--[if IE]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->
|
|
13
|
+
<script>
|
|
14
|
+
|
|
15
|
+
window.onload = function() {
|
|
16
|
+
var ctx = document.getElementById('c').getContext('2d');
|
|
17
|
+
|
|
18
|
+
ctx.strokeStyle = 'black';
|
|
19
|
+
ctx.lineWidth = 1;
|
|
20
|
+
for (var i = 0; i < 100; i++) {
|
|
21
|
+
ctx.beginPath();
|
|
22
|
+
ctx.moveTo(49 + i / 100, i);
|
|
23
|
+
ctx.lineTo(49 + i / 100, i + 1);
|
|
24
|
+
ctx.closePath();
|
|
25
|
+
ctx.stroke();
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
for (var i = 0; i < 100; i++) {
|
|
29
|
+
ctx.beginPath();
|
|
30
|
+
ctx.moveTo(i, 49 + i / 100);
|
|
31
|
+
ctx.lineTo(i + 1, 49 + i / 100);
|
|
32
|
+
ctx.closePath();
|
|
33
|
+
ctx.stroke();
|
|
34
|
+
}
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
</script>
|
|
38
|
+
</head>
|
|
39
|
+
<body>
|
|
40
|
+
|
|
41
|
+
<canvas id=c width=100 height=100></canvas>
|
|
42
|
+
|
|
43
|
+
<p>This tests that lines work in the same way in different browsers when you are
|
|
44
|
+
using sub pixel coordinates.</p>
|
|
45
|
+
|
|
46
|
+
</body>
|
|
47
|
+
</html>
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>Overflow Test</title>
|
|
5
|
+
<style>
|
|
6
|
+
|
|
7
|
+
body {
|
|
8
|
+
text-align: center
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
</style>
|
|
12
|
+
<!--[if IE]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->
|
|
13
|
+
<script>
|
|
14
|
+
|
|
15
|
+
window.onload = function() {
|
|
16
|
+
var ctx = document.getElementById('c').getContext('2d');
|
|
17
|
+
|
|
18
|
+
ctx.fillStyle = 'blue';
|
|
19
|
+
ctx.fillRect(-50, -50, 100, 100);
|
|
20
|
+
|
|
21
|
+
ctx.fillStyle = 'green';
|
|
22
|
+
ctx.fillRect(50, 50, 100, 100);
|
|
23
|
+
|
|
24
|
+
ctx.strokeStyle = 'black';
|
|
25
|
+
ctx.strokeRect(0, 0, 100, 100);
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
</script>
|
|
29
|
+
</head>
|
|
30
|
+
<body>
|
|
31
|
+
|
|
32
|
+
<canvas id=c width=100 height=100></canvas>
|
|
33
|
+
|
|
34
|
+
<p>This tests if content gets cropped if painting outside the canvas.</p>
|
|
35
|
+
|
|
36
|
+
</body>
|
|
37
|
+
</html>
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<title>Quadratic Curve Test</title>
|
|
5
|
+
<style>
|
|
6
|
+
|
|
7
|
+
body {
|
|
8
|
+
text-align: center
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
</style>
|
|
12
|
+
<!--[if IE]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->
|
|
13
|
+
<script>
|
|
14
|
+
|
|
15
|
+
window.onload = function() {
|
|
16
|
+
var ctx = document.getElementById('c').getContext('2d');
|
|
17
|
+
|
|
18
|
+
ctx.strokeStyle = 'black';
|
|
19
|
+
ctx.lineWidth = 1;
|
|
20
|
+
ctx.beginPath();
|
|
21
|
+
ctx.moveTo(50, 50);
|
|
22
|
+
ctx.quadraticCurveTo(0, 0, 25, 75);
|
|
23
|
+
ctx.quadraticCurveTo(50, 0, 50, 50);
|
|
24
|
+
ctx.stroke();
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
</script>
|
|
28
|
+
</head>
|
|
29
|
+
<body>
|
|
30
|
+
|
|
31
|
+
<canvas id=c width=100 height=100></canvas>
|
|
32
|
+
|
|
33
|
+
<p>This tests that drawing quadratic curves work in the same way in different
|
|
34
|
+
browsers.</p>
|
|
35
|
+
|
|
36
|
+
</body>
|
|
37
|
+
</html>
|
|
38
|
+
<!DOCTYPE html>
|
|
39
|
+
<html>
|
|
40
|
+
<head>
|
|
41
|
+
<title>Quadratic Curve Test</title>
|
|
42
|
+
<style>
|
|
43
|
+
|
|
44
|
+
body {
|
|
45
|
+
text-align: center
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
</style>
|
|
49
|
+
<!--[if IE]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->
|
|
50
|
+
<script>
|
|
51
|
+
|
|
52
|
+
window.onload = function() {
|
|
53
|
+
var ctx = document.getElementById('c').getContext('2d');
|
|
54
|
+
|
|
55
|
+
ctx.strokeStyle = 'black';
|
|
56
|
+
ctx.lineWidth = 1;
|
|
57
|
+
ctx.beginPath();
|
|
58
|
+
ctx.moveTo(50, 50);
|
|
59
|
+
ctx.quadraticCurveTo(0, 0, 25, 75);
|
|
60
|
+
ctx.quadraticCurveTo(50, 0, 50, 50);
|
|
61
|
+
ctx.stroke();
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
</script>
|
|
65
|
+
</head>
|
|
66
|
+
<body>
|
|
67
|
+
|
|
68
|
+
<canvas id=c width=100 height=100></canvas>
|
|
69
|
+
|
|
70
|
+
<p>This tests that drawing quadratic curves work in the same way in different
|
|
71
|
+
browsers.</p>
|
|
72
|
+
|
|
73
|
+
</body>
|
|
74
|
+
</html>
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
<html>
|
|
2
|
+
<head>
|
|
3
|
+
<title>ExplorerCanvas Text Case</title>
|
|
4
|
+
<!--[if IE]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->
|
|
5
|
+
<script>
|
|
6
|
+
// Safari is known not to handle resizing well, expect this to
|
|
7
|
+
// compare to Firefox
|
|
8
|
+
|
|
9
|
+
var cv, ctx, size = 80;
|
|
10
|
+
var img = new Image();
|
|
11
|
+
img.src = "../examples/ff.jpg";
|
|
12
|
+
|
|
13
|
+
function a() {
|
|
14
|
+
cv = document.getElementById("aa");
|
|
15
|
+
ctx = cv.getContext("2d");
|
|
16
|
+
|
|
17
|
+
l();
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
function l() {
|
|
21
|
+
size = (size + 1) % 800;
|
|
22
|
+
cv.width = Number(size + 200);
|
|
23
|
+
cv.height = Number((size + 200) / 2);
|
|
24
|
+
|
|
25
|
+
// Firefox autoclears the canvas at this point
|
|
26
|
+
|
|
27
|
+
ctx.save();
|
|
28
|
+
ctx.translate(50, 50);
|
|
29
|
+
ctx.scale(0.1, 0.1);
|
|
30
|
+
ctx.rotate(size/800 * Math.PI*8);
|
|
31
|
+
ctx.drawImage(img, 0, -75);
|
|
32
|
+
ctx.restore();
|
|
33
|
+
|
|
34
|
+
ctx.save();
|
|
35
|
+
ctx.beginPath();
|
|
36
|
+
ctx.moveTo(0, 0);
|
|
37
|
+
ctx.lineTo(cv.width, cv.height);
|
|
38
|
+
ctx.moveTo(20, 20);
|
|
39
|
+
ctx.lineTo(80, 20);
|
|
40
|
+
ctx.lineTo(80, 80);
|
|
41
|
+
ctx.lineTo(20, 80);
|
|
42
|
+
ctx.stroke();
|
|
43
|
+
ctx.closePath();
|
|
44
|
+
ctx.restore();
|
|
45
|
+
|
|
46
|
+
ctx.save();
|
|
47
|
+
ctx.beginPath();
|
|
48
|
+
ctx.scale(size / 200, size / 200);
|
|
49
|
+
ctx.arc(100, 50, 20, 0, Math.PI, true);
|
|
50
|
+
ctx.fill();
|
|
51
|
+
ctx.restore();
|
|
52
|
+
|
|
53
|
+
setTimeout(l, 50);
|
|
54
|
+
}
|
|
55
|
+
</script>
|
|
56
|
+
<style>
|
|
57
|
+
canvas {
|
|
58
|
+
background-color:#eee;
|
|
59
|
+
}
|
|
60
|
+
</style>
|
|
61
|
+
</head>
|
|
62
|
+
<body onload="a();">
|
|
63
|
+
<canvas id="aa" width="200" height="200"></canvas>
|
|
64
|
+
</body>
|
|
65
|
+
</html>
|
|
@@ -0,0 +1,407 @@
|
|
|
1
|
+
// Copyright 2007 futomi http://www.html5.jp/
|
|
2
|
+
//
|
|
3
|
+
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
// you may not use this file except in compliance with the License.
|
|
5
|
+
// You may obtain a copy of the License at
|
|
6
|
+
//
|
|
7
|
+
// http://www.apache.org/licenses/LICENSE-2.0
|
|
8
|
+
//
|
|
9
|
+
// Unless required by applicable law or agreed to in writing, software
|
|
10
|
+
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
11
|
+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
12
|
+
// See the License for the specific language governing permissions and
|
|
13
|
+
// limitations under the License.
|
|
14
|
+
|
|
15
|
+
if( typeof html5jp == 'undefined' ) {
|
|
16
|
+
html5jp = new Object();
|
|
17
|
+
}
|
|
18
|
+
if( typeof html5jp.graph == 'undefined' ) {
|
|
19
|
+
html5jp.graph = new Object();
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
|
23
|
+
* コンストラクタ
|
|
24
|
+
* ---------------------------------------------------------------- */
|
|
25
|
+
html5jp.graph.circle = function (id) {
|
|
26
|
+
var elm = document.getElementById(id);
|
|
27
|
+
if(! elm) { return; }
|
|
28
|
+
if(elm.nodeName != "CANVAS") { return; }
|
|
29
|
+
if(elm.parentNode.nodeName != "DIV") { return; };
|
|
30
|
+
this.canvas = elm;
|
|
31
|
+
/* CANVAS要素 */
|
|
32
|
+
if ( ! this.canvas ){ return; }
|
|
33
|
+
if ( ! this.canvas.getContext ){ return; }
|
|
34
|
+
/* 2D コンテクストの生成 */
|
|
35
|
+
this.ctx = this.canvas.getContext('2d');
|
|
36
|
+
this.canvas.style.margin = "0";
|
|
37
|
+
this.canvas.parentNode.style.position = "relative";
|
|
38
|
+
this.canvas.parentNode.style.padding = "0";
|
|
39
|
+
};
|
|
40
|
+
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
|
41
|
+
* 描画
|
|
42
|
+
* ---------------------------------------------------------------- */
|
|
43
|
+
html5jp.graph.circle.prototype.draw = function(items, inparams) {
|
|
44
|
+
if( ! this.ctx ) {return;}
|
|
45
|
+
/* パラメータの初期化 */
|
|
46
|
+
var params = {
|
|
47
|
+
backgroundColor: null,
|
|
48
|
+
shadow: true,
|
|
49
|
+
border: false,
|
|
50
|
+
caption: false,
|
|
51
|
+
captionNum: true,
|
|
52
|
+
captionRate: true,
|
|
53
|
+
fontSize: "12px",
|
|
54
|
+
fontFamily: "Arial,sans-serif",
|
|
55
|
+
textShadow: true,
|
|
56
|
+
captionColor: "#ffffff",
|
|
57
|
+
startAngle: -90,
|
|
58
|
+
legend: true,
|
|
59
|
+
legendFontSize: "12px",
|
|
60
|
+
legendFontFamily: "Arial,sans-serif",
|
|
61
|
+
legendColor: "#000000",
|
|
62
|
+
otherCaption: "other"
|
|
63
|
+
};
|
|
64
|
+
if( inparams && typeof(inparams) == 'object' ) {
|
|
65
|
+
for( var key in inparams ) {
|
|
66
|
+
params[key] = inparams[key];
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
this.params = params;
|
|
70
|
+
/* CANVASの背景を塗る */
|
|
71
|
+
if( params.backgroundColor ) {
|
|
72
|
+
this.ctx.beginPath();
|
|
73
|
+
this.ctx.fillStyle = params.backgroundColor;
|
|
74
|
+
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
|
|
75
|
+
}
|
|
76
|
+
/* CANVAS要素の横幅が縦幅の1.5倍未満、または縦幅が200未満であれば凡例は強制的に非表示 */
|
|
77
|
+
if(this.canvas.width / this.canvas.height < 1.5 || this.canvas.height < 200) {
|
|
78
|
+
params.legend == false;
|
|
79
|
+
}
|
|
80
|
+
/* CANVAS要素の座標 */
|
|
81
|
+
var canvas_pos = this._getElementAbsPos(this.canvas);
|
|
82
|
+
/* 円グラフの中心座標と半径 */
|
|
83
|
+
var cpos = {
|
|
84
|
+
x: this.canvas.width / 2,
|
|
85
|
+
y: this.canvas.height / 2,
|
|
86
|
+
r: Math.min(this.canvas.width, this.canvas.height) * 0.8 / 2
|
|
87
|
+
};
|
|
88
|
+
/* 10項目を超えていれば、10項目目以降を"その他"に統合 */
|
|
89
|
+
items = this._fold_items(items);
|
|
90
|
+
var item_num = items.length;
|
|
91
|
+
/* 凡例表示の場合の円グラフ中心x座標と、凡例の各種座標を算出 */
|
|
92
|
+
if(params.legend == true) {
|
|
93
|
+
/* 円グラフ中心x座標 */
|
|
94
|
+
cpos.x = this.canvas.height * 0.1 + cpos.r;
|
|
95
|
+
/* DIV要素を仮に挿入してみて高さを調べる(1行分の高さ) */
|
|
96
|
+
var tmpdiv = document.createElement('DIV');
|
|
97
|
+
tmpdiv.appendChild( document.createTextNode('あTEST') );
|
|
98
|
+
tmpdiv.style.fontSize = params.legendFontSize;
|
|
99
|
+
tmpdiv.style.fontFamily = params.legendFontFamily;
|
|
100
|
+
tmpdiv.style.color = params.legendColor;
|
|
101
|
+
tmpdiv.style.margin = "0";
|
|
102
|
+
tmpdiv.style.padding = "0";
|
|
103
|
+
tmpdiv.style.visible = "hidden";
|
|
104
|
+
tmpdiv.style.position = "absolute";
|
|
105
|
+
tmpdiv.style.left = canvas_pos.x.toString() + "px";
|
|
106
|
+
tmpdiv.style.top = canvas_pos.y.toString() + "px";
|
|
107
|
+
this.canvas.parentNode.appendChild(tmpdiv);
|
|
108
|
+
/* 凡例の各種座標を算出 */
|
|
109
|
+
var lpos = {
|
|
110
|
+
x: this.canvas.height * 0.2 + cpos.r * 2,
|
|
111
|
+
y: ( this.canvas.height - ( tmpdiv.offsetHeight * item_num + tmpdiv.offsetHeight * 0.2 * (item_num - 1) ) ) / 2,
|
|
112
|
+
h: tmpdiv.offsetHeight
|
|
113
|
+
};
|
|
114
|
+
lpos.cx = lpos.x + lpos.h * 1.4; // 文字表示開始位置(x座標)
|
|
115
|
+
lpos.cw = this.canvas.width - lpos.cx; // 文字表示幅
|
|
116
|
+
/* 仮に挿入したDIV要素を削除 */
|
|
117
|
+
tmpdiv.parentNode.removeChild(tmpdiv);
|
|
118
|
+
}
|
|
119
|
+
/* 外円の影 */
|
|
120
|
+
if( params.shadow == true ) {
|
|
121
|
+
this._make_shadow(cpos);
|
|
122
|
+
}
|
|
123
|
+
/* 外円を黒で塗りつぶす */
|
|
124
|
+
this.ctx.beginPath();
|
|
125
|
+
this.ctx.arc(cpos.x, cpos.y, cpos.r, 0, Math.PI*2, false)
|
|
126
|
+
this.ctx.closePath();
|
|
127
|
+
this.ctx.fillStyle = "black";
|
|
128
|
+
this.ctx.fill();
|
|
129
|
+
/* 全項目の値の合計を算出 */
|
|
130
|
+
var sum = 0;
|
|
131
|
+
for(var i=0; i<item_num; i++) {
|
|
132
|
+
var n = items[i][1];
|
|
133
|
+
if( isNaN(n) || n <=0 ) {
|
|
134
|
+
throw new Error('invalid graph item data.' + n);
|
|
135
|
+
}
|
|
136
|
+
sum += n;
|
|
137
|
+
}
|
|
138
|
+
if(sum <= 0) {
|
|
139
|
+
throw new Error('invalid graph item data.');
|
|
140
|
+
}
|
|
141
|
+
/* 各項目のデフォルト色を定義 */
|
|
142
|
+
var colors = ["24,41,206", "198,0,148", "214,0,0", "255,156,0", "33,156,0", "33,41,107", "115,0,90", "132,0,0", "165,99,0", "24,123,0"];
|
|
143
|
+
/* 円グラフを描写 */
|
|
144
|
+
var rates = new Array();
|
|
145
|
+
var startAngle = this._degree2radian(params.startAngle);
|
|
146
|
+
for(var i=0; i<item_num; i++) {
|
|
147
|
+
/* 項目の名前 */
|
|
148
|
+
var cap = items[i][0];
|
|
149
|
+
/* 項目の値 */
|
|
150
|
+
var n = items[i][1];
|
|
151
|
+
/* 比率 */
|
|
152
|
+
var r = n / sum;
|
|
153
|
+
/* パーセント */
|
|
154
|
+
var p = Math.round(r * 1000) / 10;
|
|
155
|
+
/* 描写角度（ラジアン） */
|
|
156
|
+
var rad = this._degree2radian(360*r);
|
|
157
|
+
/* 円弧終点角度 */
|
|
158
|
+
endAngle = startAngle + rad;
|
|
159
|
+
/* 円弧を描画 */
|
|
160
|
+
this.ctx.beginPath();
|
|
161
|
+
this.ctx.moveTo(cpos.x,cpos.y);
|
|
162
|
+
this.ctx.lineTo(
|
|
163
|
+
cpos.x + cpos.r * Math.cos(startAngle),
|
|
164
|
+
cpos.y + cpos.r * Math.sin(startAngle)
|
|
165
|
+
);
|
|
166
|
+
this.ctx.arc(cpos.x, cpos.y, cpos.r, startAngle, endAngle, false);
|
|
167
|
+
this.ctx.closePath();
|
|
168
|
+
/* 円グラフの色を特定 */
|
|
169
|
+
var rgb = colors[i];
|
|
170
|
+
var rgbo = this._csscolor2rgb(items[i][2]);
|
|
171
|
+
if(rgbo) {
|
|
172
|
+
rgb = rgbo.r + "," + rgbo.g + "," + rgbo.b;
|
|
173
|
+
}
|
|
174
|
+
/* 円グラフのグラデーションをセット */
|
|
175
|
+
var radgrad = this.ctx.createRadialGradient(cpos.x,cpos.y,0,cpos.x,cpos.y,cpos.r);
|
|
176
|
+
radgrad.addColorStop(0, "rgba(" + rgb + ",1)");
|
|
177
|
+
radgrad.addColorStop(0.7, "rgba(" + rgb + ",0.85)");
|
|
178
|
+
radgrad.addColorStop(1, "rgba(" + rgb + ",0.75)");
|
|
179
|
+
this.ctx.fillStyle = radgrad;
|
|
180
|
+
this.ctx.fill();
|
|
181
|
+
/* 円弧の枠線 */
|
|
182
|
+
if(params.border == true) {
|
|
183
|
+
this.ctx.stroke();
|
|
184
|
+
}
|
|
185
|
+
/* キャプション */
|
|
186
|
+
var drate;
|
|
187
|
+
var fontSize;
|
|
188
|
+
if(r <= 0.03) {
|
|
189
|
+
drate = 1.1;
|
|
190
|
+
} else if(r <= 0.05) {
|
|
191
|
+
drate = 0.9;
|
|
192
|
+
} else if(r <= 0.1) {
|
|
193
|
+
drate = 0.8;
|
|
194
|
+
} else if(r <= 0.15) {
|
|
195
|
+
drate = 0.7;
|
|
196
|
+
} else {
|
|
197
|
+
drate = 0.6;
|
|
198
|
+
}
|
|
199
|
+
var cp = {
|
|
200
|
+
x: cpos.x + (cpos.r * drate) * Math.cos( (startAngle + endAngle) / 2 ),
|
|
201
|
+
y: cpos.y + (cpos.r * drate) * Math.sin( (startAngle + endAngle) / 2 )
|
|
202
|
+
};
|
|
203
|
+
var div = document.createElement('DIV');
|
|
204
|
+
if(r <= 0.05) {
|
|
205
|
+
if(params.captionRate == true) {
|
|
206
|
+
div.appendChild( document.createTextNode( p + "%") );
|
|
207
|
+
}
|
|
208
|
+
} else {
|
|
209
|
+
if(params.caption == true) {
|
|
210
|
+
div.appendChild( document.createTextNode(cap) );
|
|
211
|
+
if(params.captionNum == true || params.captionRate == true) {
|
|
212
|
+
div.appendChild( document.createElement('BR') );
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
if(params.captionRate == true) {
|
|
216
|
+
div.appendChild( document.createTextNode( p + "%" ) );
|
|
217
|
+
}
|
|
218
|
+
if(params.captionNum == true) {
|
|
219
|
+
var numCap = n;
|
|
220
|
+
if(params.caption == true || params.captionRate == true) {
|
|
221
|
+
numCap = "(" + numCap + ")";
|
|
222
|
+
}
|
|
223
|
+
div.appendChild( document.createTextNode( numCap ) );
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
div.style.position = 'absolute';
|
|
227
|
+
div.style.textAlign = 'center';
|
|
228
|
+
div.style.color = params.captionColor;
|
|
229
|
+
div.style.fontSize = params.fontSize;
|
|
230
|
+
div.style.fontFamily = params.fontFamily;
|
|
231
|
+
div.style.margin = "0";
|
|
232
|
+
div.style.padding = "0";
|
|
233
|
+
div.style.visible = "hidden";
|
|
234
|
+
if( params.textShadow == true ) {
|
|
235
|
+
var dif = [ [ 0, 1], [ 0, -1], [ 1, 0], [ 1, 1], [ 1, -1], [-1, 0], [-1, 1], [-1, -1] ];
|
|
236
|
+
for(var j=0; j<8; j++) {
|
|
237
|
+
var s = div.cloneNode(true);
|
|
238
|
+
this.canvas.parentNode.appendChild(s);
|
|
239
|
+
s.style.color = "black";
|
|
240
|
+
s.style.left = (parseFloat(cp.x - s.offsetWidth / 2 + dif[j][0])).toString() + "px";
|
|
241
|
+
s.style.top = (cp.y - s.offsetHeight / 2 + dif[j][1]).toString() + "px";
|
|
242
|
+
}
|
|
243
|
+
}
|
|
244
|
+
this.canvas.parentNode.appendChild(div);
|
|
245
|
+
div.style.left = (cp.x - div.offsetWidth / 2).toString() + "px";
|
|
246
|
+
div.style.top = (cp.y - div.offsetHeight / 2).toString() + "px";
|
|
247
|
+
/* 凡例 */
|
|
248
|
+
if(params.legend == true) {
|
|
249
|
+
/* 文字 */
|
|
250
|
+
var ltxt = document.createElement('DIV');
|
|
251
|
+
ltxt.appendChild( document.createTextNode(cap) );
|
|
252
|
+
ltxt.style.position = "absolute";
|
|
253
|
+
ltxt.style.fontSize = params.legendFontSize;
|
|
254
|
+
ltxt.style.fontFamily = params.legendFontFamily;
|
|
255
|
+
ltxt.style.color = params.legendColor;
|
|
256
|
+
ltxt.style.margin = "0";
|
|
257
|
+
ltxt.style.padding = "0";
|
|
258
|
+
ltxt.style.left = lpos.cx.toString() + "px";
|
|
259
|
+
ltxt.style.top = lpos.y.toString() + "px";
|
|
260
|
+
ltxt.style.width = (lpos.cw).toString() + "px";
|
|
261
|
+
ltxt.style.whiteSpace = "nowrap";
|
|
262
|
+
ltxt.style.overflow = "hidden";
|
|
263
|
+
this.canvas.parentNode.appendChild(ltxt);
|
|
264
|
+
/* 記号の影 */
|
|
265
|
+
if( params.shadow == true ) {
|
|
266
|
+
this.ctx.beginPath();
|
|
267
|
+
this.ctx.rect(lpos.x+1, lpos.y+1, lpos.h, lpos.h);
|
|
268
|
+
this.ctx.fillStyle = "#222222";
|
|
269
|
+
this.ctx.fill();
|
|
270
|
+
}
|
|
271
|
+
/* 記号 */
|
|
272
|
+
this.ctx.beginPath();
|
|
273
|
+
this.ctx.rect(lpos.x, lpos.y, lpos.h, lpos.h);
|
|
274
|
+
this.ctx.fillStyle = "black";
|
|
275
|
+
this.ctx.fill();
|
|
276
|
+
this.ctx.beginPath();
|
|
277
|
+
this.ctx.rect(lpos.x, lpos.y, lpos.h, lpos.h);
|
|
278
|
+
var symbolr = {
|
|
279
|
+
x: lpos.x + lpos.h / 2,
|
|
280
|
+
y: lpos.y + lpos.h / 2,
|
|
281
|
+
r: Math.sqrt(lpos.h * lpos.h * 2) / 2
|
|
282
|
+
};
|
|
283
|
+
var legend_radgrad = this.ctx.createRadialGradient(symbolr.x,symbolr.y,0,symbolr.x,symbolr.y,symbolr.r);
|
|
284
|
+
legend_radgrad.addColorStop(0, "rgba(" + rgb + ",1)");
|
|
285
|
+
legend_radgrad.addColorStop(0.7, "rgba(" + rgb + ",0.85)");
|
|
286
|
+
legend_radgrad.addColorStop(1, "rgba(" + rgb + ",0.75)");
|
|
287
|
+
this.ctx.fillStyle = legend_radgrad;
|
|
288
|
+
this.ctx.fill();
|
|
289
|
+
/* */
|
|
290
|
+
lpos.y = lpos.y + lpos.h * 1.2;
|
|
291
|
+
}
|
|
292
|
+
/* */
|
|
293
|
+
startAngle = endAngle;
|
|
294
|
+
}
|
|
295
|
+
};
|
|
296
|
+
|
|
297
|
+
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
|
298
|
+
* 以下、内部関数
|
|
299
|
+
* ──────────────────────────────── */
|
|
300
|
+
|
|
301
|
+
/* ------------------------------------------------------------------
|
|
302
|
+
項目を10項目以内にまとめる
|
|
303
|
+
* ---------------------------------------------------------------- */
|
|
304
|
+
html5jp.graph.circle.prototype._fold_items = function(items) {
|
|
305
|
+
var len = items.length;
|
|
306
|
+
if(len <= 10) { return items; }
|
|
307
|
+
var n = 0;
|
|
308
|
+
for( var i=9; i<len; i++ ) {
|
|
309
|
+
n += items[i][1];
|
|
310
|
+
}
|
|
311
|
+
var newitems = items.slice(0, 10);
|
|
312
|
+
newitems[9] = [this.params.otherCaption, n];
|
|
313
|
+
return newitems;
|
|
314
|
+
};
|
|
315
|
+
|
|
316
|
+
/* ------------------------------------------------------------------
|
|
317
|
+
ブラウザー表示領域左上端を基点とする座標系におけるelmの左上端の座標
|
|
318
|
+
* ---------------------------------------------------------------- */
|
|
319
|
+
html5jp.graph.circle.prototype._getElementAbsPos = function(elm) {
|
|
320
|
+
var obj = new Object();
|
|
321
|
+
obj.x = elm.offsetLeft;
|
|
322
|
+
obj.y = elm.offsetTop;
|
|
323
|
+
while(elm.offsetParent) {
|
|
324
|
+
elm = elm.offsetParent;
|
|
325
|
+
obj.x += elm.offsetLeft;
|
|
326
|
+
obj.y += elm.offsetTop;
|
|
327
|
+
}
|
|
328
|
+
return obj;
|
|
329
|
+
};
|
|
330
|
+
|
|
331
|
+
/* ------------------------------------------------------------------
|
|
332
|
+
* シャドーの生成
|
|
333
|
+
* ---------------------------------------------------------------- */
|
|
334
|
+
html5jp.graph.circle.prototype._make_shadow = function (cpos) {
|
|
335
|
+
this.ctx.beginPath();
|
|
336
|
+
this.ctx.arc(cpos.x+5, cpos.y+5, cpos.r, 0, Math.PI*2, false)
|
|
337
|
+
this.ctx.closePath();
|
|
338
|
+
var radgrad = this.ctx.createRadialGradient(cpos.x+5,cpos.y+5,0,cpos.x+5,cpos.y+5,cpos.r);
|
|
339
|
+
if(document.uniqueID) {
|
|
340
|
+
radgrad.addColorStop(0, '#555555');
|
|
341
|
+
} else {
|
|
342
|
+
radgrad.addColorStop(0, 'rgba(0,0,0,1)');
|
|
343
|
+
radgrad.addColorStop(0.93, 'rgba(0,0,0,1)');
|
|
344
|
+
radgrad.addColorStop(1, 'rgba(0,0,0,0)');
|
|
345
|
+
}
|
|
346
|
+
this.ctx.fillStyle = radgrad;
|
|
347
|
+
this.ctx.fill();
|
|
348
|
+
};
|
|
349
|
+
|
|
350
|
+
/* ------------------------------------------------------------------
|
|
351
|
+
* 角度の度をラジアンに変換
|
|
352
|
+
* ---------------------------------------------------------------- */
|
|
353
|
+
html5jp.graph.circle.prototype._degree2radian = function (degree) {
|
|
354
|
+
return (Math.PI/180) * degree;
|
|
355
|
+
};
|
|
356
|
+
|
|
357
|
+
/* ------------------------------------------------------------------
|
|
358
|
+
* CSS色文字列をRGBに変換
|
|
359
|
+
* ---------------------------------------------------------------- */
|
|
360
|
+
html5jp.graph.circle.prototype._csscolor2rgb = function (c) {
|
|
361
|
+
if( ! c ) { return null; }
|
|
362
|
+
var color_map = {
|
|
363
|
+
black: "#000000",
|
|
364
|
+
gray: "#808080",
|
|
365
|
+
silver: "#c0c0c0",
|
|
366
|
+
white: "#ffffff",
|
|
367
|
+
maroon: "#800000",
|
|
368
|
+
red: "#ff0000",
|
|
369
|
+
purple: "#800080",
|
|
370
|
+
fuchsia: "#ff00ff",
|
|
371
|
+
green: "#008000",
|
|
372
|
+
lime: "#00FF00",
|
|
373
|
+
olive: "#808000",
|
|
374
|
+
yellow: "#FFFF00",
|
|
375
|
+
navy: "#000080",
|
|
376
|
+
blue: "#0000FF",
|
|
377
|
+
teal: "#008080",
|
|
378
|
+
aqua: "#00FFFF"
|
|
379
|
+
};
|
|
380
|
+
c = c.toLowerCase();
|
|
381
|
+
var o = new Object();
|
|
382
|
+
if( c.match(/^[a-zA-Z]+$/) && color_map[c] ) {
|
|
383
|
+
c = color_map[c];
|
|
384
|
+
}
|
|
385
|
+
var m = null;
|
|
386
|
+
if( m = c.match(/^\#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i) ) {
|
|
387
|
+
o.r = parseInt(m[1], 16);
|
|
388
|
+
o.g = parseInt(m[2], 16);
|
|
389
|
+
o.b = parseInt(m[3], 16);
|
|
390
|
+
} else if( m = c.match(/^\#([a-f\d]{1})([a-f\d]{1})([a-f\d]{1})$/i) ) {
|
|
391
|
+
o.r = parseInt(m[1]+"0", 16);
|
|
392
|
+
o.g = parseInt(m[2]+"0", 16);
|
|
393
|
+
o.b = parseInt(m[3]+"0", 16);
|
|
394
|
+
} else if( m = c.match(/^rgba*\(\s*(\d+),\s*(\d+),\s*(\d+)/i) ) {
|
|
395
|
+
o.r = m[1];
|
|
396
|
+
o.g = m[2];
|
|
397
|
+
o.b = m[3];
|
|
398
|
+
} else if( m = c.match(/^rgba*\(\s*(\d+)\%,\s*(\d+)\%,\s*(\d+)\%/i) ) {
|
|
399
|
+
o.r = Math.round(m[1] * 255 / 100);
|
|
400
|
+
o.g = Math.round(m[2] * 255 / 100);
|
|
401
|
+
o.b = Math.round(m[3] * 255 / 100);
|
|
402
|
+
} else {
|
|
403
|
+
return null;
|
|
404
|
+
}
|
|
405
|
+
return o;
|
|
406
|
+
};
|
|
407
|
+
|