1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 | (function(factory) {
|
9 | if (typeof module === 'object' && module.exports) {
|
10 | module.exports = factory;
|
11 | } else {
|
12 | factory(Highcharts);
|
13 | }
|
14 | }(function(Highcharts) {
|
15 | (function(H) {
|
16 | |
17 |
|
18 |
|
19 |
|
20 |
|
21 | 'use strict';
|
22 |
|
23 | var defined = H.defined,
|
24 | isNumber = H.isNumber,
|
25 | inArray = H.inArray,
|
26 | isArray = H.isArray,
|
27 | merge = H.merge,
|
28 | Chart = H.Chart,
|
29 | extend = H.extend,
|
30 | each = H.each;
|
31 |
|
32 | var ALIGN_FACTOR,
|
33 | ALLOWED_SHAPES;
|
34 |
|
35 | ALLOWED_SHAPES = ['path', 'rect', 'circle'];
|
36 |
|
37 | ALIGN_FACTOR = {
|
38 | top: 0,
|
39 | left: 0,
|
40 | center: 0.5,
|
41 | middle: 0.5,
|
42 | bottom: 1,
|
43 | right: 1
|
44 | };
|
45 |
|
46 | function defaultOptions(shapeType) {
|
47 | var shapeOptions,
|
48 | options;
|
49 |
|
50 | options = {
|
51 | xAxis: 0,
|
52 | yAxis: 0,
|
53 | title: {
|
54 | style: {},
|
55 | text: '',
|
56 | x: 0,
|
57 | y: 0
|
58 | },
|
59 | shape: {
|
60 | params: {
|
61 | stroke: '#000000',
|
62 | fill: 'transparent',
|
63 | strokeWidth: 2
|
64 | }
|
65 | }
|
66 | };
|
67 |
|
68 | shapeOptions = {
|
69 | circle: {
|
70 | params: {
|
71 | x: 0,
|
72 | y: 0
|
73 | }
|
74 | }
|
75 | };
|
76 |
|
77 | if (shapeOptions[shapeType]) {
|
78 | options.shape = merge(options.shape, shapeOptions[shapeType]);
|
79 | }
|
80 |
|
81 | return options;
|
82 | }
|
83 |
|
84 | function translatePath(d, xAxis, yAxis, xOffset, yOffset) {
|
85 | var len = d.length,
|
86 | i = 0;
|
87 |
|
88 | while (i < len) {
|
89 | if (isNumber(d[i]) && isNumber(d[i + 1])) {
|
90 | d[i] = xAxis.toPixels(d[i]) - xOffset;
|
91 | d[i + 1] = yAxis.toPixels(d[i + 1]) - yOffset;
|
92 | i += 2;
|
93 | } else {
|
94 | i += 1;
|
95 | }
|
96 | }
|
97 |
|
98 | return d;
|
99 | }
|
100 |
|
101 |
|
102 |
|
103 | var Annotation = function() {
|
104 | this.init.apply(this, arguments);
|
105 | };
|
106 | Annotation.prototype = {
|
107 | |
108 |
|
109 |
|
110 | init: function(chart, options) {
|
111 | var shapeType = options.shape && options.shape.type;
|
112 |
|
113 | this.chart = chart;
|
114 | this.options = merge({}, defaultOptions(shapeType), options);
|
115 | },
|
116 |
|
117 | |
118 |
|
119 |
|
120 | render: function(redraw) {
|
121 | var annotation = this,
|
122 | chart = this.chart,
|
123 | renderer = annotation.chart.renderer,
|
124 | group = annotation.group,
|
125 | title = annotation.title,
|
126 | shape = annotation.shape,
|
127 | options = annotation.options,
|
128 | titleOptions = options.title,
|
129 | shapeOptions = options.shape;
|
130 |
|
131 | if (!group) {
|
132 | group = annotation.group = renderer.g();
|
133 | }
|
134 |
|
135 |
|
136 | if (!shape && shapeOptions && inArray(shapeOptions.type, ALLOWED_SHAPES) !== -1) {
|
137 | shape = annotation.shape = renderer[options.shape.type](shapeOptions.params);
|
138 | shape.add(group);
|
139 | }
|
140 |
|
141 | if (!title && titleOptions) {
|
142 | title = annotation.title = renderer.label(titleOptions);
|
143 | title.add(group);
|
144 | }
|
145 |
|
146 | group.add(chart.annotations.group);
|
147 |
|
148 |
|
149 | annotation.linkObjects();
|
150 |
|
151 | if (redraw !== false) {
|
152 | annotation.redraw();
|
153 | }
|
154 | },
|
155 |
|
156 | |
157 |
|
158 |
|
159 | redraw: function() {
|
160 | var options = this.options,
|
161 | chart = this.chart,
|
162 | group = this.group,
|
163 | title = this.title,
|
164 | shape = this.shape,
|
165 | linkedTo = this.linkedObject,
|
166 | xAxis = chart.xAxis[options.xAxis],
|
167 | yAxis = chart.yAxis[options.yAxis],
|
168 | width = options.width,
|
169 | height = options.height,
|
170 | anchorY = ALIGN_FACTOR[options.anchorY],
|
171 | anchorX = ALIGN_FACTOR[options.anchorX],
|
172 | shapeParams,
|
173 | linkType,
|
174 | series,
|
175 | param,
|
176 | bbox,
|
177 | x,
|
178 | y;
|
179 |
|
180 | if (linkedTo) {
|
181 | linkType = (linkedTo instanceof H.Point) ? 'point' :
|
182 | (linkedTo instanceof H.Series) ? 'series' : null;
|
183 |
|
184 | if (linkType === 'point') {
|
185 | options.xValue = linkedTo.x;
|
186 | options.yValue = linkedTo.y;
|
187 | series = linkedTo.series;
|
188 | } else if (linkType === 'series') {
|
189 | series = linkedTo;
|
190 | }
|
191 |
|
192 | if (group.visibility !== series.group.visibility) {
|
193 | group.attr({
|
194 | visibility: series.group.visibility
|
195 | });
|
196 | }
|
197 | }
|
198 |
|
199 |
|
200 |
|
201 | x = (defined(options.xValue) ? xAxis.toPixels(options.xValue + xAxis.minPointOffset) - xAxis.minPixelPadding : options.x);
|
202 | y = defined(options.yValue) ? yAxis.toPixels(options.yValue) : options.y;
|
203 |
|
204 | if (!isNumber(x) || !isNumber(y)) {
|
205 | return;
|
206 | }
|
207 |
|
208 |
|
209 | if (title) {
|
210 | title.attr(options.title);
|
211 | title.css(options.title.style);
|
212 | }
|
213 |
|
214 | if (shape) {
|
215 | shapeParams = extend({}, options.shape.params);
|
216 |
|
217 | if (options.units === 'values') {
|
218 | for (param in shapeParams) {
|
219 | if (inArray(param, ['width', 'x']) > -1) {
|
220 | shapeParams[param] = xAxis.translate(shapeParams[param]);
|
221 | } else if (inArray(param, ['height', 'y']) > -1) {
|
222 | shapeParams[param] = yAxis.translate(shapeParams[param]);
|
223 | }
|
224 | }
|
225 |
|
226 | if (shapeParams.width) {
|
227 | shapeParams.width -= xAxis.toPixels(0) - xAxis.left;
|
228 | }
|
229 |
|
230 | if (shapeParams.x) {
|
231 | shapeParams.x += xAxis.minPixelPadding;
|
232 | }
|
233 |
|
234 | if (options.shape.type === 'path') {
|
235 | translatePath(shapeParams.d, xAxis, yAxis, x, y);
|
236 | }
|
237 | }
|
238 |
|
239 |
|
240 | if (options.shape.type === 'circle') {
|
241 | shapeParams.x += shapeParams.r;
|
242 | shapeParams.y += shapeParams.r;
|
243 | }
|
244 |
|
245 | shape.attr(shapeParams);
|
246 | }
|
247 |
|
248 | group.bBox = null;
|
249 |
|
250 |
|
251 | if (!isNumber(width)) {
|
252 | bbox = group.getBBox();
|
253 | width = bbox.width;
|
254 | }
|
255 |
|
256 | if (!isNumber(height)) {
|
257 |
|
258 | if (!bbox) {
|
259 | bbox = group.getBBox();
|
260 | }
|
261 |
|
262 | height = bbox.height;
|
263 | }
|
264 |
|
265 |
|
266 | if (!isNumber(anchorX)) {
|
267 | anchorX = ALIGN_FACTOR.center;
|
268 | }
|
269 |
|
270 | if (!isNumber(anchorY)) {
|
271 | anchorY = ALIGN_FACTOR.center;
|
272 | }
|
273 |
|
274 |
|
275 | x = x - width * anchorX;
|
276 | y = y - height * anchorY;
|
277 |
|
278 | if (defined(group.translateX) && defined(group.translateY)) {
|
279 | group.animate({
|
280 | translateX: x,
|
281 | translateY: y
|
282 | });
|
283 | } else {
|
284 | group.translate(x, y);
|
285 | }
|
286 | },
|
287 |
|
288 | |
289 |
|
290 |
|
291 | destroy: function() {
|
292 | var annotation = this,
|
293 | chart = this.chart,
|
294 | allItems = chart.annotations.allItems,
|
295 | index = allItems.indexOf(annotation);
|
296 |
|
297 | if (index > -1) {
|
298 | allItems.splice(index, 1);
|
299 | }
|
300 |
|
301 | each(['title', 'shape', 'group'], function(element) {
|
302 | if (annotation[element]) {
|
303 | annotation[element].destroy();
|
304 | annotation[element] = null;
|
305 | }
|
306 | });
|
307 |
|
308 | annotation.group = annotation.title = annotation.shape = annotation.chart = annotation.options = null;
|
309 | },
|
310 |
|
311 | |
312 |
|
313 |
|
314 | update: function(options, redraw) {
|
315 | extend(this.options, options);
|
316 |
|
317 |
|
318 | this.linkObjects();
|
319 |
|
320 | this.render(redraw);
|
321 | },
|
322 |
|
323 | linkObjects: function() {
|
324 | var annotation = this,
|
325 | chart = annotation.chart,
|
326 | linkedTo = annotation.linkedObject,
|
327 | linkedId = linkedTo && (linkedTo.id || linkedTo.options.id),
|
328 | options = annotation.options,
|
329 | id = options.linkedTo;
|
330 |
|
331 | if (!defined(id)) {
|
332 | annotation.linkedObject = null;
|
333 | } else if (!defined(linkedTo) || id !== linkedId) {
|
334 | annotation.linkedObject = chart.get(id);
|
335 | }
|
336 | }
|
337 | };
|
338 |
|
339 |
|
340 |
|
341 | extend(Chart.prototype, {
|
342 | annotations: {
|
343 | |
344 |
|
345 |
|
346 | add: function(options, redraw) {
|
347 | var annotations = this.allItems,
|
348 | chart = this.chart,
|
349 | item,
|
350 | len;
|
351 |
|
352 | if (!isArray(options)) {
|
353 | options = [options];
|
354 | }
|
355 |
|
356 | len = options.length;
|
357 |
|
358 | while (len--) {
|
359 | item = new Annotation(chart, options[len]);
|
360 | annotations.push(item);
|
361 | item.render(redraw);
|
362 | }
|
363 | },
|
364 |
|
365 | |
366 |
|
367 |
|
368 | redraw: function() {
|
369 | each(this.allItems, function(annotation) {
|
370 | annotation.redraw();
|
371 | });
|
372 | }
|
373 | }
|
374 | });
|
375 |
|
376 |
|
377 |
|
378 | Chart.prototype.callbacks.push(function(chart) {
|
379 | var options = chart.options.annotations,
|
380 | group;
|
381 |
|
382 | group = chart.renderer.g('annotations');
|
383 | group.attr({
|
384 | zIndex: 7
|
385 | });
|
386 | group.add();
|
387 |
|
388 |
|
389 | chart.annotations.allItems = [];
|
390 |
|
391 |
|
392 | chart.annotations.chart = chart;
|
393 |
|
394 |
|
395 | chart.annotations.group = group;
|
396 |
|
397 | if (isArray(options) && options.length > 0) {
|
398 | chart.annotations.add(chart.options.annotations);
|
399 | }
|
400 |
|
401 |
|
402 | H.addEvent(chart, 'redraw', function() {
|
403 | chart.annotations.redraw();
|
404 | });
|
405 | });
|
406 |
|
407 | }(Highcharts));
|
408 | }));
|