| 9 |
lars |
1 |
/**
|
|
|
2 |
* @license Highstock JS v2.1.8 (2015-08-20)
|
|
|
3 |
* Solid angular gauge module
|
|
|
4 |
*
|
|
|
5 |
* (c) 2010-2014 Torstein Honsi
|
|
|
6 |
*
|
|
|
7 |
* License: www.highcharts.com/license
|
|
|
8 |
*/
|
|
|
9 |
|
|
|
10 |
/*global Highcharts, HighchartsAdapter*/
|
|
|
11 |
(function (H) {
|
|
|
12 |
"use strict";
|
|
|
13 |
|
|
|
14 |
var defaultPlotOptions = H.getOptions().plotOptions,
|
|
|
15 |
pInt = H.pInt,
|
|
|
16 |
pick = H.pick,
|
|
|
17 |
each = H.each,
|
|
|
18 |
colorAxisMethods,
|
|
|
19 |
UNDEFINED;
|
|
|
20 |
|
|
|
21 |
// The default options
|
|
|
22 |
defaultPlotOptions.solidgauge = H.merge(defaultPlotOptions.gauge, {
|
|
|
23 |
colorByPoint: true
|
|
|
24 |
});
|
|
|
25 |
|
|
|
26 |
|
|
|
27 |
// These methods are defined in the ColorAxis object, and copied here.
|
|
|
28 |
// If we implement an AMD system we should make ColorAxis a dependency.
|
|
|
29 |
colorAxisMethods = {
|
|
|
30 |
|
|
|
31 |
|
|
|
32 |
initDataClasses: function (userOptions) {
|
|
|
33 |
var axis = this,
|
|
|
34 |
chart = this.chart,
|
|
|
35 |
dataClasses,
|
|
|
36 |
colorCounter = 0,
|
|
|
37 |
options = this.options;
|
|
|
38 |
this.dataClasses = dataClasses = [];
|
|
|
39 |
|
|
|
40 |
each(userOptions.dataClasses, function (dataClass, i) {
|
|
|
41 |
var colors;
|
|
|
42 |
|
|
|
43 |
dataClass = H.merge(dataClass);
|
|
|
44 |
dataClasses.push(dataClass);
|
|
|
45 |
if (!dataClass.color) {
|
|
|
46 |
if (options.dataClassColor === 'category') {
|
|
|
47 |
colors = chart.options.colors;
|
|
|
48 |
dataClass.color = colors[colorCounter++];
|
|
|
49 |
// loop back to zero
|
|
|
50 |
if (colorCounter === colors.length) {
|
|
|
51 |
colorCounter = 0;
|
|
|
52 |
}
|
|
|
53 |
} else {
|
|
|
54 |
dataClass.color = axis.tweenColors(H.Color(options.minColor), H.Color(options.maxColor), i / (userOptions.dataClasses.length - 1));
|
|
|
55 |
}
|
|
|
56 |
}
|
|
|
57 |
});
|
|
|
58 |
},
|
|
|
59 |
|
|
|
60 |
initStops: function (userOptions) {
|
|
|
61 |
this.stops = userOptions.stops || [
|
|
|
62 |
[0, this.options.minColor],
|
|
|
63 |
[1, this.options.maxColor]
|
|
|
64 |
];
|
|
|
65 |
each(this.stops, function (stop) {
|
|
|
66 |
stop.color = H.Color(stop[1]);
|
|
|
67 |
});
|
|
|
68 |
},
|
|
|
69 |
/**
|
|
|
70 |
* Translate from a value to a color
|
|
|
71 |
*/
|
|
|
72 |
toColor: function (value, point) {
|
|
|
73 |
var pos,
|
|
|
74 |
stops = this.stops,
|
|
|
75 |
from,
|
|
|
76 |
to,
|
|
|
77 |
color,
|
|
|
78 |
dataClasses = this.dataClasses,
|
|
|
79 |
dataClass,
|
|
|
80 |
i;
|
|
|
81 |
|
|
|
82 |
if (dataClasses) {
|
|
|
83 |
i = dataClasses.length;
|
|
|
84 |
while (i--) {
|
|
|
85 |
dataClass = dataClasses[i];
|
|
|
86 |
from = dataClass.from;
|
|
|
87 |
to = dataClass.to;
|
|
|
88 |
if ((from === UNDEFINED || value >= from) && (to === UNDEFINED || value <= to)) {
|
|
|
89 |
color = dataClass.color;
|
|
|
90 |
if (point) {
|
|
|
91 |
point.dataClass = i;
|
|
|
92 |
}
|
|
|
93 |
break;
|
|
|
94 |
}
|
|
|
95 |
}
|
|
|
96 |
|
|
|
97 |
} else {
|
|
|
98 |
|
|
|
99 |
if (this.isLog) {
|
|
|
100 |
value = this.val2lin(value);
|
|
|
101 |
}
|
|
|
102 |
pos = 1 - ((this.max - value) / (this.max - this.min));
|
|
|
103 |
i = stops.length;
|
|
|
104 |
while (i--) {
|
|
|
105 |
if (pos > stops[i][0]) {
|
|
|
106 |
break;
|
|
|
107 |
}
|
|
|
108 |
}
|
|
|
109 |
from = stops[i] || stops[i + 1];
|
|
|
110 |
to = stops[i + 1] || from;
|
|
|
111 |
|
|
|
112 |
// The position within the gradient
|
|
|
113 |
pos = 1 - (to[0] - pos) / ((to[0] - from[0]) || 1);
|
|
|
114 |
|
|
|
115 |
color = this.tweenColors(
|
|
|
116 |
from.color,
|
|
|
117 |
to.color,
|
|
|
118 |
pos
|
|
|
119 |
);
|
|
|
120 |
}
|
|
|
121 |
return color;
|
|
|
122 |
},
|
|
|
123 |
/*
|
|
|
124 |
* Return an intermediate color between two colors, according to pos where 0
|
|
|
125 |
* is the from color and 1 is the to color.
|
|
|
126 |
*/
|
|
|
127 |
tweenColors: function (from, to, pos) {
|
|
|
128 |
// Check for has alpha, because rgba colors perform worse due to lack of
|
|
|
129 |
// support in WebKit.
|
|
|
130 |
var hasAlpha,
|
|
|
131 |
ret;
|
|
|
132 |
|
|
|
133 |
// Unsupported color, return to-color (#3920)
|
|
|
134 |
if (!to.rgba.length || !from.rgba.length) {
|
|
|
135 |
ret = to.raw || 'none';
|
|
|
136 |
|
|
|
137 |
// Interpolate
|
|
|
138 |
} else {
|
|
|
139 |
from = from.rgba;
|
|
|
140 |
to = to.rgba;
|
|
|
141 |
hasAlpha = (to[3] !== 1 || from[3] !== 1);
|
|
|
142 |
ret = (hasAlpha ? 'rgba(' : 'rgb(') +
|
|
|
143 |
Math.round(to[0] + (from[0] - to[0]) * (1 - pos)) + ',' +
|
|
|
144 |
Math.round(to[1] + (from[1] - to[1]) * (1 - pos)) + ',' +
|
|
|
145 |
Math.round(to[2] + (from[2] - to[2]) * (1 - pos)) +
|
|
|
146 |
(hasAlpha ? (',' + (to[3] + (from[3] - to[3]) * (1 - pos))) : '') + ')';
|
|
|
147 |
}
|
|
|
148 |
return ret;
|
|
|
149 |
}
|
|
|
150 |
};
|
|
|
151 |
|
|
|
152 |
/**
|
|
|
153 |
* Handle animation of the color attributes directly
|
|
|
154 |
*/
|
|
|
155 |
each(['fill', 'stroke'], function (prop) {
|
|
|
156 |
HighchartsAdapter.addAnimSetter(prop, function (fx) {
|
|
|
157 |
fx.elem.attr(prop, colorAxisMethods.tweenColors(H.Color(fx.start), H.Color(fx.end), fx.pos));
|
|
|
158 |
});
|
|
|
159 |
});
|
|
|
160 |
|
|
|
161 |
// The series prototype
|
|
|
162 |
H.seriesTypes.solidgauge = H.extendClass(H.seriesTypes.gauge, {
|
|
|
163 |
type: 'solidgauge',
|
|
|
164 |
pointAttrToOptions: {}, // #4301, don't inherit line marker's attribs
|
|
|
165 |
bindAxes: function () {
|
|
|
166 |
var axis;
|
|
|
167 |
H.seriesTypes.gauge.prototype.bindAxes.call(this);
|
|
|
168 |
|
|
|
169 |
axis = this.yAxis;
|
|
|
170 |
H.extend(axis, colorAxisMethods);
|
|
|
171 |
|
|
|
172 |
// Prepare data classes
|
|
|
173 |
if (axis.options.dataClasses) {
|
|
|
174 |
axis.initDataClasses(axis.options);
|
|
|
175 |
}
|
|
|
176 |
axis.initStops(axis.options);
|
|
|
177 |
},
|
|
|
178 |
|
|
|
179 |
/**
|
|
|
180 |
* Draw the points where each point is one needle
|
|
|
181 |
*/
|
|
|
182 |
drawPoints: function () {
|
|
|
183 |
var series = this,
|
|
|
184 |
yAxis = series.yAxis,
|
|
|
185 |
center = yAxis.center,
|
|
|
186 |
options = series.options,
|
|
|
187 |
renderer = series.chart.renderer,
|
|
|
188 |
overshoot = options.overshoot,
|
|
|
189 |
overshootVal = overshoot && typeof overshoot === 'number' ? overshoot / 180 * Math.PI : 0;
|
|
|
190 |
|
|
|
191 |
H.each(series.points, function (point) {
|
|
|
192 |
var graphic = point.graphic,
|
|
|
193 |
rotation = yAxis.startAngleRad + yAxis.translate(point.y, null, null, null, true),
|
|
|
194 |
radius = (pInt(pick(point.options.radius, options.radius, 100)) * center[2]) / 200,
|
|
|
195 |
innerRadius = (pInt(pick(point.options.innerRadius, options.innerRadius, 60)) * center[2]) / 200,
|
|
|
196 |
shapeArgs,
|
|
|
197 |
d,
|
|
|
198 |
toColor = yAxis.toColor(point.y, point),
|
|
|
199 |
fromColor,
|
|
|
200 |
axisMinAngle = Math.min(yAxis.startAngleRad, yAxis.endAngleRad),
|
|
|
201 |
axisMaxAngle = Math.max(yAxis.startAngleRad, yAxis.endAngleRad),
|
|
|
202 |
minAngle,
|
|
|
203 |
maxAngle;
|
|
|
204 |
|
|
|
205 |
if (toColor === 'none') { // #3708
|
|
|
206 |
toColor = point.color || series.color || 'none';
|
|
|
207 |
}
|
|
|
208 |
if (toColor !== 'none') {
|
|
|
209 |
fromColor = point.color;
|
|
|
210 |
point.color = toColor;
|
|
|
211 |
}
|
|
|
212 |
|
|
|
213 |
// Handle overshoot and clipping to axis max/min
|
|
|
214 |
rotation = Math.max(axisMinAngle - overshootVal, Math.min(axisMaxAngle + overshootVal, rotation));
|
|
|
215 |
|
|
|
216 |
// Handle the wrap option
|
|
|
217 |
if (options.wrap === false) {
|
|
|
218 |
rotation = Math.max(axisMinAngle, Math.min(axisMaxAngle, rotation));
|
|
|
219 |
}
|
|
|
220 |
|
|
|
221 |
minAngle = Math.min(rotation, yAxis.startAngleRad);
|
|
|
222 |
maxAngle = Math.max(rotation, yAxis.startAngleRad);
|
|
|
223 |
|
|
|
224 |
if (maxAngle - minAngle > 2 * Math.PI) {
|
|
|
225 |
maxAngle = minAngle + 2 * Math.PI;
|
|
|
226 |
}
|
|
|
227 |
|
|
|
228 |
point.shapeArgs = shapeArgs = {
|
|
|
229 |
x: center[0],
|
|
|
230 |
y: center[1],
|
|
|
231 |
r: radius,
|
|
|
232 |
innerR: innerRadius,
|
|
|
233 |
start: minAngle,
|
|
|
234 |
end: maxAngle,
|
|
|
235 |
fill: toColor
|
|
|
236 |
};
|
|
|
237 |
point.startR = radius; // For PieSeries.animate
|
|
|
238 |
|
|
|
239 |
if (graphic) {
|
|
|
240 |
d = shapeArgs.d;
|
|
|
241 |
graphic.animate(shapeArgs);
|
|
|
242 |
if (d) {
|
|
|
243 |
shapeArgs.d = d; // animate alters it
|
|
|
244 |
}
|
|
|
245 |
} else {
|
|
|
246 |
point.graphic = renderer.arc(shapeArgs)
|
|
|
247 |
.attr({
|
|
|
248 |
stroke: options.borderColor || 'none',
|
|
|
249 |
'stroke-width': options.borderWidth || 0,
|
|
|
250 |
fill: toColor,
|
|
|
251 |
'sweep-flag': 0
|
|
|
252 |
})
|
|
|
253 |
.add(series.group);
|
|
|
254 |
}
|
|
|
255 |
});
|
|
|
256 |
},
|
|
|
257 |
|
|
|
258 |
/**
|
|
|
259 |
* Extend the pie slice animation by animating from start angle and up
|
|
|
260 |
*/
|
|
|
261 |
animate: function (init) {
|
|
|
262 |
|
|
|
263 |
if (!init) {
|
|
|
264 |
this.startAngleRad = this.yAxis.startAngleRad;
|
|
|
265 |
H.seriesTypes.pie.prototype.animate.call(this, init);
|
|
|
266 |
}
|
|
|
267 |
}
|
|
|
268 |
});
|
|
|
269 |
|
|
|
270 |
}(Highcharts));
|