-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
109 lines (98 loc) · 3.97 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!doctype html>
<html>
<head>
<title>Projections - Highcharts module</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.src.js"></script>
<script src = "./js/projections.js"></script>
<script src = "./js/demo.js"></script>
</head>
<body>
<div id = "container"></div>
<!-- inject:body:html -->
<h1 id="projections-highcharts-3d-module">Projections - Highcharts-3D module</h1>
<p>The plugin gives user a chance for adding perspective points and connection lines for scatter series in 3D. </p>
<p>With Projections plugin scatter points are projected into three basic planes - XY, YZ and ZX. This is giving a chance for better visaulisation of connections between x,y and z variables.</p>
<h3 id="requirements">Requirements</h3>
<ul>
<li>Plugin requires latest Highcharts (5.0.3+)</li>
<li>Plugin requires latest Highcharts 3D module (5.0.3+)</li>
</ul>
<h3 id="versions">Versions</h3>
<ul>
<li>1.x - Initial version of Projections.js.</li>
</ul>
<h3 id="installation">Installation</h3>
<ul>
<li><p>Like any other Highcharts module (e.g. exporting), add <code><script></code> tag pointing to <code>projections.js</code> below Highcharts script tag.</p>
</li>
<li><p>For NPM users:</p>
<pre><code>var Highcharts = require('highcharts');
require('projections')(Highcharts);
</code></pre></li>
<li><p>For BOWER users:</p>
<pre><code>bower install highcharts-projections
</code></pre></li>
</ul>
<h3 id="code">Code</h3>
<p>The latest code is available on github: <a href="https://github.com/blacklabel/projections">https://github.com/blacklabel/projections</a></p>
<h3 id="usage-and-demos">Usage and demos</h3>
<pre><code> series: [{
planeProjection: {
enabled: true,
fill: 'red',
radius: 10,
'stroke-width': 3
},
lineProjection: {
enabled: true,
colorByPoint: true,
dashStyle: 'dot',
zIndex: 2,
'stroke-width': 3
},
data: [{
x: 7,
y: 5,
z: 5,
}, {
x: 5,
y: 5,
z: 5,
}, {
x: 7.5,
y: 5,
z: 5,
}]
}]
</code></pre><h3 id="parameters">Parameters</h3>
<table>
<thead>
<tr>
<th align="left">Property</th>
<th align="left">Type</th>
<th align="left">Description</th>
</tr>
</thead>
<tbody>
<tr><td>planeProjection</td></tr>
<tr><td align="left">enabled</td><td>Boolean/String</td><td align="left">Information if projections should be enabled, disabled or enabled on hover</td></tr>
<tr><td align="left">fill</td><td>String</td><td align="left">Fill color of projections</td></tr>
<tr><td align="left">byPoint</td><td>Boolean</td><td align="left">Information if radius and color should be taken from point or global options</td></tr>
<tr><td align="left">radius</td><td>Number</td><td align="left">Projections radius</td></tr>
<tr><td align="left">stroke-width</td><td>Number</td><td align="left">The width of stroke in projections</td></tr>
<tr><td>lineProjection</td></tr>
<tr><td align="left">enabled</td><td>Boolean/String</td><td align="left">Information if projections should be enabled, disabled or enabled on hover</td></tr>
<tr><td align="left">dashstyle</td><td>String</td><td align="left">Dash style of line projection</td></tr>
<tr><td align="left">zIndex</td><td>Number</td><td align="left">z-index of line projection</td></tr>
<tr><td align="left">stroke</td><td>String</td><td align="left">Color of projections line</td></tr>
<tr><td align="left">stroke-width</td><td>Number</td><td align="left">The width of stroke in line projections</td></tr>
</tbody>
</table>
<!-- endinject -->
</body>
</html>