|
1 /* |
|
2 YUI 3.10.3 (build 2fb5187) |
|
3 Copyright 2013 Yahoo! Inc. All rights reserved. |
|
4 Licensed under the BSD License. |
|
5 http://yuilibrary.com/license/ |
|
6 */ |
|
7 |
|
8 YUI.add('series-pie', function (Y, NAME) { |
|
9 |
|
10 /** |
|
11 * Provides functionality for creating a pie series. |
|
12 * |
|
13 * @module charts |
|
14 * @submodule series-pie |
|
15 */ |
|
16 /** |
|
17 * PieSeries visualizes data as a circular chart divided into wedges which represent data as a |
|
18 * percentage of a whole. |
|
19 * |
|
20 * @class PieSeries |
|
21 * @constructor |
|
22 * @extends SeriesBase |
|
23 * @uses Plots |
|
24 * @param {Object} config (optional) Configuration parameters. |
|
25 * @submodule series-pie |
|
26 */ |
|
27 var CONFIG = Y.config, |
|
28 DOCUMENT = CONFIG.doc, |
|
29 _getClassName = Y.ClassNameManager.getClassName, |
|
30 SERIES_MARKER = _getClassName("seriesmarker"); |
|
31 Y.PieSeries = Y.Base.create("pieSeries", Y.SeriesBase, [Y.Plots], { |
|
32 /** |
|
33 * Image map used for interactivity when rendered with canvas. |
|
34 * |
|
35 * @property _map |
|
36 * @type HTMLElement |
|
37 * @private |
|
38 */ |
|
39 _map: null, |
|
40 |
|
41 /** |
|
42 * Image used for image map when rendered with canvas. |
|
43 * |
|
44 * @property _image |
|
45 * @type HTMLElement |
|
46 * @private |
|
47 */ |
|
48 _image: null, |
|
49 |
|
50 /** |
|
51 * Creates or updates the image map when rendered with canvas. |
|
52 * |
|
53 * @method _setMap |
|
54 * @private |
|
55 */ |
|
56 _setMap: function() |
|
57 { |
|
58 var id = "pieHotSpotMapi_" + Math.round(100000 * Math.random()), |
|
59 graph = this.get("graph"), |
|
60 graphic, |
|
61 cb, |
|
62 areaNode; |
|
63 if(graph) |
|
64 { |
|
65 cb = graph.get("contentBox"); |
|
66 } |
|
67 else |
|
68 { |
|
69 graphic = this.get("graphic"); |
|
70 cb = graphic.get("node"); |
|
71 } |
|
72 if(this._image) |
|
73 { |
|
74 cb.removeChild(this._image); |
|
75 while(this._areaNodes && this._areaNodes.length > 0) |
|
76 { |
|
77 areaNode = this._areaNodes.shift(); |
|
78 this._map.removeChild(areaNode); |
|
79 } |
|
80 cb.removeChild(this._map); |
|
81 } |
|
82 this._image = DOCUMENT.createElement("img"); |
|
83 this._image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAABCAYAAAD9yd/wAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSB" + |
|
84 "JbWFnZVJlYWR5ccllPAAAABJJREFUeNpiZGBgSGPAAgACDAAIkABoFyloZQAAAABJRU5ErkJggg=="; |
|
85 cb.appendChild(this._image); |
|
86 this._image.style.position = "absolute"; |
|
87 this._image.style.left = "0px"; |
|
88 this._image.style.top = "0px"; |
|
89 this._image.setAttribute("usemap", "#" + id); |
|
90 this._image.style.zIndex = 3; |
|
91 this._image.style.opacity = 0; |
|
92 this._image.setAttribute("alt", "imagemap"); |
|
93 this._map = DOCUMENT.createElement("map"); |
|
94 cb.appendChild(this._map); |
|
95 this._map.setAttribute("name", id); |
|
96 this._map.setAttribute("id", id); |
|
97 this._areaNodes = []; |
|
98 }, |
|
99 |
|
100 /** |
|
101 * Storage for `categoryDisplayName` attribute. |
|
102 * |
|
103 * @property _categoryDisplayName |
|
104 * @private |
|
105 */ |
|
106 _categoryDisplayName: null, |
|
107 |
|
108 /** |
|
109 * Storage for `valueDisplayName` attribute. |
|
110 * |
|
111 * @property _valueDisplayName |
|
112 * @private |
|
113 */ |
|
114 _valueDisplayName: null, |
|
115 |
|
116 /** |
|
117 * Adds event listeners. |
|
118 * |
|
119 * @method addListeners |
|
120 * @private |
|
121 */ |
|
122 addListeners: function() |
|
123 { |
|
124 var categoryAxis = this.get("categoryAxis"), |
|
125 valueAxis = this.get("valueAxis"); |
|
126 if(categoryAxis) |
|
127 { |
|
128 categoryAxis.after("dataReady", Y.bind(this._categoryDataChangeHandler, this)); |
|
129 categoryAxis.after("dataUpdate", Y.bind(this._categoryDataChangeHandler, this)); |
|
130 } |
|
131 if(valueAxis) |
|
132 { |
|
133 valueAxis.after("dataReady", Y.bind(this._valueDataChangeHandler, this)); |
|
134 valueAxis.after("dataUpdate", Y.bind(this._valueDataChangeHandler, this)); |
|
135 } |
|
136 this.after("categoryAxisChange", this.categoryAxisChangeHandler); |
|
137 this.after("valueAxisChange", this.valueAxisChangeHandler); |
|
138 this.after("stylesChange", this._updateHandler); |
|
139 this._visibleChangeHandle = this.after("visibleChange", this._handleVisibleChange); |
|
140 }, |
|
141 |
|
142 /** |
|
143 * Draws the series. |
|
144 * |
|
145 * @method validate |
|
146 * @private |
|
147 */ |
|
148 validate: function() |
|
149 { |
|
150 this.draw(); |
|
151 this._renderered = true; |
|
152 }, |
|
153 |
|
154 /** |
|
155 * Event handler for the categoryAxisChange event. |
|
156 * |
|
157 * @method _categoryAxisChangeHandler |
|
158 * @param {Object} e Event object. |
|
159 * @private |
|
160 */ |
|
161 _categoryAxisChangeHandler: function() |
|
162 { |
|
163 var categoryAxis = this.get("categoryAxis"); |
|
164 categoryAxis.after("dataReady", Y.bind(this._categoryDataChangeHandler, this)); |
|
165 categoryAxis.after("dataUpdate", Y.bind(this._categoryDataChangeHandler, this)); |
|
166 }, |
|
167 |
|
168 /** |
|
169 * Event handler for the valueAxisChange event. |
|
170 * |
|
171 * @method _valueAxisChangeHandler |
|
172 * @param {Object} e Event object. |
|
173 * @private |
|
174 */ |
|
175 _valueAxisChangeHandler: function() |
|
176 { |
|
177 var valueAxis = this.get("valueAxis"); |
|
178 valueAxis.after("dataReady", Y.bind(this._valueDataChangeHandler, this)); |
|
179 valueAxis.after("dataUpdate", Y.bind(this._valueDataChangeHandler, this)); |
|
180 }, |
|
181 |
|
182 /** |
|
183 * Constant used to generate unique id. |
|
184 * |
|
185 * @property GUID |
|
186 * @type String |
|
187 * @private |
|
188 */ |
|
189 GUID: "pieseries", |
|
190 |
|
191 /** |
|
192 * Event handler for categoryDataChange event. |
|
193 * |
|
194 * @method _categoryDataChangeHandler |
|
195 * @param {Object} event Event object. |
|
196 * @private |
|
197 */ |
|
198 _categoryDataChangeHandler: function() |
|
199 { |
|
200 if(this._rendered && this.get("categoryKey") && this.get("valueKey")) |
|
201 { |
|
202 this.draw(); |
|
203 } |
|
204 }, |
|
205 |
|
206 /** |
|
207 * Event handler for valueDataChange event. |
|
208 * |
|
209 * @method _valueDataChangeHandler |
|
210 * @param {Object} event Event object. |
|
211 * @private |
|
212 */ |
|
213 _valueDataChangeHandler: function() |
|
214 { |
|
215 if(this._rendered && this.get("categoryKey") && this.get("valueKey")) |
|
216 { |
|
217 this.draw(); |
|
218 } |
|
219 }, |
|
220 |
|
221 /** |
|
222 * Returns the sum of all values for the series. |
|
223 * |
|
224 * @method getTotalValues |
|
225 * @return Number |
|
226 */ |
|
227 getTotalValues: function() |
|
228 { |
|
229 var total = this.get("valueAxis").getTotalByKey(this.get("valueKey")); |
|
230 return total; |
|
231 }, |
|
232 |
|
233 /** |
|
234 * Draws the series. Overrides the base implementation. |
|
235 * |
|
236 * @method draw |
|
237 * @protected |
|
238 */ |
|
239 draw: function() |
|
240 { |
|
241 var w = this.get("width"), |
|
242 h = this.get("height"); |
|
243 if(isFinite(w) && isFinite(h) && w > 0 && h > 0) |
|
244 { |
|
245 this._rendered = true; |
|
246 if(this._drawing) |
|
247 { |
|
248 this._callLater = true; |
|
249 return; |
|
250 } |
|
251 this._drawing = true; |
|
252 this._callLater = false; |
|
253 this.drawSeries(); |
|
254 this._drawing = false; |
|
255 if(this._callLater) |
|
256 { |
|
257 this.draw(); |
|
258 } |
|
259 else |
|
260 { |
|
261 this.fire("drawingComplete"); |
|
262 } |
|
263 } |
|
264 }, |
|
265 |
|
266 /** |
|
267 * Draws the markers |
|
268 * |
|
269 * @method drawPlots |
|
270 * @protected |
|
271 */ |
|
272 drawPlots: function() |
|
273 { |
|
274 var values = this.get("valueAxis").getDataByKey(this.get("valueKey")).concat(), |
|
275 totalValue = 0, |
|
276 itemCount = values.length, |
|
277 styles = this.get("styles").marker, |
|
278 fillColors = styles.fill.colors, |
|
279 fillAlphas = styles.fill.alphas || ["1"], |
|
280 borderColors = styles.border.colors, |
|
281 borderWeights = [styles.border.weight], |
|
282 borderAlphas = [styles.border.alpha], |
|
283 tbw = borderWeights.concat(), |
|
284 tbc = borderColors.concat(), |
|
285 tba = borderAlphas.concat(), |
|
286 tfc, |
|
287 tfa, |
|
288 padding = styles.padding, |
|
289 graphic = this.get("graphic"), |
|
290 minDimension = Math.min(graphic.get("width"), graphic.get("height")), |
|
291 w = minDimension - (padding.left + padding.right), |
|
292 h = minDimension - (padding.top + padding.bottom), |
|
293 startAngle = -90, |
|
294 halfWidth = w / 2, |
|
295 halfHeight = h / 2, |
|
296 radius = Math.min(halfWidth, halfHeight), |
|
297 i = 0, |
|
298 value, |
|
299 angle = 0, |
|
300 lc, |
|
301 la, |
|
302 lw, |
|
303 wedgeStyle, |
|
304 marker, |
|
305 graphOrder = this.get("graphOrder") || 0, |
|
306 isCanvas = Y.Graphic.NAME === "canvasGraphic"; |
|
307 for(; i < itemCount; ++i) |
|
308 { |
|
309 value = parseFloat(values[i]); |
|
310 |
|
311 values.push(value); |
|
312 if(!isNaN(value)) |
|
313 { |
|
314 totalValue += value; |
|
315 } |
|
316 } |
|
317 |
|
318 tfc = fillColors ? fillColors.concat() : null; |
|
319 tfa = fillAlphas ? fillAlphas.concat() : null; |
|
320 this._createMarkerCache(); |
|
321 if(isCanvas) |
|
322 { |
|
323 this._setMap(); |
|
324 this._image.width = w; |
|
325 this._image.height = h; |
|
326 } |
|
327 for(i = 0; i < itemCount; i++) |
|
328 { |
|
329 value = values[i]; |
|
330 if(totalValue === 0) |
|
331 { |
|
332 angle = 360 / values.length; |
|
333 } |
|
334 else |
|
335 { |
|
336 angle = 360 * (value / totalValue); |
|
337 } |
|
338 if(tfc && tfc.length < 1) |
|
339 { |
|
340 tfc = fillColors.concat(); |
|
341 } |
|
342 if(tfa && tfa.length < 1) |
|
343 { |
|
344 tfa = fillAlphas.concat(); |
|
345 } |
|
346 if(tbw && tbw.length < 1) |
|
347 { |
|
348 tbw = borderWeights.concat(); |
|
349 } |
|
350 if(tbw && tbc.length < 1) |
|
351 { |
|
352 tbc = borderColors.concat(); |
|
353 } |
|
354 if(tba && tba.length < 1) |
|
355 { |
|
356 tba = borderAlphas.concat(); |
|
357 } |
|
358 lw = tbw ? tbw.shift() : null; |
|
359 lc = tbc ? tbc.shift() : null; |
|
360 la = tba ? tba.shift() : null; |
|
361 startAngle += angle; |
|
362 wedgeStyle = { |
|
363 border: { |
|
364 color:lc, |
|
365 weight:lw, |
|
366 alpha:la |
|
367 }, |
|
368 fill: { |
|
369 color:tfc ? tfc.shift() : this._getDefaultColor(i, "slice"), |
|
370 alpha:tfa ? tfa.shift() : null |
|
371 }, |
|
372 type: "pieslice", |
|
373 arc: angle, |
|
374 radius: radius, |
|
375 startAngle: startAngle, |
|
376 cx: halfWidth, |
|
377 cy: halfHeight, |
|
378 width: w, |
|
379 height: h |
|
380 }; |
|
381 marker = this.getMarker(wedgeStyle, graphOrder, i); |
|
382 if(isCanvas) |
|
383 { |
|
384 this._addHotspot(wedgeStyle, graphOrder, i); |
|
385 } |
|
386 } |
|
387 this._clearMarkerCache(); |
|
388 }, |
|
389 |
|
390 /** |
|
391 * @protected |
|
392 * |
|
393 * Method used by `styles` setter. Overrides base implementation. |
|
394 * |
|
395 * @method _setStyles |
|
396 * @param {Object} newStyles Hash of properties to update. |
|
397 * @return Object |
|
398 */ |
|
399 _setStyles: function(val) |
|
400 { |
|
401 if(!val.marker) |
|
402 { |
|
403 val = {marker:val}; |
|
404 } |
|
405 val = this._parseMarkerStyles(val); |
|
406 return Y.PieSeries.superclass._mergeStyles.apply(this, [val, this._getDefaultStyles()]); |
|
407 }, |
|
408 |
|
409 /** |
|
410 * Adds an interactive map when rendering in canvas. |
|
411 * |
|
412 * @method _addHotspot |
|
413 * @param {Object} cfg Object containing data used to draw the hotspot |
|
414 * @param {Number} seriesIndex Index of series in the `seriesCollection`. |
|
415 * @param {Number} index Index of the marker using the hotspot. |
|
416 * @private |
|
417 */ |
|
418 _addHotspot: function(cfg, seriesIndex, index) |
|
419 { |
|
420 var areaNode = DOCUMENT.createElement("area"), |
|
421 i = 1, |
|
422 x = cfg.cx, |
|
423 y = cfg.cy, |
|
424 arc = cfg.arc, |
|
425 startAngle = cfg.startAngle - arc, |
|
426 endAngle = cfg.startAngle, |
|
427 radius = cfg.radius, |
|
428 ax = x + Math.cos(startAngle / 180 * Math.PI) * radius, |
|
429 ay = y + Math.sin(startAngle / 180 * Math.PI) * radius, |
|
430 bx = x + Math.cos(endAngle / 180 * Math.PI) * radius, |
|
431 by = y + Math.sin(endAngle / 180 * Math.PI) * radius, |
|
432 numPoints = Math.floor(arc/10) - 1, |
|
433 divAngle = (arc/(Math.floor(arc/10)) / 180) * Math.PI, |
|
434 angleCoord = Math.atan((ay - y)/(ax - x)), |
|
435 pts = x + ", " + y + ", " + ax + ", " + ay, |
|
436 cosAng, |
|
437 sinAng, |
|
438 multDivAng; |
|
439 for(i = 1; i <= numPoints; ++i) |
|
440 { |
|
441 multDivAng = divAngle * i; |
|
442 cosAng = Math.cos(angleCoord + multDivAng); |
|
443 sinAng = Math.sin(angleCoord + multDivAng); |
|
444 if(startAngle <= 90) |
|
445 { |
|
446 pts += ", " + (x + (radius * Math.cos(angleCoord + (divAngle * i)))); |
|
447 pts += ", " + (y + (radius * Math.sin(angleCoord + (divAngle * i)))); |
|
448 } |
|
449 else |
|
450 { |
|
451 pts += ", " + (x - (radius * Math.cos(angleCoord + (divAngle * i)))); |
|
452 pts += ", " + (y - (radius * Math.sin(angleCoord + (divAngle * i)))); |
|
453 } |
|
454 } |
|
455 pts += ", " + bx + ", " + by; |
|
456 pts += ", " + x + ", " + y; |
|
457 this._map.appendChild(areaNode); |
|
458 areaNode.setAttribute("class", SERIES_MARKER); |
|
459 areaNode.setAttribute("id", "hotSpot_" + seriesIndex + "_" + index); |
|
460 areaNode.setAttribute("shape", "polygon"); |
|
461 areaNode.setAttribute("coords", pts); |
|
462 this._areaNodes.push(areaNode); |
|
463 |
|
464 }, |
|
465 |
|
466 /** |
|
467 * Resizes and positions markers based on a mouse interaction. |
|
468 * |
|
469 * @method updateMarkerState |
|
470 * @param {String} type state of the marker |
|
471 * @param {Number} i index of the marker |
|
472 * @protected |
|
473 */ |
|
474 updateMarkerState: function(type, i) |
|
475 { |
|
476 if(this._markers[i]) |
|
477 { |
|
478 var state = this._getState(type), |
|
479 markerStyles, |
|
480 indexStyles, |
|
481 marker = this._markers[i], |
|
482 styles = this.get("styles").marker; |
|
483 markerStyles = state === "off" || !styles[state] ? styles : styles[state]; |
|
484 indexStyles = this._mergeStyles(markerStyles, {}); |
|
485 indexStyles.fill.color = indexStyles.fill.colors[i % indexStyles.fill.colors.length]; |
|
486 indexStyles.fill.alpha = indexStyles.fill.alphas[i % indexStyles.fill.alphas.length]; |
|
487 marker.set(indexStyles); |
|
488 } |
|
489 }, |
|
490 |
|
491 /** |
|
492 * Creates a shape to be used as a marker. |
|
493 * |
|
494 * @method _createMarker |
|
495 * @param {Object} styles Hash of style properties. |
|
496 * @return Shape |
|
497 * @private |
|
498 */ |
|
499 _createMarker: function(styles) |
|
500 { |
|
501 var graphic = this.get("graphic"), |
|
502 marker, |
|
503 cfg = Y.clone(styles); |
|
504 marker = graphic.addShape(cfg); |
|
505 marker.addClass(SERIES_MARKER); |
|
506 return marker; |
|
507 }, |
|
508 |
|
509 /** |
|
510 * Creates a cache of markers for reuse. |
|
511 * |
|
512 * @method _createMarkerCache |
|
513 * @private |
|
514 */ |
|
515 _clearMarkerCache: function() |
|
516 { |
|
517 var len = this._markerCache.length, |
|
518 i = 0, |
|
519 marker; |
|
520 for(; i < len; ++i) |
|
521 { |
|
522 marker = this._markerCache[i]; |
|
523 if(marker) |
|
524 { |
|
525 marker.destroy(); |
|
526 } |
|
527 } |
|
528 this._markerCache = []; |
|
529 }, |
|
530 |
|
531 /** |
|
532 * Gets the default style values for the markers. |
|
533 * |
|
534 * @method _getPlotDefaults |
|
535 * @return Object |
|
536 * @private |
|
537 */ |
|
538 _getPlotDefaults: function() |
|
539 { |
|
540 var defs = { |
|
541 padding:{ |
|
542 top: 0, |
|
543 left: 0, |
|
544 right: 0, |
|
545 bottom: 0 |
|
546 }, |
|
547 fill:{ |
|
548 alphas:["1"] |
|
549 }, |
|
550 border: { |
|
551 weight: 0, |
|
552 alpha: 1 |
|
553 } |
|
554 }; |
|
555 defs.fill.colors = this._defaultSliceColors; |
|
556 defs.border.colors = this._defaultBorderColors; |
|
557 return defs; |
|
558 } |
|
559 }, { |
|
560 ATTRS: { |
|
561 /** |
|
562 * Read-only attribute indicating the type of series. |
|
563 * |
|
564 * @attribute type |
|
565 * @type String |
|
566 * @default pie |
|
567 */ |
|
568 type: { |
|
569 value: "pie" |
|
570 }, |
|
571 |
|
572 /** |
|
573 * Order of this instance of this `type`. |
|
574 * |
|
575 * @attribute order |
|
576 * @type Number |
|
577 */ |
|
578 order: {}, |
|
579 |
|
580 /** |
|
581 * Reference to the `Graph` in which the series is drawn into. |
|
582 * |
|
583 * @attribute graph |
|
584 * @type Graph |
|
585 */ |
|
586 graph: {}, |
|
587 |
|
588 /** |
|
589 * Reference to the `Axis` instance used for assigning |
|
590 * category values to the graph. |
|
591 * |
|
592 * @attribute categoryAxis |
|
593 * @type Axis |
|
594 */ |
|
595 categoryAxis: { |
|
596 value: null, |
|
597 |
|
598 validator: function(value) |
|
599 { |
|
600 return value !== this.get("categoryAxis"); |
|
601 } |
|
602 }, |
|
603 |
|
604 /** |
|
605 * Reference to the `Axis` instance used for assigning |
|
606 * series values to the graph. |
|
607 * |
|
608 * @attribute categoryAxis |
|
609 * @type Axis |
|
610 */ |
|
611 valueAxis: { |
|
612 value: null, |
|
613 |
|
614 validator: function(value) |
|
615 { |
|
616 return value !== this.get("valueAxis"); |
|
617 } |
|
618 }, |
|
619 |
|
620 /** |
|
621 * Indicates which array to from the hash of value arrays in |
|
622 * the category `Axis` instance. |
|
623 * |
|
624 * @attribute categoryKey |
|
625 * @type String |
|
626 */ |
|
627 categoryKey: { |
|
628 value: null, |
|
629 |
|
630 validator: function(value) |
|
631 { |
|
632 return value !== this.get("categoryKey"); |
|
633 } |
|
634 }, |
|
635 /** |
|
636 * Indicates which array to from the hash of value arrays in |
|
637 * the value `Axis` instance. |
|
638 * |
|
639 * @attribute valueKey |
|
640 * @type String |
|
641 */ |
|
642 valueKey: { |
|
643 value: null, |
|
644 |
|
645 validator: function(value) |
|
646 { |
|
647 return value !== this.get("valueKey"); |
|
648 } |
|
649 }, |
|
650 |
|
651 /** |
|
652 * Name used for for displaying category data |
|
653 * |
|
654 * @attribute categoryDisplayName |
|
655 * @type String |
|
656 */ |
|
657 categoryDisplayName: { |
|
658 setter: function(val) |
|
659 { |
|
660 this._categoryDisplayName = val; |
|
661 return val; |
|
662 }, |
|
663 |
|
664 getter: function() |
|
665 { |
|
666 return this._categoryDisplayName || this.get("categoryKey"); |
|
667 } |
|
668 }, |
|
669 |
|
670 /** |
|
671 * Name used for for displaying value data |
|
672 * |
|
673 * @attribute valueDisplayName |
|
674 * @type String |
|
675 */ |
|
676 valueDisplayName: { |
|
677 setter: function(val) |
|
678 { |
|
679 this._valueDisplayName = val; |
|
680 return val; |
|
681 }, |
|
682 |
|
683 getter: function() |
|
684 { |
|
685 return this._valueDisplayName || this.get("valueKey"); |
|
686 } |
|
687 }, |
|
688 |
|
689 /** |
|
690 * @attribute slices |
|
691 * @type Array |
|
692 * @private |
|
693 */ |
|
694 slices: null |
|
695 |
|
696 /** |
|
697 * Style properties used for drawing markers. This attribute is inherited from `MarkerSeries`. Below are the default |
|
698 * values: |
|
699 * <dl> |
|
700 * <dt>fill</dt><dd>A hash containing the following values: |
|
701 * <dl> |
|
702 * <dt>colors</dt><dd>An array of colors to be used for the marker fills. The color for each marker is |
|
703 * retrieved from the array below:<br/> |
|
704 * `["#66007f", "#a86f41", "#295454", "#996ab2", "#e8cdb7", "#90bdbd","#000000","#c3b8ca", "#968373", "#678585"]` |
|
705 * </dd> |
|
706 * <dt>alphas</dt><dd>An array of alpha references (Number from 0 to 1) indicating the opacity of each marker |
|
707 * fill. The default value is [1].</dd> |
|
708 * </dl> |
|
709 * </dd> |
|
710 * <dt>border</dt><dd>A hash containing the following values: |
|
711 * <dl> |
|
712 * <dt>color</dt><dd>An array of colors to be used for the marker borders. The color for each marker is |
|
713 * retrieved from the array below:<br/> |
|
714 * `["#205096", "#b38206", "#000000", "#94001e", "#9d6fa0", "#e55b00", "#5e85c9", "#adab9e", "#6ac291", "#006457"]` |
|
715 * <dt>alpha</dt><dd>Number from 0 to 1 indicating the opacity of the marker border. The default value is 1.</dd> |
|
716 * <dt>weight</dt><dd>Number indicating the width of the border. The default value is 1.</dd> |
|
717 * </dl> |
|
718 * </dd> |
|
719 * <dt>over</dt><dd>hash containing styles for markers when highlighted by a `mouseover` event. The default |
|
720 * values for each style is null. When an over style is not set, the non-over value will be used. For example, |
|
721 * the default value for `marker.over.fill.color` is equivalent to `marker.fill.color`.</dd> |
|
722 * </dl> |
|
723 * |
|
724 * @attribute styles |
|
725 * @type Object |
|
726 */ |
|
727 } |
|
728 }); |
|
729 |
|
730 |
|
731 }, '3.10.3', {"requires": ["series-base", "series-plot-util"]}); |