| 875 |
lars |
1 |
// ==ClosureCompiler==
|
|
|
2 |
// @compilation_level SIMPLE_OPTIMIZATIONS
|
|
|
3 |
|
|
|
4 |
/**
|
|
|
5 |
* @license Highcharts JS v4.1.8 (2015-08-20)
|
|
|
6 |
*
|
|
|
7 |
* (c) 2009-2013 Torstein Hønsi
|
|
|
8 |
*
|
|
|
9 |
* License: www.highcharts.com/license
|
|
|
10 |
*/
|
|
|
11 |
|
|
|
12 |
// JSLint options:
|
|
|
13 |
/*global Highcharts, HighchartsAdapter, document, window, navigator, setInterval, clearInterval, clearTimeout, setTimeout, location, jQuery, $, console */
|
|
|
14 |
|
|
|
15 |
(function (Highcharts) {
|
|
|
16 |
/**
|
|
|
17 |
Shorthands for often used function
|
|
|
18 |
*/
|
|
|
19 |
/**
|
|
|
20 |
* Mathematical Functionility
|
|
|
21 |
*/
|
|
|
22 |
var PI = Math.PI,
|
|
|
23 |
deg2rad = (PI / 180), // degrees to radians
|
|
|
24 |
sin = Math.sin,
|
|
|
25 |
cos = Math.cos,
|
|
|
26 |
pick = Highcharts.pick,
|
|
|
27 |
round = Math.round;
|
|
|
28 |
|
|
|
29 |
/**
|
|
|
30 |
* Transforms a given array of points according to the angles in chart.options.
|
|
|
31 |
* Parameters:
|
|
|
32 |
* - points: the array of points
|
|
|
33 |
* - chart: the chart
|
|
|
34 |
* - insidePlotArea: wether to verifiy the points are inside the plotArea
|
|
|
35 |
* Returns:
|
|
|
36 |
* - an array of transformed points
|
|
|
37 |
*/
|
|
|
38 |
function perspective(points, chart, insidePlotArea) {
|
|
|
39 |
var options3d = chart.options.chart.options3d,
|
|
|
40 |
inverted = false,
|
|
|
41 |
origin;
|
|
|
42 |
|
|
|
43 |
if (insidePlotArea) {
|
|
|
44 |
inverted = chart.inverted;
|
|
|
45 |
origin = {
|
|
|
46 |
x: chart.plotWidth / 2,
|
|
|
47 |
y: chart.plotHeight / 2,
|
|
|
48 |
z: options3d.depth / 2,
|
|
|
49 |
vd: pick(options3d.depth, 1) * pick(options3d.viewDistance, 0)
|
|
|
50 |
};
|
|
|
51 |
} else {
|
|
|
52 |
origin = {
|
|
|
53 |
x: chart.plotLeft + (chart.plotWidth / 2),
|
|
|
54 |
y: chart.plotTop + (chart.plotHeight / 2),
|
|
|
55 |
z: options3d.depth / 2,
|
|
|
56 |
vd: pick(options3d.depth, 1) * pick(options3d.viewDistance, 0)
|
|
|
57 |
};
|
|
|
58 |
}
|
|
|
59 |
|
|
|
60 |
var result = [],
|
|
|
61 |
xe = origin.x,
|
|
|
62 |
ye = origin.y,
|
|
|
63 |
ze = origin.z,
|
|
|
64 |
vd = origin.vd,
|
|
|
65 |
angle1 = deg2rad * (inverted ? options3d.beta : -options3d.beta),
|
|
|
66 |
angle2 = deg2rad * (inverted ? -options3d.alpha : options3d.alpha),
|
|
|
67 |
s1 = sin(angle1),
|
|
|
68 |
c1 = cos(angle1),
|
|
|
69 |
s2 = sin(angle2),
|
|
|
70 |
c2 = cos(angle2);
|
|
|
71 |
|
|
|
72 |
var x, y, z, px, py, pz;
|
|
|
73 |
|
|
|
74 |
// Transform each point
|
|
|
75 |
Highcharts.each(points, function (point) {
|
|
|
76 |
x = (inverted ? point.y : point.x) - xe;
|
|
|
77 |
y = (inverted ? point.x : point.y) - ye;
|
|
|
78 |
z = (point.z || 0) - ze;
|
|
|
79 |
|
|
|
80 |
//Apply 3-D rotation
|
|
|
81 |
px = c1 * x - s1 * z;
|
|
|
82 |
py = -s1 * s2 * x - c1 * s2 * z + c2 * y;
|
|
|
83 |
pz = s1 * c2 * x + c1 * c2 * z + s2 * y;
|
|
|
84 |
|
|
|
85 |
//Apply perspective
|
|
|
86 |
if ((vd > 0) && (vd < Number.POSITIVE_INFINITY)) {
|
|
|
87 |
px = px * (vd / (pz + ze + vd));
|
|
|
88 |
py = py * (vd / (pz + ze + vd));
|
|
|
89 |
}
|
|
|
90 |
|
|
|
91 |
//Apply translation
|
|
|
92 |
px = px + xe;
|
|
|
93 |
py = py + ye;
|
|
|
94 |
pz = pz + ze;
|
|
|
95 |
|
|
|
96 |
result.push({
|
|
|
97 |
x: (inverted ? py : px),
|
|
|
98 |
y: (inverted ? px : py),
|
|
|
99 |
z: pz
|
|
|
100 |
});
|
|
|
101 |
});
|
|
|
102 |
return result;
|
|
|
103 |
}
|
|
|
104 |
// Make function acessible to plugins
|
|
|
105 |
Highcharts.perspective = perspective;
|
|
|
106 |
/***
|
|
|
107 |
EXTENSION TO THE SVG-RENDERER TO ENABLE 3D SHAPES
|
|
|
108 |
***/
|
|
|
109 |
////// HELPER METHODS //////
|
|
|
110 |
var dFactor = (4 * (Math.sqrt(2) - 1) / 3) / (PI / 2);
|
|
|
111 |
|
|
|
112 |
function defined(obj) {
|
|
|
113 |
return obj !== undefined && obj !== null;
|
|
|
114 |
}
|
|
|
115 |
|
|
|
116 |
//Shoelace algorithm -- http://en.wikipedia.org/wiki/Shoelace_formula
|
|
|
117 |
function shapeArea(vertexes) {
|
|
|
118 |
var area = 0,
|
|
|
119 |
i,
|
|
|
120 |
j;
|
|
|
121 |
for (i = 0; i < vertexes.length; i++) {
|
|
|
122 |
j = (i + 1) % vertexes.length;
|
|
|
123 |
area += vertexes[i].x * vertexes[j].y - vertexes[j].x * vertexes[i].y;
|
|
|
124 |
}
|
|
|
125 |
return area / 2;
|
|
|
126 |
}
|
|
|
127 |
|
|
|
128 |
function averageZ(vertexes) {
|
|
|
129 |
var z = 0,
|
|
|
130 |
i;
|
|
|
131 |
for (i = 0; i < vertexes.length; i++) {
|
|
|
132 |
z += vertexes[i].z;
|
|
|
133 |
}
|
|
|
134 |
return vertexes.length ? z / vertexes.length : 0;
|
|
|
135 |
}
|
|
|
136 |
|
|
|
137 |
/** Method to construct a curved path
|
|
|
138 |
* Can 'wrap' around more then 180 degrees
|
|
|
139 |
*/
|
|
|
140 |
function curveTo(cx, cy, rx, ry, start, end, dx, dy) {
|
|
|
141 |
var result = [];
|
|
|
142 |
if ((end > start) && (end - start > PI / 2 + 0.0001)) {
|
|
|
143 |
result = result.concat(curveTo(cx, cy, rx, ry, start, start + (PI / 2), dx, dy));
|
|
|
144 |
result = result.concat(curveTo(cx, cy, rx, ry, start + (PI / 2), end, dx, dy));
|
|
|
145 |
return result;
|
|
|
146 |
} else if ((end < start) && (start - end > PI / 2 + 0.0001)) {
|
|
|
147 |
result = result.concat(curveTo(cx, cy, rx, ry, start, start - (PI / 2), dx, dy));
|
|
|
148 |
result = result.concat(curveTo(cx, cy, rx, ry, start - (PI / 2), end, dx, dy));
|
|
|
149 |
return result;
|
|
|
150 |
} else {
|
|
|
151 |
var arcAngle = end - start;
|
|
|
152 |
return [
|
|
|
153 |
'C',
|
|
|
154 |
cx + (rx * cos(start)) - ((rx * dFactor * arcAngle) * sin(start)) + dx,
|
|
|
155 |
cy + (ry * sin(start)) + ((ry * dFactor * arcAngle) * cos(start)) + dy,
|
|
|
156 |
cx + (rx * cos(end)) + ((rx * dFactor * arcAngle) * sin(end)) + dx,
|
|
|
157 |
cy + (ry * sin(end)) - ((ry * dFactor * arcAngle) * cos(end)) + dy,
|
|
|
158 |
|
|
|
159 |
cx + (rx * cos(end)) + dx,
|
|
|
160 |
cy + (ry * sin(end)) + dy
|
|
|
161 |
];
|
|
|
162 |
}
|
|
|
163 |
}
|
|
|
164 |
|
|
|
165 |
Highcharts.SVGRenderer.prototype.toLinePath = function (points, closed) {
|
|
|
166 |
var result = [];
|
|
|
167 |
|
|
|
168 |
// Put "L x y" for each point
|
|
|
169 |
Highcharts.each(points, function (point) {
|
|
|
170 |
result.push('L', point.x, point.y);
|
|
|
171 |
});
|
|
|
172 |
|
|
|
173 |
if (points.length) {
|
|
|
174 |
// Set the first element to M
|
|
|
175 |
result[0] = 'M';
|
|
|
176 |
|
|
|
177 |
// If it is a closed line, add Z
|
|
|
178 |
if (closed) {
|
|
|
179 |
result.push('Z');
|
|
|
180 |
}
|
|
|
181 |
}
|
|
|
182 |
|
|
|
183 |
return result;
|
|
|
184 |
};
|
|
|
185 |
|
|
|
186 |
////// CUBOIDS //////
|
|
|
187 |
Highcharts.SVGRenderer.prototype.cuboid = function (shapeArgs) {
|
|
|
188 |
|
|
|
189 |
var result = this.g(),
|
|
|
190 |
paths = this.cuboidPath(shapeArgs);
|
|
|
191 |
|
|
|
192 |
// create the 3 sides
|
|
|
193 |
result.front = this.path(paths[0]).attr({zIndex: paths[3], 'stroke-linejoin': 'round'}).add(result);
|
|
|
194 |
result.top = this.path(paths[1]).attr({zIndex: paths[4], 'stroke-linejoin': 'round'}).add(result);
|
|
|
195 |
result.side = this.path(paths[2]).attr({zIndex: paths[5], 'stroke-linejoin': 'round'}).add(result);
|
|
|
196 |
|
|
|
197 |
// apply the fill everywhere, the top a bit brighter, the side a bit darker
|
|
|
198 |
result.fillSetter = function (color) {
|
|
|
199 |
var c0 = color,
|
|
|
200 |
c1 = Highcharts.Color(color).brighten(0.1).get(),
|
|
|
201 |
c2 = Highcharts.Color(color).brighten(-0.1).get();
|
|
|
202 |
|
|
|
203 |
this.front.attr({fill: c0});
|
|
|
204 |
this.top.attr({fill: c1});
|
|
|
205 |
this.side.attr({fill: c2});
|
|
|
206 |
|
|
|
207 |
this.color = color;
|
|
|
208 |
return this;
|
|
|
209 |
};
|
|
|
210 |
|
|
|
211 |
// apply opacaity everywhere
|
|
|
212 |
result.opacitySetter = function (opacity) {
|
|
|
213 |
this.front.attr({opacity: opacity});
|
|
|
214 |
this.top.attr({opacity: opacity});
|
|
|
215 |
this.side.attr({opacity: opacity});
|
|
|
216 |
return this;
|
|
|
217 |
};
|
|
|
218 |
|
|
|
219 |
result.attr = function (args) {
|
|
|
220 |
if (args.shapeArgs || defined(args.x)) {
|
|
|
221 |
var shapeArgs = args.shapeArgs || args;
|
|
|
222 |
var paths = this.renderer.cuboidPath(shapeArgs);
|
|
|
223 |
this.front.attr({d: paths[0], zIndex: paths[3]});
|
|
|
224 |
this.top.attr({d: paths[1], zIndex: paths[4]});
|
|
|
225 |
this.side.attr({d: paths[2], zIndex: paths[5]});
|
|
|
226 |
} else {
|
|
|
227 |
Highcharts.SVGElement.prototype.attr.call(this, args);
|
|
|
228 |
}
|
|
|
229 |
|
|
|
230 |
return this;
|
|
|
231 |
};
|
|
|
232 |
|
|
|
233 |
result.animate = function (args, duration, complete) {
|
|
|
234 |
if (defined(args.x) && defined(args.y)) {
|
|
|
235 |
var paths = this.renderer.cuboidPath(args);
|
|
|
236 |
this.front.attr({zIndex: paths[3]}).animate({d: paths[0]}, duration, complete);
|
|
|
237 |
this.top.attr({zIndex: paths[4]}).animate({d: paths[1]}, duration, complete);
|
|
|
238 |
this.side.attr({zIndex: paths[5]}).animate({d: paths[2]}, duration, complete);
|
|
|
239 |
} else if (args.opacity) {
|
|
|
240 |
this.front.animate(args, duration, complete);
|
|
|
241 |
this.top.animate(args, duration, complete);
|
|
|
242 |
this.side.animate(args, duration, complete);
|
|
|
243 |
} else {
|
|
|
244 |
Highcharts.SVGElement.prototype.animate.call(this, args, duration, complete);
|
|
|
245 |
}
|
|
|
246 |
return this;
|
|
|
247 |
};
|
|
|
248 |
|
|
|
249 |
// destroy all children
|
|
|
250 |
result.destroy = function () {
|
|
|
251 |
this.front.destroy();
|
|
|
252 |
this.top.destroy();
|
|
|
253 |
this.side.destroy();
|
|
|
254 |
|
|
|
255 |
return null;
|
|
|
256 |
};
|
|
|
257 |
|
|
|
258 |
// Apply the Z index to the cuboid group
|
|
|
259 |
result.attr({ zIndex: -paths[3] });
|
|
|
260 |
|
|
|
261 |
return result;
|
|
|
262 |
};
|
|
|
263 |
|
|
|
264 |
/**
|
|
|
265 |
* Generates a cuboid
|
|
|
266 |
*/
|
|
|
267 |
Highcharts.SVGRenderer.prototype.cuboidPath = function (shapeArgs) {
|
|
|
268 |
var x = shapeArgs.x,
|
|
|
269 |
y = shapeArgs.y,
|
|
|
270 |
z = shapeArgs.z,
|
|
|
271 |
h = shapeArgs.height,
|
|
|
272 |
w = shapeArgs.width,
|
|
|
273 |
d = shapeArgs.depth,
|
|
|
274 |
chart = Highcharts.charts[this.chartIndex],
|
|
|
275 |
map = Highcharts.map;
|
|
|
276 |
|
|
|
277 |
// The 8 corners of the cube
|
|
|
278 |
var pArr = [
|
|
|
279 |
{x: x, y: y, z: z},
|
|
|
280 |
{x: x + w, y: y, z: z},
|
|
|
281 |
{x: x + w, y: y + h, z: z},
|
|
|
282 |
{x: x, y: y + h, z: z},
|
|
|
283 |
{x: x, y: y + h, z: z + d},
|
|
|
284 |
{x: x + w, y: y + h, z: z + d},
|
|
|
285 |
{x: x + w, y: y, z: z + d},
|
|
|
286 |
{x: x, y: y, z: z + d}
|
|
|
287 |
];
|
|
|
288 |
|
|
|
289 |
// apply perspective
|
|
|
290 |
pArr = perspective(pArr, chart, shapeArgs.insidePlotArea);
|
|
|
291 |
|
|
|
292 |
// helper method to decide which side is visible
|
|
|
293 |
var pickShape = function (path1, path2) {
|
|
|
294 |
path1 = map(path1, function (i) { return pArr[i]; });
|
|
|
295 |
path2 = map(path2, function (i) { return pArr[i]; });
|
|
|
296 |
if (shapeArea(path1) < 0) {
|
|
|
297 |
return path1;
|
|
|
298 |
} else if (shapeArea(path2) < 0) {
|
|
|
299 |
return path2;
|
|
|
300 |
} else {
|
|
|
301 |
return [];
|
|
|
302 |
}
|
|
|
303 |
};
|
|
|
304 |
|
|
|
305 |
// front or back
|
|
|
306 |
var front = [3, 2, 1, 0];
|
|
|
307 |
var back = [7, 6, 5, 4];
|
|
|
308 |
var path1 = pickShape(front, back);
|
|
|
309 |
|
|
|
310 |
// top or bottom
|
|
|
311 |
var top = [1, 6, 7, 0];
|
|
|
312 |
var bottom = [4, 5, 2, 3];
|
|
|
313 |
var path2 = pickShape(top, bottom);
|
|
|
314 |
|
|
|
315 |
// side
|
|
|
316 |
var right = [1, 2, 5, 6];
|
|
|
317 |
var left = [0, 7, 4, 3];
|
|
|
318 |
var path3 = pickShape(right, left);
|
|
|
319 |
|
|
|
320 |
return [this.toLinePath(path1, true), this.toLinePath(path2, true), this.toLinePath(path3, true), averageZ(path1), averageZ(path2), averageZ(path3)];
|
|
|
321 |
};
|
|
|
322 |
|
|
|
323 |
////// SECTORS //////
|
|
|
324 |
Highcharts.SVGRenderer.prototype.arc3d = function (shapeArgs) {
|
|
|
325 |
|
|
|
326 |
shapeArgs.alpha *= deg2rad;
|
|
|
327 |
shapeArgs.beta *= deg2rad;
|
|
|
328 |
var result = this.g(),
|
|
|
329 |
paths = this.arc3dPath(shapeArgs),
|
|
|
330 |
renderer = result.renderer;
|
|
|
331 |
|
|
|
332 |
var zIndex = paths.zTop * 100;
|
|
|
333 |
|
|
|
334 |
result.shapeArgs = shapeArgs; // Store for later use
|
|
|
335 |
|
|
|
336 |
// create the different sub sections of the shape
|
|
|
337 |
result.top = renderer.path(paths.top).setRadialReference(shapeArgs.center).attr({zIndex: paths.zTop}).add(result);
|
|
|
338 |
result.side1 = renderer.path(paths.side2).attr({zIndex: paths.zSide1});
|
|
|
339 |
result.side2 = renderer.path(paths.side1).attr({zIndex: paths.zSide2});
|
|
|
340 |
result.inn = renderer.path(paths.inn).attr({zIndex: paths.zInn});
|
|
|
341 |
result.out = renderer.path(paths.out).attr({zIndex: paths.zOut});
|
|
|
342 |
|
|
|
343 |
// apply the fill to the top and a darker shade to the sides
|
|
|
344 |
result.fillSetter = function (color) {
|
|
|
345 |
this.color = color;
|
|
|
346 |
|
|
|
347 |
var c0 = color,
|
|
|
348 |
c2 = Highcharts.Color(color).brighten(-0.1).get();
|
|
|
349 |
|
|
|
350 |
this.side1.attr({fill: c2});
|
|
|
351 |
this.side2.attr({fill: c2});
|
|
|
352 |
this.inn.attr({fill: c2});
|
|
|
353 |
this.out.attr({fill: c2});
|
|
|
354 |
this.top.attr({fill: c0});
|
|
|
355 |
return this;
|
|
|
356 |
};
|
|
|
357 |
|
|
|
358 |
// apply the translation to all
|
|
|
359 |
result.translateXSetter = function (value) {
|
|
|
360 |
this.out.attr({translateX: value});
|
|
|
361 |
this.inn.attr({translateX: value});
|
|
|
362 |
this.side1.attr({translateX: value});
|
|
|
363 |
this.side2.attr({translateX: value});
|
|
|
364 |
this.top.attr({translateX: value});
|
|
|
365 |
};
|
|
|
366 |
|
|
|
367 |
result.translateYSetter = function (value) {
|
|
|
368 |
this.out.attr({translateY: value});
|
|
|
369 |
this.inn.attr({translateY: value});
|
|
|
370 |
this.side1.attr({translateY: value});
|
|
|
371 |
this.side2.attr({translateY: value});
|
|
|
372 |
this.top.attr({translateY: value});
|
|
|
373 |
};
|
|
|
374 |
|
|
|
375 |
result.animate = function (args, duration, complete) {
|
|
|
376 |
if (defined(args.end) || defined(args.start)) {
|
|
|
377 |
this._shapeArgs = this.shapeArgs;
|
|
|
378 |
|
|
|
379 |
Highcharts.SVGElement.prototype.animate.call(this, {
|
|
|
380 |
_args: args
|
|
|
381 |
}, {
|
|
|
382 |
duration: duration,
|
|
|
383 |
start: function () {
|
|
|
384 |
var args = arguments,
|
|
|
385 |
fx = args[0],
|
|
|
386 |
elem = fx.elem,
|
|
|
387 |
end = elem._shapeArgs;
|
|
|
388 |
|
|
|
389 |
if (end.fill !== elem.color) {
|
|
|
390 |
elem.attr({
|
|
|
391 |
fill: end.fill
|
|
|
392 |
});
|
|
|
393 |
}
|
|
|
394 |
},
|
|
|
395 |
step: function () {
|
|
|
396 |
var args = arguments,
|
|
|
397 |
fx = args[1],
|
|
|
398 |
result = fx.elem,
|
|
|
399 |
start = result._shapeArgs,
|
|
|
400 |
end = fx.end,
|
|
|
401 |
pos = fx.pos,
|
|
|
402 |
sA = Highcharts.merge(start, {
|
|
|
403 |
x: start.x + ((end.x - start.x) * pos),
|
|
|
404 |
y: start.y + ((end.y - start.y) * pos),
|
|
|
405 |
r: start.r + ((end.r - start.r) * pos),
|
|
|
406 |
innerR: start.innerR + ((end.innerR - start.innerR) * pos),
|
|
|
407 |
start: start.start + ((end.start - start.start) * pos),
|
|
|
408 |
end: start.end + ((end.end - start.end) * pos)
|
|
|
409 |
});
|
|
|
410 |
|
|
|
411 |
var paths = result.renderer.arc3dPath(sA);
|
|
|
412 |
|
|
|
413 |
result.shapeArgs = sA;
|
|
|
414 |
|
|
|
415 |
result.top.attr({d: paths.top, zIndex: paths.zTop});
|
|
|
416 |
result.inn.attr({d: paths.inn, zIndex: paths.zInn});
|
|
|
417 |
result.out.attr({d: paths.out, zIndex: paths.zOut});
|
|
|
418 |
result.side1.attr({d: paths.side1, zIndex: paths.zSide1});
|
|
|
419 |
result.side2.attr({d: paths.side2, zIndex: paths.zSide2});
|
|
|
420 |
|
|
|
421 |
}
|
|
|
422 |
}, complete);
|
|
|
423 |
} else {
|
|
|
424 |
Highcharts.SVGElement.prototype.animate.call(this, args, duration, complete);
|
|
|
425 |
}
|
|
|
426 |
return this;
|
|
|
427 |
};
|
|
|
428 |
|
|
|
429 |
// destroy all children
|
|
|
430 |
result.destroy = function () {
|
|
|
431 |
this.top.destroy();
|
|
|
432 |
this.out.destroy();
|
|
|
433 |
this.inn.destroy();
|
|
|
434 |
this.side1.destroy();
|
|
|
435 |
this.side2.destroy();
|
|
|
436 |
|
|
|
437 |
Highcharts.SVGElement.prototype.destroy.call(this);
|
|
|
438 |
};
|
|
|
439 |
// hide all children
|
|
|
440 |
result.hide = function () {
|
|
|
441 |
this.top.hide();
|
|
|
442 |
this.out.hide();
|
|
|
443 |
this.inn.hide();
|
|
|
444 |
this.side1.hide();
|
|
|
445 |
this.side2.hide();
|
|
|
446 |
};
|
|
|
447 |
result.show = function () {
|
|
|
448 |
this.top.show();
|
|
|
449 |
this.out.show();
|
|
|
450 |
this.inn.show();
|
|
|
451 |
this.side1.show();
|
|
|
452 |
this.side2.show();
|
|
|
453 |
};
|
|
|
454 |
// show all children
|
|
|
455 |
result.zIndex = zIndex;
|
|
|
456 |
result.attr({zIndex: zIndex});
|
|
|
457 |
return result;
|
|
|
458 |
};
|
|
|
459 |
|
|
|
460 |
/**
|
|
|
461 |
* Generate the paths required to draw a 3D arc
|
|
|
462 |
*/
|
|
|
463 |
Highcharts.SVGRenderer.prototype.arc3dPath = function (shapeArgs) {
|
|
|
464 |
var cx = shapeArgs.x, // x coordinate of the center
|
|
|
465 |
cy = shapeArgs.y, // y coordinate of the center
|
|
|
466 |
start = shapeArgs.start, // start angle
|
|
|
467 |
end = shapeArgs.end - 0.00001, // end angle
|
|
|
468 |
r = shapeArgs.r, // radius
|
|
|
469 |
ir = shapeArgs.innerR, // inner radius
|
|
|
470 |
d = shapeArgs.depth, // depth
|
|
|
471 |
alpha = shapeArgs.alpha, // alpha rotation of the chart
|
|
|
472 |
beta = shapeArgs.beta; // beta rotation of the chart
|
|
|
473 |
|
|
|
474 |
// Derived Variables
|
|
|
475 |
var cs = cos(start), // cosinus of the start angle
|
|
|
476 |
ss = sin(start), // sinus of the start angle
|
|
|
477 |
ce = cos(end), // cosinus of the end angle
|
|
|
478 |
se = sin(end), // sinus of the end angle
|
|
|
479 |
rx = r * cos(beta), // x-radius
|
|
|
480 |
ry = r * cos(alpha), // y-radius
|
|
|
481 |
irx = ir * cos(beta), // x-radius (inner)
|
|
|
482 |
iry = ir * cos(alpha), // y-radius (inner)
|
|
|
483 |
dx = d * sin(beta), // distance between top and bottom in x
|
|
|
484 |
dy = d * sin(alpha); // distance between top and bottom in y
|
|
|
485 |
|
|
|
486 |
// TOP
|
|
|
487 |
var top = ['M', cx + (rx * cs), cy + (ry * ss)];
|
|
|
488 |
top = top.concat(curveTo(cx, cy, rx, ry, start, end, 0, 0));
|
|
|
489 |
top = top.concat([
|
|
|
490 |
'L', cx + (irx * ce), cy + (iry * se)
|
|
|
491 |
]);
|
|
|
492 |
top = top.concat(curveTo(cx, cy, irx, iry, end, start, 0, 0));
|
|
|
493 |
top = top.concat(['Z']);
|
|
|
494 |
|
|
|
495 |
// OUTSIDE
|
|
|
496 |
var b = (beta > 0 ? PI / 2 : 0),
|
|
|
497 |
a = (alpha > 0 ? 0 : PI / 2);
|
|
|
498 |
|
|
|
499 |
var start2 = start > -b ? start : (end > -b ? -b : start),
|
|
|
500 |
end2 = end < PI - a ? end : (start < PI - a ? PI - a : end);
|
|
|
501 |
|
|
|
502 |
var out = ['M', cx + (rx * cos(start2)), cy + (ry * sin(start2))];
|
|
|
503 |
out = out.concat(curveTo(cx, cy, rx, ry, start2, end2, 0, 0));
|
|
|
504 |
out = out.concat([
|
|
|
505 |
'L', cx + (rx * cos(end2)) + dx, cy + (ry * sin(end2)) + dy
|
|
|
506 |
]);
|
|
|
507 |
out = out.concat(curveTo(cx, cy, rx, ry, end2, start2, dx, dy));
|
|
|
508 |
out = out.concat(['Z']);
|
|
|
509 |
|
|
|
510 |
// INSIDE
|
|
|
511 |
var inn = ['M', cx + (irx * cs), cy + (iry * ss)];
|
|
|
512 |
inn = inn.concat(curveTo(cx, cy, irx, iry, start, end, 0, 0));
|
|
|
513 |
inn = inn.concat([
|
|
|
514 |
'L', cx + (irx * cos(end)) + dx, cy + (iry * sin(end)) + dy
|
|
|
515 |
]);
|
|
|
516 |
inn = inn.concat(curveTo(cx, cy, irx, iry, end, start, dx, dy));
|
|
|
517 |
inn = inn.concat(['Z']);
|
|
|
518 |
|
|
|
519 |
// SIDES
|
|
|
520 |
var side1 = [
|
|
|
521 |
'M', cx + (rx * cs), cy + (ry * ss),
|
|
|
522 |
'L', cx + (rx * cs) + dx, cy + (ry * ss) + dy,
|
|
|
523 |
'L', cx + (irx * cs) + dx, cy + (iry * ss) + dy,
|
|
|
524 |
'L', cx + (irx * cs), cy + (iry * ss),
|
|
|
525 |
'Z'
|
|
|
526 |
];
|
|
|
527 |
var side2 = [
|
|
|
528 |
'M', cx + (rx * ce), cy + (ry * se),
|
|
|
529 |
'L', cx + (rx * ce) + dx, cy + (ry * se) + dy,
|
|
|
530 |
'L', cx + (irx * ce) + dx, cy + (iry * se) + dy,
|
|
|
531 |
'L', cx + (irx * ce), cy + (iry * se),
|
|
|
532 |
'Z'
|
|
|
533 |
];
|
|
|
534 |
|
|
|
535 |
var a1 = sin((start + end) / 2),
|
|
|
536 |
a2 = sin(start),
|
|
|
537 |
a3 = sin(end);
|
|
|
538 |
|
|
|
539 |
return {
|
|
|
540 |
top: top,
|
|
|
541 |
zTop: r,
|
|
|
542 |
out: out,
|
|
|
543 |
zOut: Math.max(a1, a2, a3) * r,
|
|
|
544 |
inn: inn,
|
|
|
545 |
zInn: Math.max(a1, a2, a3) * r,
|
|
|
546 |
side1: side1,
|
|
|
547 |
zSide1: a2 * (r * 0.99),
|
|
|
548 |
side2: side2,
|
|
|
549 |
zSide2: a3 * (r * 0.99)
|
|
|
550 |
};
|
|
|
551 |
};
|
|
|
552 |
/***
|
|
|
553 |
EXTENSION FOR 3D CHARTS
|
|
|
554 |
***/
|
|
|
555 |
// Shorthand to check the is3d flag
|
|
|
556 |
Highcharts.Chart.prototype.is3d = function () {
|
|
|
557 |
return this.options.chart.options3d && this.options.chart.options3d.enabled; // #4280
|
|
|
558 |
};
|
|
|
559 |
|
|
|
560 |
Highcharts.wrap(Highcharts.Chart.prototype, 'isInsidePlot', function (proceed) {
|
|
|
561 |
if (this.is3d()) {
|
|
|
562 |
return true;
|
|
|
563 |
} else {
|
|
|
564 |
return proceed.apply(this, [].slice.call(arguments, 1));
|
|
|
565 |
}
|
|
|
566 |
});
|
|
|
567 |
|
|
|
568 |
var defaultChartOptions = Highcharts.getOptions();
|
|
|
569 |
defaultChartOptions.chart.options3d = {
|
|
|
570 |
enabled: false,
|
|
|
571 |
alpha: 0,
|
|
|
572 |
beta: 0,
|
|
|
573 |
depth: 100,
|
|
|
574 |
viewDistance: 25,
|
|
|
575 |
frame: {
|
|
|
576 |
bottom: { size: 1, color: 'rgba(255,255,255,0)' },
|
|
|
577 |
side: { size: 1, color: 'rgba(255,255,255,0)' },
|
|
|
578 |
back: { size: 1, color: 'rgba(255,255,255,0)' }
|
|
|
579 |
}
|
|
|
580 |
};
|
|
|
581 |
|
|
|
582 |
Highcharts.wrap(Highcharts.Chart.prototype, 'init', function (proceed) {
|
|
|
583 |
var args = [].slice.call(arguments, 1),
|
|
|
584 |
plotOptions,
|
|
|
585 |
pieOptions;
|
|
|
586 |
|
|
|
587 |
if (args[0].chart.options3d && args[0].chart.options3d.enabled) {
|
|
|
588 |
plotOptions = args[0].plotOptions || {};
|
|
|
589 |
pieOptions = plotOptions.pie || {};
|
|
|
590 |
|
|
|
591 |
pieOptions.borderColor = Highcharts.pick(pieOptions.borderColor, undefined);
|
|
|
592 |
}
|
|
|
593 |
proceed.apply(this, args);
|
|
|
594 |
});
|
|
|
595 |
|
|
|
596 |
Highcharts.wrap(Highcharts.Chart.prototype, 'setChartSize', function (proceed) {
|
|
|
597 |
proceed.apply(this, [].slice.call(arguments, 1));
|
|
|
598 |
|
|
|
599 |
if (this.is3d()) {
|
|
|
600 |
var inverted = this.inverted,
|
|
|
601 |
clipBox = this.clipBox,
|
|
|
602 |
margin = this.margin,
|
|
|
603 |
x = inverted ? 'y' : 'x',
|
|
|
604 |
y = inverted ? 'x' : 'y',
|
|
|
605 |
w = inverted ? 'height' : 'width',
|
|
|
606 |
h = inverted ? 'width' : 'height';
|
|
|
607 |
|
|
|
608 |
clipBox[x] = -(margin[3] || 0);
|
|
|
609 |
clipBox[y] = -(margin[0] || 0);
|
|
|
610 |
clipBox[w] = this.chartWidth + (margin[3] || 0) + (margin[1] || 0);
|
|
|
611 |
clipBox[h] = this.chartHeight + (margin[0] || 0) + (margin[2] || 0);
|
|
|
612 |
}
|
|
|
613 |
});
|
|
|
614 |
|
|
|
615 |
Highcharts.wrap(Highcharts.Chart.prototype, 'redraw', function (proceed) {
|
|
|
616 |
if (this.is3d()) {
|
|
|
617 |
// Set to force a redraw of all elements
|
|
|
618 |
this.isDirtyBox = true;
|
|
|
619 |
}
|
|
|
620 |
proceed.apply(this, [].slice.call(arguments, 1));
|
|
|
621 |
});
|
|
|
622 |
|
|
|
623 |
// Draw the series in the reverse order (#3803, #3917)
|
|
|
624 |
Highcharts.wrap(Highcharts.Chart.prototype, 'renderSeries', function (proceed) {
|
|
|
625 |
var series,
|
|
|
626 |
i = this.series.length;
|
|
|
627 |
|
|
|
628 |
if (this.is3d()) {
|
|
|
629 |
while (i--) {
|
|
|
630 |
series = this.series[i];
|
|
|
631 |
series.translate();
|
|
|
632 |
series.render();
|
|
|
633 |
}
|
|
|
634 |
} else {
|
|
|
635 |
proceed.call(this);
|
|
|
636 |
}
|
|
|
637 |
});
|
|
|
638 |
|
|
|
639 |
Highcharts.Chart.prototype.retrieveStacks = function (stacking) {
|
|
|
640 |
var series = this.series,
|
|
|
641 |
stacks = {},
|
|
|
642 |
stackNumber,
|
|
|
643 |
i = 1;
|
|
|
644 |
|
|
|
645 |
Highcharts.each(this.series, function (S) {
|
|
|
646 |
stackNumber = stacking ? (S.options.stack || 0) : series.length - 1 - S.index; // #3841
|
|
|
647 |
if (!stacks[stackNumber]) {
|
|
|
648 |
stacks[stackNumber] = { series: [S], position: i};
|
|
|
649 |
i++;
|
|
|
650 |
} else {
|
|
|
651 |
stacks[stackNumber].series.push(S);
|
|
|
652 |
}
|
|
|
653 |
});
|
|
|
654 |
|
|
|
655 |
stacks.totalStacks = i + 1;
|
|
|
656 |
return stacks;
|
|
|
657 |
};
|
|
|
658 |
|
|
|
659 |
/***
|
|
|
660 |
EXTENSION TO THE AXIS
|
|
|
661 |
***/
|
|
|
662 |
Highcharts.wrap(Highcharts.Axis.prototype, 'setOptions', function (proceed, userOptions) {
|
|
|
663 |
var options;
|
|
|
664 |
proceed.call(this, userOptions);
|
|
|
665 |
if (this.chart.is3d()) {
|
|
|
666 |
options = this.options;
|
|
|
667 |
options.tickWidth = Highcharts.pick(options.tickWidth, 0);
|
|
|
668 |
options.gridLineWidth = Highcharts.pick(options.gridLineWidth, 1);
|
|
|
669 |
}
|
|
|
670 |
});
|
|
|
671 |
|
|
|
672 |
Highcharts.wrap(Highcharts.Axis.prototype, 'render', function (proceed) {
|
|
|
673 |
proceed.apply(this, [].slice.call(arguments, 1));
|
|
|
674 |
|
|
|
675 |
// Do not do this if the chart is not 3D
|
|
|
676 |
if (!this.chart.is3d()) {
|
|
|
677 |
return;
|
|
|
678 |
}
|
|
|
679 |
|
|
|
680 |
var chart = this.chart,
|
|
|
681 |
renderer = chart.renderer,
|
|
|
682 |
options3d = chart.options.chart.options3d,
|
|
|
683 |
frame = options3d.frame,
|
|
|
684 |
fbottom = frame.bottom,
|
|
|
685 |
fback = frame.back,
|
|
|
686 |
fside = frame.side,
|
|
|
687 |
depth = options3d.depth,
|
|
|
688 |
height = this.height,
|
|
|
689 |
width = this.width,
|
|
|
690 |
left = this.left,
|
|
|
691 |
top = this.top;
|
|
|
692 |
|
|
|
693 |
if (this.isZAxis) {
|
|
|
694 |
return;
|
|
|
695 |
} else if (this.horiz) {
|
|
|
696 |
var bottomShape = {
|
|
|
697 |
x: left,
|
|
|
698 |
y: top + (chart.xAxis[0].opposite ? -fbottom.size : height),
|
|
|
699 |
z: 0,
|
|
|
700 |
width: width,
|
|
|
701 |
height: fbottom.size,
|
|
|
702 |
depth: depth,
|
|
|
703 |
insidePlotArea: false
|
|
|
704 |
};
|
|
|
705 |
if (!this.bottomFrame) {
|
|
|
706 |
this.bottomFrame = renderer.cuboid(bottomShape).attr({
|
|
|
707 |
fill: fbottom.color,
|
|
|
708 |
zIndex: (chart.yAxis[0].reversed && options3d.alpha > 0 ? 4 : -1)
|
|
|
709 |
})
|
|
|
710 |
.css({
|
|
|
711 |
stroke: fbottom.color
|
|
|
712 |
}).add();
|
|
|
713 |
} else {
|
|
|
714 |
this.bottomFrame.animate(bottomShape);
|
|
|
715 |
}
|
|
|
716 |
} else {
|
|
|
717 |
// BACK
|
|
|
718 |
var backShape = {
|
|
|
719 |
x: left + (chart.yAxis[0].opposite ? 0 : -fside.size),
|
|
|
720 |
y: top + (chart.xAxis[0].opposite ? -fbottom.size : 0),
|
|
|
721 |
z: depth,
|
|
|
722 |
width: width + fside.size,
|
|
|
723 |
height: height + fbottom.size,
|
|
|
724 |
depth: fback.size,
|
|
|
725 |
insidePlotArea: false
|
|
|
726 |
};
|
|
|
727 |
if (!this.backFrame) {
|
|
|
728 |
this.backFrame = renderer.cuboid(backShape).attr({
|
|
|
729 |
fill: fback.color,
|
|
|
730 |
zIndex: -3
|
|
|
731 |
}).css({
|
|
|
732 |
stroke: fback.color
|
|
|
733 |
}).add();
|
|
|
734 |
} else {
|
|
|
735 |
this.backFrame.animate(backShape);
|
|
|
736 |
}
|
|
|
737 |
var sideShape = {
|
|
|
738 |
x: left + (chart.yAxis[0].opposite ? width : -fside.size),
|
|
|
739 |
y: top + (chart.xAxis[0].opposite ? -fbottom.size : 0),
|
|
|
740 |
z: 0,
|
|
|
741 |
width: fside.size,
|
|
|
742 |
height: height + fbottom.size,
|
|
|
743 |
depth: depth,
|
|
|
744 |
insidePlotArea: false
|
|
|
745 |
};
|
|
|
746 |
if (!this.sideFrame) {
|
|
|
747 |
this.sideFrame = renderer.cuboid(sideShape).attr({
|
|
|
748 |
fill: fside.color,
|
|
|
749 |
zIndex: -2
|
|
|
750 |
}).css({
|
|
|
751 |
stroke: fside.color
|
|
|
752 |
}).add();
|
|
|
753 |
} else {
|
|
|
754 |
this.sideFrame.animate(sideShape);
|
|
|
755 |
}
|
|
|
756 |
}
|
|
|
757 |
});
|
|
|
758 |
|
|
|
759 |
Highcharts.wrap(Highcharts.Axis.prototype, 'getPlotLinePath', function (proceed) {
|
|
|
760 |
var path = proceed.apply(this, [].slice.call(arguments, 1));
|
|
|
761 |
|
|
|
762 |
// Do not do this if the chart is not 3D
|
|
|
763 |
if (!this.chart.is3d()) {
|
|
|
764 |
return path;
|
|
|
765 |
}
|
|
|
766 |
|
|
|
767 |
if (path === null) { return path; }
|
|
|
768 |
|
|
|
769 |
var chart = this.chart,
|
|
|
770 |
options3d = chart.options.chart.options3d;
|
|
|
771 |
|
|
|
772 |
var d = this.isZAxis ? this.chart.plotWidth : options3d.depth,
|
|
|
773 |
opposite = this.opposite;
|
|
|
774 |
if (this.horiz) {
|
|
|
775 |
opposite = !opposite;
|
|
|
776 |
}
|
|
|
777 |
var pArr = [
|
|
|
778 |
this.swapZ({ x: path[1], y: path[2], z: (opposite ? d : 0)}),
|
|
|
779 |
this.swapZ({ x: path[1], y: path[2], z: d }),
|
|
|
780 |
this.swapZ({ x: path[4], y: path[5], z: d }),
|
|
|
781 |
this.swapZ({ x: path[4], y: path[5], z: (opposite ? 0 : d)})
|
|
|
782 |
];
|
|
|
783 |
|
|
|
784 |
pArr = perspective(pArr, this.chart, false);
|
|
|
785 |
path = this.chart.renderer.toLinePath(pArr, false);
|
|
|
786 |
|
|
|
787 |
return path;
|
|
|
788 |
});
|
|
|
789 |
|
|
|
790 |
// Do not draw axislines in 3D
|
|
|
791 |
Highcharts.wrap(Highcharts.Axis.prototype, 'getLinePath', function (proceed) {
|
|
|
792 |
return this.chart.is3d() ? [] : proceed.apply(this, [].slice.call(arguments, 1));
|
|
|
793 |
});
|
|
|
794 |
|
|
|
795 |
Highcharts.wrap(Highcharts.Axis.prototype, 'getPlotBandPath', function (proceed) {
|
|
|
796 |
// Do not do this if the chart is not 3D
|
|
|
797 |
if (!this.chart.is3d()) {
|
|
|
798 |
return proceed.apply(this, [].slice.call(arguments, 1));
|
|
|
799 |
} else {
|
|
|
800 |
var args = arguments,
|
|
|
801 |
from = args[1],
|
|
|
802 |
to = args[2];
|
|
|
803 |
|
|
|
804 |
var toPath = this.getPlotLinePath(to),
|
|
|
805 |
path = this.getPlotLinePath(from);
|
|
|
806 |
|
|
|
807 |
if (path && toPath) {
|
|
|
808 |
path.push(
|
|
|
809 |
'L',
|
|
|
810 |
toPath[10], // These two do not exist in the regular getPlotLine
|
|
|
811 |
toPath[11], // ---- # 3005
|
|
|
812 |
'L',
|
|
|
813 |
toPath[7],
|
|
|
814 |
toPath[8],
|
|
|
815 |
'L',
|
|
|
816 |
toPath[4],
|
|
|
817 |
toPath[5],
|
|
|
818 |
'L',
|
|
|
819 |
toPath[1],
|
|
|
820 |
toPath[2]
|
|
|
821 |
);
|
|
|
822 |
} else { // outside the axis area
|
|
|
823 |
path = null;
|
|
|
824 |
}
|
|
|
825 |
|
|
|
826 |
return path;
|
|
|
827 |
}
|
|
|
828 |
});
|
|
|
829 |
|
|
|
830 |
/***
|
|
|
831 |
EXTENSION TO THE TICKS
|
|
|
832 |
***/
|
|
|
833 |
|
|
|
834 |
Highcharts.wrap(Highcharts.Tick.prototype, 'getMarkPath', function (proceed) {
|
|
|
835 |
var path = proceed.apply(this, [].slice.call(arguments, 1));
|
|
|
836 |
|
|
|
837 |
// Do not do this if the chart is not 3D
|
|
|
838 |
if (!this.axis.chart.is3d()) {
|
|
|
839 |
return path;
|
|
|
840 |
}
|
|
|
841 |
|
|
|
842 |
var pArr = [
|
|
|
843 |
this.axis.swapZ({x: path[1], y: path[2], z: 0}),
|
|
|
844 |
this.axis.swapZ({x: path[4], y: path[5], z: 0})
|
|
|
845 |
];
|
|
|
846 |
|
|
|
847 |
pArr = perspective(pArr, this.axis.chart, false);
|
|
|
848 |
path = [
|
|
|
849 |
'M', pArr[0].x, pArr[0].y,
|
|
|
850 |
'L', pArr[1].x, pArr[1].y
|
|
|
851 |
];
|
|
|
852 |
return path;
|
|
|
853 |
});
|
|
|
854 |
|
|
|
855 |
Highcharts.wrap(Highcharts.Tick.prototype, 'getLabelPosition', function (proceed) {
|
|
|
856 |
var pos = proceed.apply(this, [].slice.call(arguments, 1));
|
|
|
857 |
|
|
|
858 |
// Do not do this if the chart is not 3D
|
|
|
859 |
if (!this.axis.chart.is3d()) {
|
|
|
860 |
return pos;
|
|
|
861 |
}
|
|
|
862 |
|
|
|
863 |
var new_pos = perspective([this.axis.swapZ({x: pos.x, y: pos.y, z: 0})], this.axis.chart, false)[0];
|
|
|
864 |
new_pos.x = new_pos.x - (!this.axis.horiz && this.axis.opposite ? this.axis.transA : 0); //#3788
|
|
|
865 |
new_pos.old = pos;
|
|
|
866 |
return new_pos;
|
|
|
867 |
});
|
|
|
868 |
|
|
|
869 |
Highcharts.wrap(Highcharts.Tick.prototype, 'handleOverflow', function (proceed, xy) {
|
|
|
870 |
if (this.axis.chart.is3d()) {
|
|
|
871 |
xy = xy.old;
|
|
|
872 |
}
|
|
|
873 |
return proceed.call(this, xy);
|
|
|
874 |
});
|
|
|
875 |
|
|
|
876 |
Highcharts.wrap(Highcharts.Axis.prototype, 'getTitlePosition', function (proceed) {
|
|
|
877 |
var pos = proceed.apply(this, [].slice.call(arguments, 1));
|
|
|
878 |
|
|
|
879 |
// Do not do this if the chart is not 3D
|
|
|
880 |
if (!this.chart.is3d()) {
|
|
|
881 |
return pos;
|
|
|
882 |
}
|
|
|
883 |
|
|
|
884 |
pos = perspective([this.swapZ({x: pos.x, y: pos.y, z: 0})], this.chart, false)[0];
|
|
|
885 |
return pos;
|
|
|
886 |
});
|
|
|
887 |
|
|
|
888 |
Highcharts.wrap(Highcharts.Axis.prototype, 'drawCrosshair', function (proceed) {
|
|
|
889 |
var args = arguments;
|
|
|
890 |
if (this.chart.is3d()) {
|
|
|
891 |
if (args[2]) {
|
|
|
892 |
args[2] = {
|
|
|
893 |
plotX: args[2].plotXold || args[2].plotX,
|
|
|
894 |
plotY: args[2].plotYold || args[2].plotY
|
|
|
895 |
};
|
|
|
896 |
}
|
|
|
897 |
}
|
|
|
898 |
proceed.apply(this, [].slice.call(args, 1));
|
|
|
899 |
});
|
|
|
900 |
|
|
|
901 |
/***
|
|
|
902 |
Z-AXIS
|
|
|
903 |
***/
|
|
|
904 |
|
|
|
905 |
Highcharts.Axis.prototype.swapZ = function (p, insidePlotArea) {
|
|
|
906 |
if (this.isZAxis) {
|
|
|
907 |
var plotLeft = insidePlotArea ? 0 : this.chart.plotLeft;
|
|
|
908 |
var chart = this.chart;
|
|
|
909 |
return {
|
|
|
910 |
x: plotLeft + (chart.yAxis[0].opposite ? p.z : chart.xAxis[0].width - p.z),
|
|
|
911 |
y: p.y,
|
|
|
912 |
z: p.x - plotLeft
|
|
|
913 |
};
|
|
|
914 |
} else {
|
|
|
915 |
return p;
|
|
|
916 |
}
|
|
|
917 |
};
|
|
|
918 |
|
|
|
919 |
var ZAxis = Highcharts.ZAxis = function () {
|
|
|
920 |
this.isZAxis = true;
|
|
|
921 |
this.init.apply(this, arguments);
|
|
|
922 |
};
|
|
|
923 |
Highcharts.extend(ZAxis.prototype, Highcharts.Axis.prototype);
|
|
|
924 |
Highcharts.extend(ZAxis.prototype, {
|
|
|
925 |
setOptions: function (userOptions) {
|
|
|
926 |
userOptions = Highcharts.merge({
|
|
|
927 |
offset: 0,
|
|
|
928 |
lineWidth: 0
|
|
|
929 |
}, userOptions);
|
|
|
930 |
Highcharts.Axis.prototype.setOptions.call(this, userOptions);
|
|
|
931 |
this.coll = 'zAxis';
|
|
|
932 |
},
|
|
|
933 |
setAxisSize: function () {
|
|
|
934 |
Highcharts.Axis.prototype.setAxisSize.call(this);
|
|
|
935 |
this.width = this.len = this.chart.options.chart.options3d.depth;
|
|
|
936 |
this.right = this.chart.chartWidth - this.width - this.left;
|
|
|
937 |
},
|
|
|
938 |
getSeriesExtremes: function () {
|
|
|
939 |
var axis = this,
|
|
|
940 |
chart = axis.chart;
|
|
|
941 |
|
|
|
942 |
axis.hasVisibleSeries = false;
|
|
|
943 |
|
|
|
944 |
// Reset properties in case we're redrawing (#3353)
|
|
|
945 |
axis.dataMin = axis.dataMax = axis.ignoreMinPadding = axis.ignoreMaxPadding = null;
|
|
|
946 |
|
|
|
947 |
if (axis.buildStacks) {
|
|
|
948 |
axis.buildStacks();
|
|
|
949 |
}
|
|
|
950 |
|
|
|
951 |
// loop through this axis' series
|
|
|
952 |
Highcharts.each(axis.series, function (series) {
|
|
|
953 |
|
|
|
954 |
if (series.visible || !chart.options.chart.ignoreHiddenSeries) {
|
|
|
955 |
|
|
|
956 |
var seriesOptions = series.options,
|
|
|
957 |
zData,
|
|
|
958 |
threshold = seriesOptions.threshold;
|
|
|
959 |
|
|
|
960 |
axis.hasVisibleSeries = true;
|
|
|
961 |
|
|
|
962 |
// Validate threshold in logarithmic axes
|
|
|
963 |
if (axis.isLog && threshold <= 0) {
|
|
|
964 |
threshold = null;
|
|
|
965 |
}
|
|
|
966 |
|
|
|
967 |
zData = series.zData;
|
|
|
968 |
if (zData.length) {
|
|
|
969 |
axis.dataMin = Math.min(pick(axis.dataMin, zData[0]), Math.min.apply(null, zData));
|
|
|
970 |
axis.dataMax = Math.max(pick(axis.dataMax, zData[0]), Math.max.apply(null, zData));
|
|
|
971 |
}
|
|
|
972 |
}
|
|
|
973 |
});
|
|
|
974 |
}
|
|
|
975 |
});
|
|
|
976 |
|
|
|
977 |
|
|
|
978 |
/**
|
|
|
979 |
* Extend the chart getAxes method to also get the color axis
|
|
|
980 |
*/
|
|
|
981 |
Highcharts.wrap(Highcharts.Chart.prototype, 'getAxes', function (proceed) {
|
|
|
982 |
var chart = this,
|
|
|
983 |
options = this.options,
|
|
|
984 |
zAxisOptions = options.zAxis = Highcharts.splat(options.zAxis || {});
|
|
|
985 |
|
|
|
986 |
proceed.call(this);
|
|
|
987 |
|
|
|
988 |
if (!chart.is3d()) {
|
|
|
989 |
return;
|
|
|
990 |
}
|
|
|
991 |
this.zAxis = [];
|
|
|
992 |
Highcharts.each(zAxisOptions, function (axisOptions, i) {
|
|
|
993 |
axisOptions.index = i;
|
|
|
994 |
axisOptions.isX = true; //Z-Axis is shown horizontally, so it's kind of a X-Axis
|
|
|
995 |
var zAxis = new ZAxis(chart, axisOptions);
|
|
|
996 |
zAxis.setScale();
|
|
|
997 |
});
|
|
|
998 |
});
|
|
|
999 |
/***
|
|
|
1000 |
EXTENSION FOR 3D COLUMNS
|
|
|
1001 |
***/
|
|
|
1002 |
Highcharts.wrap(Highcharts.seriesTypes.column.prototype, 'translate', function (proceed) {
|
|
|
1003 |
proceed.apply(this, [].slice.call(arguments, 1));
|
|
|
1004 |
|
|
|
1005 |
// Do not do this if the chart is not 3D
|
|
|
1006 |
if (!this.chart.is3d()) {
|
|
|
1007 |
return;
|
|
|
1008 |
}
|
|
|
1009 |
|
|
|
1010 |
var series = this,
|
|
|
1011 |
chart = series.chart,
|
|
|
1012 |
seriesOptions = series.options,
|
|
|
1013 |
depth = seriesOptions.depth || 25;
|
|
|
1014 |
|
|
|
1015 |
var stack = seriesOptions.stacking ? (seriesOptions.stack || 0) : series._i;
|
|
|
1016 |
var z = stack * (depth + (seriesOptions.groupZPadding || 1));
|
|
|
1017 |
|
|
|
1018 |
if (seriesOptions.grouping !== false) { z = 0; }
|
|
|
1019 |
|
|
|
1020 |
z += (seriesOptions.groupZPadding || 1);
|
|
|
1021 |
|
|
|
1022 |
Highcharts.each(series.data, function (point) {
|
|
|
1023 |
if (point.y !== null) {
|
|
|
1024 |
var shapeArgs = point.shapeArgs,
|
|
|
1025 |
tooltipPos = point.tooltipPos;
|
|
|
1026 |
|
|
|
1027 |
point.shapeType = 'cuboid';
|
|
|
1028 |
shapeArgs.z = z;
|
|
|
1029 |
shapeArgs.depth = depth;
|
|
|
1030 |
shapeArgs.insidePlotArea = true;
|
|
|
1031 |
|
|
|
1032 |
// Translate the tooltip position in 3d space
|
|
|
1033 |
tooltipPos = perspective([{ x: tooltipPos[0], y: tooltipPos[1], z: z }], chart, false)[0];
|
|
|
1034 |
point.tooltipPos = [tooltipPos.x, tooltipPos.y];
|
|
|
1035 |
}
|
|
|
1036 |
});
|
|
|
1037 |
// store for later use #4067
|
|
|
1038 |
series.z = z;
|
|
|
1039 |
});
|
|
|
1040 |
|
|
|
1041 |
Highcharts.wrap(Highcharts.seriesTypes.column.prototype, 'animate', function (proceed) {
|
|
|
1042 |
if (!this.chart.is3d()) {
|
|
|
1043 |
proceed.apply(this, [].slice.call(arguments, 1));
|
|
|
1044 |
} else {
|
|
|
1045 |
var args = arguments,
|
|
|
1046 |
init = args[1],
|
|
|
1047 |
yAxis = this.yAxis,
|
|
|
1048 |
series = this,
|
|
|
1049 |
reversed = this.yAxis.reversed;
|
|
|
1050 |
|
|
|
1051 |
if (Highcharts.svg) { // VML is too slow anyway
|
|
|
1052 |
if (init) {
|
|
|
1053 |
Highcharts.each(series.data, function (point) {
|
|
|
1054 |
if (point.y !== null) {
|
|
|
1055 |
point.height = point.shapeArgs.height;
|
|
|
1056 |
point.shapey = point.shapeArgs.y; //#2968
|
|
|
1057 |
point.shapeArgs.height = 1;
|
|
|
1058 |
if (!reversed) {
|
|
|
1059 |
if (point.stackY) {
|
|
|
1060 |
point.shapeArgs.y = point.plotY + yAxis.translate(point.stackY);
|
|
|
1061 |
} else {
|
|
|
1062 |
point.shapeArgs.y = point.plotY + (point.negative ? -point.height : point.height);
|
|
|
1063 |
}
|
|
|
1064 |
}
|
|
|
1065 |
}
|
|
|
1066 |
});
|
|
|
1067 |
|
|
|
1068 |
} else { // run the animation
|
|
|
1069 |
Highcharts.each(series.data, function (point) {
|
|
|
1070 |
if (point.y !== null) {
|
|
|
1071 |
point.shapeArgs.height = point.height;
|
|
|
1072 |
point.shapeArgs.y = point.shapey; //#2968
|
|
|
1073 |
// null value do not have a graphic
|
|
|
1074 |
if (point.graphic) {
|
|
|
1075 |
point.graphic.animate(point.shapeArgs, series.options.animation);
|
|
|
1076 |
}
|
|
|
1077 |
}
|
|
|
1078 |
});
|
|
|
1079 |
|
|
|
1080 |
// redraw datalabels to the correct position
|
|
|
1081 |
this.drawDataLabels();
|
|
|
1082 |
|
|
|
1083 |
// delete this function to allow it only once
|
|
|
1084 |
series.animate = null;
|
|
|
1085 |
}
|
|
|
1086 |
}
|
|
|
1087 |
}
|
|
|
1088 |
});
|
|
|
1089 |
|
|
|
1090 |
Highcharts.wrap(Highcharts.seriesTypes.column.prototype, 'init', function (proceed) {
|
|
|
1091 |
proceed.apply(this, [].slice.call(arguments, 1));
|
|
|
1092 |
|
|
|
1093 |
if (this.chart.is3d()) {
|
|
|
1094 |
var seriesOptions = this.options,
|
|
|
1095 |
grouping = seriesOptions.grouping,
|
|
|
1096 |
stacking = seriesOptions.stacking,
|
|
|
1097 |
z = 0;
|
|
|
1098 |
|
|
|
1099 |
if (!(grouping !== undefined && !grouping)) {
|
|
|
1100 |
var stacks = this.chart.retrieveStacks(stacking),
|
|
|
1101 |
stack = seriesOptions.stack || 0,
|
|
|
1102 |
i; // position within the stack
|
|
|
1103 |
for (i = 0; i < stacks[stack].series.length; i++) {
|
|
|
1104 |
if (stacks[stack].series[i] === this) {
|
|
|
1105 |
break;
|
|
|
1106 |
}
|
|
|
1107 |
}
|
|
|
1108 |
z = (stacks.totalStacks * 10) - (10 * (stacks.totalStacks - stacks[stack].position)) - i;
|
|
|
1109 |
}
|
|
|
1110 |
|
|
|
1111 |
seriesOptions.zIndex = z;
|
|
|
1112 |
}
|
|
|
1113 |
});
|
|
|
1114 |
function draw3DPoints(proceed) {
|
|
|
1115 |
// Do not do this if the chart is not 3D
|
|
|
1116 |
if (this.chart.is3d()) {
|
|
|
1117 |
var grouping = this.chart.options.plotOptions.column.grouping;
|
|
|
1118 |
if (grouping !== undefined && !grouping && this.group.zIndex !== undefined && !this.zIndexSet) {
|
|
|
1119 |
this.group.attr({zIndex : (this.group.zIndex * 10)});
|
|
|
1120 |
this.zIndexSet = true; // #4062 set zindex only once
|
|
|
1121 |
}
|
|
|
1122 |
|
|
|
1123 |
var options = this.options,
|
|
|
1124 |
states = this.options.states;
|
|
|
1125 |
|
|
|
1126 |
this.borderWidth = options.borderWidth = defined(options.edgeWidth) ? options.edgeWidth : 1; //#4055
|
|
|
1127 |
|
|
|
1128 |
Highcharts.each(this.data, function (point) {
|
|
|
1129 |
if (point.y !== null) {
|
|
|
1130 |
var pointAttr = point.pointAttr;
|
|
|
1131 |
|
|
|
1132 |
// Set the border color to the fill color to provide a smooth edge
|
|
|
1133 |
this.borderColor = Highcharts.pick(options.edgeColor, pointAttr[''].fill);
|
|
|
1134 |
|
|
|
1135 |
pointAttr[''].stroke = this.borderColor;
|
|
|
1136 |
pointAttr.hover.stroke = Highcharts.pick(states.hover.edgeColor, this.borderColor);
|
|
|
1137 |
pointAttr.select.stroke = Highcharts.pick(states.select.edgeColor, this.borderColor);
|
|
|
1138 |
}
|
|
|
1139 |
});
|
|
|
1140 |
}
|
|
|
1141 |
|
|
|
1142 |
proceed.apply(this, [].slice.call(arguments, 1));
|
|
|
1143 |
}
|
|
|
1144 |
|
|
|
1145 |
Highcharts.wrap(Highcharts.Series.prototype, 'alignDataLabel', function (proceed) {
|
|
|
1146 |
|
|
|
1147 |
// Only do this for 3D columns and columnranges
|
|
|
1148 |
if (this.chart.is3d() && (this.type === 'column' || this.type === 'columnrange')) {
|
|
|
1149 |
var series = this,
|
|
|
1150 |
chart = series.chart;
|
|
|
1151 |
|
|
|
1152 |
var args = arguments,
|
|
|
1153 |
alignTo = args[4];
|
|
|
1154 |
|
|
|
1155 |
var pos = ({x: alignTo.x, y: alignTo.y, z: series.z});
|
|
|
1156 |
pos = perspective([pos], chart, true)[0];
|
|
|
1157 |
alignTo.x = pos.x;
|
|
|
1158 |
alignTo.y = pos.y;
|
|
|
1159 |
}
|
|
|
1160 |
|
|
|
1161 |
proceed.apply(this, [].slice.call(arguments, 1));
|
|
|
1162 |
});
|
|
|
1163 |
|
|
|
1164 |
if (Highcharts.seriesTypes.columnrange) {
|
|
|
1165 |
Highcharts.wrap(Highcharts.seriesTypes.columnrange.prototype, 'drawPoints', draw3DPoints);
|
|
|
1166 |
}
|
|
|
1167 |
|
|
|
1168 |
Highcharts.wrap(Highcharts.seriesTypes.column.prototype, 'drawPoints', draw3DPoints);
|
|
|
1169 |
|
|
|
1170 |
/***
|
|
|
1171 |
EXTENSION FOR 3D CYLINDRICAL COLUMNS
|
|
|
1172 |
Not supported
|
|
|
1173 |
***/
|
|
|
1174 |
/*
|
|
|
1175 |
var defaultOptions = Highcharts.getOptions();
|
|
|
1176 |
defaultOptions.plotOptions.cylinder = Highcharts.merge(defaultOptions.plotOptions.column);
|
|
|
1177 |
var CylinderSeries = Highcharts.extendClass(Highcharts.seriesTypes.column, {
|
|
|
1178 |
type: 'cylinder'
|
|
|
1179 |
});
|
|
|
1180 |
Highcharts.seriesTypes.cylinder = CylinderSeries;
|
|
|
1181 |
|
|
|
1182 |
Highcharts.wrap(Highcharts.seriesTypes.cylinder.prototype, 'translate', function (proceed) {
|
|
|
1183 |
proceed.apply(this, [].slice.call(arguments, 1));
|
|
|
1184 |
|
|
|
1185 |
// Do not do this if the chart is not 3D
|
|
|
1186 |
if (!this.chart.is3d()) {
|
|
|
1187 |
return;
|
|
|
1188 |
}
|
|
|
1189 |
|
|
|
1190 |
var series = this,
|
|
|
1191 |
chart = series.chart,
|
|
|
1192 |
options = chart.options,
|
|
|
1193 |
cylOptions = options.plotOptions.cylinder,
|
|
|
1194 |
options3d = options.chart.options3d,
|
|
|
1195 |
depth = cylOptions.depth || 0,
|
|
|
1196 |
origin = {
|
|
|
1197 |
x: chart.inverted ? chart.plotHeight / 2 : chart.plotWidth / 2,
|
|
|
1198 |
y: chart.inverted ? chart.plotWidth / 2 : chart.plotHeight / 2,
|
|
|
1199 |
z: options3d.depth,
|
|
|
1200 |
vd: options3d.viewDistance
|
|
|
1201 |
},
|
|
|
1202 |
alpha = options3d.alpha;
|
|
|
1203 |
|
|
|
1204 |
var z = cylOptions.stacking ? (this.options.stack || 0) * depth : series._i * depth;
|
|
|
1205 |
z += depth / 2;
|
|
|
1206 |
|
|
|
1207 |
if (cylOptions.grouping !== false) { z = 0; }
|
|
|
1208 |
|
|
|
1209 |
Highcharts.each(series.data, function (point) {
|
|
|
1210 |
var shapeArgs = point.shapeArgs;
|
|
|
1211 |
point.shapeType = 'arc3d';
|
|
|
1212 |
shapeArgs.x += depth / 2;
|
|
|
1213 |
shapeArgs.z = z;
|
|
|
1214 |
shapeArgs.start = 0;
|
|
|
1215 |
shapeArgs.end = 2 * PI;
|
|
|
1216 |
shapeArgs.r = depth * 0.95;
|
|
|
1217 |
shapeArgs.innerR = 0;
|
|
|
1218 |
shapeArgs.depth = shapeArgs.height * (1 / sin((90 - alpha) * deg2rad)) - z;
|
|
|
1219 |
shapeArgs.alpha = 90 - alpha;
|
|
|
1220 |
shapeArgs.beta = 0;
|
|
|
1221 |
shapeArgs.origin = origin;
|
|
|
1222 |
});
|
|
|
1223 |
});
|
|
|
1224 |
*//***
|
|
|
1225 |
EXTENSION FOR 3D PIES
|
|
|
1226 |
***/
|
|
|
1227 |
|
|
|
1228 |
Highcharts.wrap(Highcharts.seriesTypes.pie.prototype, 'translate', function (proceed) {
|
|
|
1229 |
proceed.apply(this, [].slice.call(arguments, 1));
|
|
|
1230 |
|
|
|
1231 |
// Do not do this if the chart is not 3D
|
|
|
1232 |
if (!this.chart.is3d()) {
|
|
|
1233 |
return;
|
|
|
1234 |
}
|
|
|
1235 |
|
|
|
1236 |
var series = this,
|
|
|
1237 |
chart = series.chart,
|
|
|
1238 |
options = chart.options,
|
|
|
1239 |
seriesOptions = series.options,
|
|
|
1240 |
depth = seriesOptions.depth || 0,
|
|
|
1241 |
options3d = options.chart.options3d,
|
|
|
1242 |
origin = {
|
|
|
1243 |
x: chart.plotWidth / 2,
|
|
|
1244 |
y: chart.plotHeight / 2,
|
|
|
1245 |
z: options3d.depth
|
|
|
1246 |
},
|
|
|
1247 |
alpha = options3d.alpha,
|
|
|
1248 |
beta = options3d.beta,
|
|
|
1249 |
z = seriesOptions.stacking ? (seriesOptions.stack || 0) * depth : series._i * depth;
|
|
|
1250 |
|
|
|
1251 |
z += depth / 2;
|
|
|
1252 |
|
|
|
1253 |
if (seriesOptions.grouping !== false) { z = 0; }
|
|
|
1254 |
|
|
|
1255 |
Highcharts.each(series.data, function (point) {
|
|
|
1256 |
|
|
|
1257 |
var shapeArgs = point.shapeArgs,
|
|
|
1258 |
angle;
|
|
|
1259 |
|
|
|
1260 |
point.shapeType = 'arc3d';
|
|
|
1261 |
|
|
|
1262 |
shapeArgs.z = z;
|
|
|
1263 |
shapeArgs.depth = depth * 0.75;
|
|
|
1264 |
shapeArgs.origin = origin;
|
|
|
1265 |
shapeArgs.alpha = alpha;
|
|
|
1266 |
shapeArgs.beta = beta;
|
|
|
1267 |
shapeArgs.center = series.center;
|
|
|
1268 |
|
|
|
1269 |
angle = (shapeArgs.end + shapeArgs.start) / 2;
|
|
|
1270 |
|
|
|
1271 |
point.slicedTranslation = {
|
|
|
1272 |
translateX : round(cos(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)),
|
|
|
1273 |
translateY : round(sin(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad))
|
|
|
1274 |
};
|
|
|
1275 |
});
|
|
|
1276 |
});
|
|
|
1277 |
|
|
|
1278 |
Highcharts.wrap(Highcharts.seriesTypes.pie.prototype.pointClass.prototype, 'haloPath', function (proceed) {
|
|
|
1279 |
var args = arguments;
|
|
|
1280 |
return this.series.chart.is3d() ? [] : proceed.call(this, args[1]);
|
|
|
1281 |
});
|
|
|
1282 |
|
|
|
1283 |
Highcharts.wrap(Highcharts.seriesTypes.pie.prototype, 'drawPoints', function (proceed) {
|
|
|
1284 |
|
|
|
1285 |
var seriesGroup = this.group,
|
|
|
1286 |
options = this.options,
|
|
|
1287 |
states = options.states;
|
|
|
1288 |
|
|
|
1289 |
// Do not do this if the chart is not 3D
|
|
|
1290 |
if (this.chart.is3d()) {
|
|
|
1291 |
// Set the border color to the fill color to provide a smooth edge
|
|
|
1292 |
this.borderWidth = options.borderWidth = options.edgeWidth || 1;
|
|
|
1293 |
this.borderColor = options.edgeColor = Highcharts.pick(options.edgeColor, options.borderColor, undefined);
|
|
|
1294 |
|
|
|
1295 |
states.hover.borderColor = Highcharts.pick(states.hover.edgeColor, this.borderColor);
|
|
|
1296 |
states.hover.borderWidth = Highcharts.pick(states.hover.edgeWidth, this.borderWidth);
|
|
|
1297 |
states.select.borderColor = Highcharts.pick(states.select.edgeColor, this.borderColor);
|
|
|
1298 |
states.select.borderWidth = Highcharts.pick(states.select.edgeWidth, this.borderWidth);
|
|
|
1299 |
|
|
|
1300 |
Highcharts.each(this.data, function (point) {
|
|
|
1301 |
var pointAttr = point.pointAttr;
|
|
|
1302 |
pointAttr[''].stroke = point.series.borderColor || point.color;
|
|
|
1303 |
pointAttr['']['stroke-width'] = point.series.borderWidth;
|
|
|
1304 |
pointAttr.hover.stroke = states.hover.borderColor;
|
|
|
1305 |
pointAttr.hover['stroke-width'] = states.hover.borderWidth;
|
|
|
1306 |
pointAttr.select.stroke = states.select.borderColor;
|
|
|
1307 |
pointAttr.select['stroke-width'] = states.select.borderWidth;
|
|
|
1308 |
});
|
|
|
1309 |
}
|
|
|
1310 |
|
|
|
1311 |
proceed.apply(this, [].slice.call(arguments, 1));
|
|
|
1312 |
|
|
|
1313 |
if (this.chart.is3d()) {
|
|
|
1314 |
Highcharts.each(this.points, function (point) {
|
|
|
1315 |
var graphic = point.graphic;
|
|
|
1316 |
|
|
|
1317 |
graphic.out.add(seriesGroup);
|
|
|
1318 |
graphic.inn.add(seriesGroup);
|
|
|
1319 |
graphic.side1.add(seriesGroup);
|
|
|
1320 |
graphic.side2.add(seriesGroup);
|
|
|
1321 |
|
|
|
1322 |
// Hide null or 0 points (#3006, 3650)
|
|
|
1323 |
graphic[point.y ? 'show' : 'hide']();
|
|
|
1324 |
});
|
|
|
1325 |
}
|
|
|
1326 |
});
|
|
|
1327 |
|
|
|
1328 |
Highcharts.wrap(Highcharts.seriesTypes.pie.prototype, 'drawDataLabels', function (proceed) {
|
|
|
1329 |
if (this.chart.is3d()) {
|
|
|
1330 |
var series = this;
|
|
|
1331 |
Highcharts.each(series.data, function (point) {
|
|
|
1332 |
var shapeArgs = point.shapeArgs,
|
|
|
1333 |
r = shapeArgs.r,
|
|
|
1334 |
d = shapeArgs.depth,
|
|
|
1335 |
a1 = (shapeArgs.alpha || series.chart.options.chart.options3d.alpha) * deg2rad, //#3240 issue with datalabels for 0 and null values
|
|
|
1336 |
a2 = (shapeArgs.start + shapeArgs.end) / 2,
|
|
|
1337 |
labelPos = point.labelPos;
|
|
|
1338 |
|
|
|
1339 |
labelPos[1] += (-r * (1 - cos(a1)) * sin(a2)) + (sin(a2) > 0 ? sin(a1) * d : 0);
|
|
|
1340 |
labelPos[3] += (-r * (1 - cos(a1)) * sin(a2)) + (sin(a2) > 0 ? sin(a1) * d : 0);
|
|
|
1341 |
labelPos[5] += (-r * (1 - cos(a1)) * sin(a2)) + (sin(a2) > 0 ? sin(a1) * d : 0);
|
|
|
1342 |
|
|
|
1343 |
});
|
|
|
1344 |
}
|
|
|
1345 |
|
|
|
1346 |
proceed.apply(this, [].slice.call(arguments, 1));
|
|
|
1347 |
});
|
|
|
1348 |
|
|
|
1349 |
Highcharts.wrap(Highcharts.seriesTypes.pie.prototype, 'addPoint', function (proceed) {
|
|
|
1350 |
proceed.apply(this, [].slice.call(arguments, 1));
|
|
|
1351 |
if (this.chart.is3d()) {
|
|
|
1352 |
// destroy (and rebuild) everything!!!
|
|
|
1353 |
this.update(this.userOptions, true); // #3845 pass the old options
|
|
|
1354 |
}
|
|
|
1355 |
});
|
|
|
1356 |
|
|
|
1357 |
Highcharts.wrap(Highcharts.seriesTypes.pie.prototype, 'animate', function (proceed) {
|
|
|
1358 |
if (!this.chart.is3d()) {
|
|
|
1359 |
proceed.apply(this, [].slice.call(arguments, 1));
|
|
|
1360 |
} else {
|
|
|
1361 |
var args = arguments,
|
|
|
1362 |
init = args[1],
|
|
|
1363 |
animation = this.options.animation,
|
|
|
1364 |
attribs,
|
|
|
1365 |
center = this.center,
|
|
|
1366 |
group = this.group,
|
|
|
1367 |
markerGroup = this.markerGroup;
|
|
|
1368 |
|
|
|
1369 |
if (Highcharts.svg) { // VML is too slow anyway
|
|
|
1370 |
|
|
|
1371 |
if (animation === true) {
|
|
|
1372 |
animation = {};
|
|
|
1373 |
}
|
|
|
1374 |
// Initialize the animation
|
|
|
1375 |
if (init) {
|
|
|
1376 |
|
|
|
1377 |
// Scale down the group and place it in the center
|
|
|
1378 |
group.oldtranslateX = group.translateX;
|
|
|
1379 |
group.oldtranslateY = group.translateY;
|
|
|
1380 |
attribs = {
|
|
|
1381 |
translateX: center[0],
|
|
|
1382 |
translateY: center[1],
|
|
|
1383 |
scaleX: 0.001, // #1499
|
|
|
1384 |
scaleY: 0.001
|
|
|
1385 |
};
|
|
|
1386 |
|
|
|
1387 |
group.attr(attribs);
|
|
|
1388 |
if (markerGroup) {
|
|
|
1389 |
markerGroup.attrSetters = group.attrSetters;
|
|
|
1390 |
markerGroup.attr(attribs);
|
|
|
1391 |
}
|
|
|
1392 |
|
|
|
1393 |
// Run the animation
|
|
|
1394 |
} else {
|
|
|
1395 |
attribs = {
|
|
|
1396 |
translateX: group.oldtranslateX,
|
|
|
1397 |
translateY: group.oldtranslateY,
|
|
|
1398 |
scaleX: 1,
|
|
|
1399 |
scaleY: 1
|
|
|
1400 |
};
|
|
|
1401 |
group.animate(attribs, animation);
|
|
|
1402 |
|
|
|
1403 |
if (markerGroup) {
|
|
|
1404 |
markerGroup.animate(attribs, animation);
|
|
|
1405 |
}
|
|
|
1406 |
|
|
|
1407 |
// Delete this function to allow it only once
|
|
|
1408 |
this.animate = null;
|
|
|
1409 |
}
|
|
|
1410 |
|
|
|
1411 |
}
|
|
|
1412 |
}
|
|
|
1413 |
});/***
|
|
|
1414 |
EXTENSION FOR 3D SCATTER CHART
|
|
|
1415 |
***/
|
|
|
1416 |
|
|
|
1417 |
Highcharts.wrap(Highcharts.seriesTypes.scatter.prototype, 'translate', function (proceed) {
|
|
|
1418 |
//function translate3d(proceed) {
|
|
|
1419 |
proceed.apply(this, [].slice.call(arguments, 1));
|
|
|
1420 |
|
|
|
1421 |
if (!this.chart.is3d()) {
|
|
|
1422 |
return;
|
|
|
1423 |
}
|
|
|
1424 |
|
|
|
1425 |
var series = this,
|
|
|
1426 |
chart = series.chart,
|
|
|
1427 |
zAxis = Highcharts.pick(series.zAxis, chart.options.zAxis[0]);
|
|
|
1428 |
|
|
|
1429 |
var raw_points = [],
|
|
|
1430 |
raw_point,
|
|
|
1431 |
projected_points,
|
|
|
1432 |
projected_point,
|
|
|
1433 |
i;
|
|
|
1434 |
|
|
|
1435 |
for (i = 0; i < series.data.length; i++) {
|
|
|
1436 |
raw_point = series.data[i];
|
|
|
1437 |
|
|
|
1438 |
raw_point.isInside = raw_point.isInside ? (raw_point.z >= zAxis.min && raw_point.z <= zAxis.max) : false;
|
|
|
1439 |
|
|
|
1440 |
raw_points.push({
|
|
|
1441 |
x: raw_point.plotX,
|
|
|
1442 |
y: raw_point.plotY,
|
|
|
1443 |
z: zAxis.translate(raw_point.z)
|
|
|
1444 |
});
|
|
|
1445 |
}
|
|
|
1446 |
|
|
|
1447 |
projected_points = perspective(raw_points, chart, true);
|
|
|
1448 |
|
|
|
1449 |
for (i = 0; i < series.data.length; i++) {
|
|
|
1450 |
raw_point = series.data[i];
|
|
|
1451 |
projected_point = projected_points[i];
|
|
|
1452 |
|
|
|
1453 |
raw_point.plotXold = raw_point.plotX;
|
|
|
1454 |
raw_point.plotYold = raw_point.plotY;
|
|
|
1455 |
|
|
|
1456 |
raw_point.plotX = projected_point.x;
|
|
|
1457 |
raw_point.plotY = projected_point.y;
|
|
|
1458 |
raw_point.plotZ = projected_point.z;
|
|
|
1459 |
|
|
|
1460 |
|
|
|
1461 |
}
|
|
|
1462 |
|
|
|
1463 |
});
|
|
|
1464 |
|
|
|
1465 |
Highcharts.wrap(Highcharts.seriesTypes.scatter.prototype, 'init', function (proceed, chart, options) {
|
|
|
1466 |
if (chart.is3d()) {
|
|
|
1467 |
// add a third coordinate
|
|
|
1468 |
this.axisTypes = ['xAxis', 'yAxis', 'zAxis'];
|
|
|
1469 |
this.pointArrayMap = ['x', 'y', 'z'];
|
|
|
1470 |
this.parallelArrays = ['x', 'y', 'z'];
|
|
|
1471 |
}
|
|
|
1472 |
|
|
|
1473 |
var result = proceed.apply(this, [chart, options]);
|
|
|
1474 |
|
|
|
1475 |
if (this.chart.is3d()) {
|
|
|
1476 |
// Set a new default tooltip formatter
|
|
|
1477 |
var default3dScatterTooltip = 'x: <b>{point.x}</b><br/>y: <b>{point.y}</b><br/>z: <b>{point.z}</b><br/>';
|
|
|
1478 |
if (this.userOptions.tooltip) {
|
|
|
1479 |
this.tooltipOptions.pointFormat = this.userOptions.tooltip.pointFormat || default3dScatterTooltip;
|
|
|
1480 |
} else {
|
|
|
1481 |
this.tooltipOptions.pointFormat = default3dScatterTooltip;
|
|
|
1482 |
}
|
|
|
1483 |
}
|
|
|
1484 |
return result;
|
|
|
1485 |
});
|
|
|
1486 |
/**
|
|
|
1487 |
* Extension to the VML Renderer
|
|
|
1488 |
*/
|
|
|
1489 |
if (Highcharts.VMLRenderer) {
|
|
|
1490 |
|
|
|
1491 |
Highcharts.setOptions({animate: false});
|
|
|
1492 |
|
|
|
1493 |
Highcharts.VMLRenderer.prototype.cuboid = Highcharts.SVGRenderer.prototype.cuboid;
|
|
|
1494 |
Highcharts.VMLRenderer.prototype.cuboidPath = Highcharts.SVGRenderer.prototype.cuboidPath;
|
|
|
1495 |
|
|
|
1496 |
Highcharts.VMLRenderer.prototype.toLinePath = Highcharts.SVGRenderer.prototype.toLinePath;
|
|
|
1497 |
|
|
|
1498 |
Highcharts.VMLRenderer.prototype.createElement3D = Highcharts.SVGRenderer.prototype.createElement3D;
|
|
|
1499 |
|
|
|
1500 |
Highcharts.VMLRenderer.prototype.arc3d = function (shapeArgs) {
|
|
|
1501 |
var result = Highcharts.SVGRenderer.prototype.arc3d.call(this, shapeArgs);
|
|
|
1502 |
result.css({zIndex: result.zIndex});
|
|
|
1503 |
return result;
|
|
|
1504 |
};
|
|
|
1505 |
|
|
|
1506 |
Highcharts.VMLRenderer.prototype.arc3dPath = Highcharts.SVGRenderer.prototype.arc3dPath;
|
|
|
1507 |
|
|
|
1508 |
Highcharts.wrap(Highcharts.Axis.prototype, 'render', function (proceed) {
|
|
|
1509 |
proceed.apply(this, [].slice.call(arguments, 1));
|
|
|
1510 |
// VML doesn't support a negative z-index
|
|
|
1511 |
if (this.sideFrame) {
|
|
|
1512 |
this.sideFrame.css({zIndex: 0});
|
|
|
1513 |
this.sideFrame.front.attr({fill: this.sideFrame.color});
|
|
|
1514 |
}
|
|
|
1515 |
if (this.bottomFrame) {
|
|
|
1516 |
this.bottomFrame.css({zIndex: 1});
|
|
|
1517 |
this.bottomFrame.front.attr({fill: this.bottomFrame.color});
|
|
|
1518 |
}
|
|
|
1519 |
if (this.backFrame) {
|
|
|
1520 |
this.backFrame.css({zIndex: 0});
|
|
|
1521 |
this.backFrame.front.attr({fill: this.backFrame.color});
|
|
|
1522 |
}
|
|
|
1523 |
});
|
|
|
1524 |
|
|
|
1525 |
}
|
|
|
1526 |
|
|
|
1527 |
}(Highcharts));
|