|
16 | 16 |
|
17 | 17 | <dom-module id="svg-piechart">
|
18 | 18 | <style>
|
19 |
| - :host { |
20 |
| - display:block; |
21 |
| - } |
22 |
| - .slice { |
23 |
| - } |
| 19 | + :host { |
| 20 | + display:block; |
| 21 | + } |
| 22 | + |
| 23 | + .slice:hover + text { |
| 24 | + } |
24 | 25 | </style>
|
25 | 26 |
|
26 | 27 | <template>
|
27 |
| - <svg id="svg" width$="[[size]]" height$="[[size]]" viewBox="0 0 360 360"> |
28 |
| - <!-- |
29 |
| - <template is="dom-repeat" {{_arcs}}> |
30 |
| - <path class="slice" d="M180,180 L{{item.x1}},{{item.y1}} A180,180 0 {{item.largeArcFlag}},1 {{item.x2}},{{item.y2}} z"style="fill: {{item.color}}"/> |
31 |
| - </template>--> |
| 28 | + <svg id="svg" width$="[[size]]" height$="[[size]]" viewBox="0 0 360 360"> |
| 29 | + <!-- <template is="dom-repeat" items={{_arcs}}> |
| 30 | + <path class="slice" d="M180,180 L{{item.x1}},{{item.y1}} A180,180 0 {{item.largeArcFlag}},1 {{item.x2}},{{item.y2}} z"style="fill: {{item.color}}" /> |
| 31 | + </template> --> |
32 | 32 | </svg>
|
33 | 33 | </template>
|
34 | 34 |
|
35 | 35 | </dom-module>
|
36 | 36 |
|
37 | 37 | <script>
|
38 |
| - (function() { |
39 |
| - |
40 |
| - var DEFAULT_COLORS20 = ["#1f77b4", "#aec7e8", "#ff7f0e", "#ffbb78", "#2ca02c", "#98df8a", "#d62728", "#ff9896", "#9467bd", "#c5b0d5", "#8c564b", "#c49c94", "#e377c2", "#f7b6d2", "#7f7f7f", "#c7c7c7", "#bcbd22", "#dbdb8d", "#17becf", "#9edae5"]; |
41 |
| - var DEFAULT_COLORS10 = ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"]; |
42 |
| - |
43 |
| - |
44 |
| - Polymer({ |
45 |
| - |
46 |
| - is: 'svg-piechart', |
47 |
| - |
48 |
| - properties: { |
49 |
| - /** |
50 |
| - * The `colors` attribute specifies the colors to be used for each slice. |
51 |
| - * If no colors are specified then the default-colors are used. |
52 |
| - * |
53 |
| - * @attribute colors |
54 |
| - */ |
55 |
| - colors: { |
56 |
| - type:Array, |
57 |
| - value:function() {return []} |
58 |
| - }, |
59 |
| - |
60 |
| - /** |
61 |
| - * The `size` property specifies the size of the piechart (Default: 50). |
62 |
| - * |
63 |
| - * @attribute size |
64 |
| - */ |
65 |
| - size: { |
66 |
| - type:Number, |
67 |
| - value:50 |
68 |
| - }, |
69 |
| - |
70 |
| - /** |
71 |
| - * The `data` property specifies the values for each slice . |
72 |
| - * |
73 |
| - * @attribute data |
74 |
| - */ |
75 |
| - data : { |
76 |
| - type:Array, |
77 |
| - value: function() { return []; } |
78 |
| - } |
79 |
| - }, |
80 |
| - |
81 |
| - observers: [ |
82 |
| - '_render(colors,data)' |
83 |
| - ], |
84 |
| - _calculateTotal: function(data) { |
85 |
| - var total = 0; |
86 |
| - for (var i =0;i<data.length;i++) { |
87 |
| - total += data[i]; |
88 |
| - } |
89 |
| - return total; |
90 |
| - |
91 |
| - }, |
92 |
| - _computePath: function(arc) { |
93 |
| - return "M180,180 L"+arc.x1+","+arc.y1+" A180,180 0 "+arc.largeArcFlag+",1 "+arc.x2+","+arc.y2+" z"; |
94 |
| - }, |
95 |
| - _getColors : function(colors) { |
96 |
| - if (!colors || colors.length == 0) { |
97 |
| - colors = this.data.length > 10 ? DEFAULT_COLORS20 : DEFAULT_COLORS10; |
98 |
| - } |
99 |
| - return colors; |
100 |
| - }, |
101 |
| - _calculateArcs : function(colors,data) { |
102 |
| - var total = this._calculateTotal(data); |
103 |
| - var colors = this._getColors(colors); |
104 |
| - var startAngle = 0; |
105 |
| - var endAngle = -90; |
106 |
| - var arcs = []; |
107 |
| - for(var i=0; i < data.length; i++){ |
108 |
| - var angle = (360 * data[i]/total); |
109 |
| - var largeArcFlag=0; |
110 |
| - if (angle>180) {largeArcFlag = 1;} |
111 |
| - |
112 |
| - startAngle = endAngle; |
113 |
| - endAngle = startAngle + angle; |
114 |
| - |
115 |
| - x1 = ((180 + 180*Math.cos(Math.PI*startAngle/180))); |
116 |
| - y1 = ((180 + 180*Math.sin(Math.PI*startAngle/180))); |
117 |
| - x2 = ((180 + 180*Math.cos(Math.PI*endAngle/180))); |
118 |
| - y2 = ((180 + 180*Math.sin(Math.PI*endAngle/180))); |
119 |
| - color = colors[i]; |
120 |
| - arcs.push({x1:x1,y1:y1,x2:x2,y2:y2,largeArcFlag:largeArcFlag,color:color}); |
121 |
| - |
122 |
| - } |
123 |
| - return arcs; |
124 |
| - }, |
125 |
| - _render : function(colors,data) { |
126 |
| - var arcs = this._calculateArcs(colors,data); |
127 |
| - var svg = Polymer.dom(this.$.svg); |
128 |
| - while (svg.firstChild) { |
129 |
| - svg.removeChild(svg.firstChild); |
130 |
| - } |
131 |
| - for (i =0;i<arcs.length;i++) { |
132 |
| - var path = document.createElementNS('http://www.w3.org/2000/svg',"path"); |
133 |
| - path.classList.add("slice"); |
134 |
| - path.style.fill= arcs[i].color; |
135 |
| - path.setAttributeNS(null,"d",this._computePath(arcs[i])); |
136 |
| - svg.appendChild(path); |
137 |
| - } |
138 |
| - } |
139 |
| - }) |
140 |
| - })(); |
| 38 | +(function() { |
| 39 | + |
| 40 | + var DEFAULT_COLORS16 = [ |
| 41 | + '#f44336', |
| 42 | + '#e91e63', |
| 43 | + '#9c27b0', |
| 44 | + '#673ab7', |
| 45 | + '#3f51b5', |
| 46 | + '#1e88e5', |
| 47 | + '#03a9f4', |
| 48 | + '#00bcd4', |
| 49 | + '#009688', |
| 50 | + '#4caf50', |
| 51 | + '#8bc34a', |
| 52 | + '#cddc39', |
| 53 | + '#ffeb3b', |
| 54 | + '#ffc107', |
| 55 | + '#ff9800', |
| 56 | + '#ff5722' |
| 57 | + ]; |
| 58 | + var DEFAULT_COLORS8 = [ |
| 59 | + '#f44336', |
| 60 | + '#9c27b0', |
| 61 | + '#3f51b5', |
| 62 | + '#03a9f4', |
| 63 | + '#009688', |
| 64 | + '#8bc34a', |
| 65 | + '#ffeb3b', |
| 66 | + '#ff9800' |
| 67 | + ]; |
| 68 | + var DEFAULT_COLORS4 = [ |
| 69 | + '#f44336', |
| 70 | + '#3f51b5', |
| 71 | + '#8bc34a', |
| 72 | + '#ffeb3b', |
| 73 | + ]; |
| 74 | + |
| 75 | + |
| 76 | + Polymer({ |
| 77 | + |
| 78 | + is: 'svg-piechart', |
| 79 | + |
| 80 | + properties: { |
| 81 | + /** |
| 82 | + * The `colors` attribute specifies the colors to be used for each slice. |
| 83 | + * If no colors are specified then the default-colors are used. |
| 84 | + * |
| 85 | + * @attribute colors |
| 86 | + */ |
| 87 | + colors: { |
| 88 | + type: Array, |
| 89 | + value: function() { |
| 90 | + return []; |
| 91 | + } |
| 92 | + }, |
| 93 | + |
| 94 | + /** |
| 95 | + * The `size` property specifies the size of the piechart (Default: 50). |
| 96 | + * |
| 97 | + * @attribute size |
| 98 | + */ |
| 99 | + size: { |
| 100 | + type: Number, |
| 101 | + value: 50 |
| 102 | + }, |
| 103 | + |
| 104 | + /** |
| 105 | + * The `data` property specifies the values for each slice . |
| 106 | + * |
| 107 | + * @attribute data |
| 108 | + */ |
| 109 | + data : { |
| 110 | + type: Array, |
| 111 | + value: function() { |
| 112 | + return []; |
| 113 | + } |
| 114 | + } |
| 115 | + }, |
| 116 | + |
| 117 | + observers: [ |
| 118 | + '_render(colors, data)' |
| 119 | + ], |
| 120 | + |
| 121 | + _calculateTotal: function(data) { |
| 122 | + var total = 0; |
| 123 | + for (var i = 0; i < data.length; i++) { |
| 124 | + total += data[i]; |
| 125 | + } |
| 126 | + return total; |
| 127 | + }, |
| 128 | + |
| 129 | + _computePath: function(arc) { |
| 130 | + return "M180,180 L" + arc.x1 + "," + arc.y1 + " A180,180 0 " + arc.largeArcFlag + ",1 " + arc.x2 + "," + arc.y2 + " z"; |
| 131 | + }, |
| 132 | + |
| 133 | + _getColors: function(colors) { |
| 134 | + if (!colors || colors.length == 0) { |
| 135 | + // colors = this.data.length > 10 ? DEFAULT_COLORS20 : DEFAULT_COLORS10; |
| 136 | + if (this.data.length > 8) { |
| 137 | + colors = DEFAULT_COLORS16; |
| 138 | + } |
| 139 | + else if (this.data.length > 4) { |
| 140 | + colors = DEFAULT_COLORS8; |
| 141 | + } |
| 142 | + else { |
| 143 | + colors = DEFAULT_COLORS4; |
| 144 | + } |
| 145 | + } |
| 146 | + return colors; |
| 147 | + }, |
| 148 | + |
| 149 | + _calculateArcs: function(colors, data) { |
| 150 | + var total = this._calculateTotal(data); |
| 151 | + var colors = this._getColors(colors); |
| 152 | + var startAngle = 0; |
| 153 | + var endAngle = -90; |
| 154 | + var arcs = []; |
| 155 | + |
| 156 | + for (var i = 0; i < data.length; i++) { |
| 157 | + var angle = (360*data[i]/total); |
| 158 | + var largeArcFlag = 0; |
| 159 | + if (angle > 180) { |
| 160 | + largeArcFlag = 1; |
| 161 | + } |
| 162 | + |
| 163 | + startAngle = endAngle; |
| 164 | + endAngle = startAngle + angle; |
| 165 | + |
| 166 | + arcs.push({ |
| 167 | + x1: 180 + 180*Math.cos(Math.PI*startAngle/180), |
| 168 | + y1: 180 + 180*Math.sin(Math.PI*startAngle/180), |
| 169 | + x2: 180 + 180*Math.cos(Math.PI*endAngle/180), |
| 170 | + y2: 180 + 180*Math.sin(Math.PI*endAngle/180), |
| 171 | + largeArcFlag: largeArcFlag, |
| 172 | + color: colors[i]}); |
| 173 | + } |
| 174 | + |
| 175 | + return arcs; |
| 176 | + }, |
| 177 | + |
| 178 | + _render: function(colors, data) { |
| 179 | + var arcs = this._calculateArcs(colors, data); |
| 180 | + var svg = Polymer.dom(this.$.svg); |
| 181 | + |
| 182 | + while (svg.firstChild) { |
| 183 | + svg.removeChild(svg.firstChild); |
| 184 | + } |
| 185 | + |
| 186 | + for (i = 0; i < arcs.length; i++) { |
| 187 | + var path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); |
| 188 | + path.classList.add('slice'); |
| 189 | + path.style.fill = arcs[i].color; |
| 190 | + path.setAttribute('d', this._computePath(arcs[i])); |
| 191 | + svg.appendChild(path); |
| 192 | + } |
| 193 | + } |
| 194 | + }); |
| 195 | +})(); |
141 | 196 | </script>
|
0 commit comments