| 提交 | 用户 | age | ||
| a6a76f | 1 | (function(){ |
| F | 2 | var char; |
| 3 | var id="grap"; | |
| 4 | parameter={showId:"",type:"",vs:[],die:true};//{drawId:"JDZhongCount",drawM:"进店总人数"},{drawId:"YiXiangCount",drawM:"意向客户数"} | |
| 5 | getIntValue=function(v){ | |
| 6 | if(v==null||v==""){ | |
| 7 | v=0; | |
| 8 | } | |
| 9 | return v; | |
| 10 | } | |
| 11 | getData=function(jsData){ | |
| 12 | var colors = Highcharts.getOptions().colors; | |
| 13 | var data=[]; | |
| 14 | var xM=[]; | |
| 15 | var vM=[];//Y轴值的描述 | |
| 16 | var dataV=[]; | |
| 17 | //另集合 | |
| 18 | var reMap; | |
| 19 | var retmap1={miaoshu:[],data:[],vM:[],dataV:[]}; | |
| 20 | if(!parameter.die){ | |
| 21 | for(var j=0;j<parameter.vs.length;j++){ | |
| 22 | retmap1.miaoshu[j]=parameter.vs[j].drawM; | |
| 23 | retmap1.dataV[j]={}; | |
| 24 | retmap1.dataV[j].drilldown={}; | |
| 25 | retmap1.dataV[j].drilldown.data=[]; | |
| 26 | retmap1.dataV[j].color=colors[j]; | |
| 27 | for(var i=0;i<jsData.length;i++){ | |
| 28 | if(j==0){ | |
| 29 | retmap1.vM[i]=jsData[i][parameter.showId]; | |
| 30 | retmap1.data[i]={}; | |
| 31 | retmap1.data[i].name=jsData[i][parameter.showId]; | |
| 32 | retmap1.data[i].data=[]; | |
| 33 | } | |
| 34 | retmap1.data[i].data[j]=getIntValue(jsData[i][parameter.vs[j].drawId]); | |
| 35 | retmap1.dataV[j].drilldown.data[i]=getIntValue(jsData[i][parameter.vs[j].drawId]); | |
| 36 | } | |
| 37 | retmap1.dataV[j].drilldown.color=colors[j]; | |
| 38 | retmap1.dataV[j].drilldown.categories=retmap1.vM; | |
| 39 | } | |
| 40 | reMap=retmap1; | |
| 41 | }else{ | |
| 42 | for(var i=0;i<jsData.length;i++){ | |
| 43 | xM[i]=jsData[i][parameter.showId]; | |
| 44 | dataV[i]={}; | |
| 45 | dataV[i].drilldown={}; | |
| 46 | dataV[i].drilldown.data=[]; | |
| 47 | dataV[i].color=colors[i]; | |
| 48 | for(var j=0;j<parameter.vs.length;j++){ | |
| 49 | if(i==0){ | |
| 50 | data[j]={}; | |
| 51 | data[j].name=parameter.vs[j].drawM; | |
| 52 | vM[j]=parameter.vs[j].drawM; | |
| 53 | data[j].data=[]; | |
| 54 | } | |
| 55 | data[j].data[i]=getIntValue(jsData[i][parameter.vs[j].drawId]); | |
| 56 | dataV[i].drilldown.data[j]=getIntValue(jsData[i][parameter.vs[j].drawId]); | |
| 57 | } | |
| 58 | dataV[i].drilldown.color=colors[i]; | |
| 59 | dataV[i].drilldown.categories=vM; | |
| 60 | } | |
| 61 | reMap={"miaoshu":xM,"data":data,"vM":vM,"dataV":dataV}; | |
| 62 | } | |
| 63 | return reMap; | |
| 64 | } | |
| 65 | toColumnDie=function(jsData){ | |
| 66 | var mapdata=getData(jsData); | |
| 67 | var xM=mapdata.miaoshu; | |
| 68 | var data=mapdata.data; | |
| 69 | var option={ | |
| 70 | chart: { | |
| 71 | renderTo: id, | |
| 72 | defaultSeriesType: 'column' | |
| 73 | }, | |
| 74 | title: { | |
| 75 | text: parent.document.title | |
| 76 | }, | |
| 77 | xAxis: { | |
| 78 | categories: xM | |
| 79 | }, | |
| 80 | yAxis: { | |
| 81 | title: { | |
| 82 | text: '' | |
| 83 | }, | |
| 84 | stackLabels: { | |
| 85 | enabled: true, | |
| 86 | style: { | |
| 87 | fontWeight: 'bold', | |
| 88 | color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray' | |
| 89 | } | |
| 90 | } | |
| 91 | }, | |
| 92 | legend: { | |
| 93 | align: 'right', | |
| 94 | x: -100, | |
| 95 | verticalAlign: 'top', | |
| 96 | y: 20, | |
| 97 | floating: true, | |
| 98 | backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white', | |
| 99 | borderColor: '#CCC', | |
| 100 | borderWidth: 1, | |
| 101 | shadow: false | |
| 102 | }, | |
| 103 | tooltip: { | |
| 104 | formatter: function() { | |
| 105 | return '<b>'+ this.x +'</b><br/>'+ | |
| 106 | this.series.name +': '+ this.y +'<br/>'+ | |
| 107 | 'Total: '+ this.point.stackTotal; | |
| 108 | } | |
| 109 | }, | |
| 110 | plotOptions: { | |
| 111 | column: { | |
| 112 | stacking: 'normal', | |
| 113 | dataLabels: { | |
| 114 | enabled: true, | |
| 115 | color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white' | |
| 116 | } | |
| 117 | } | |
| 118 | }, | |
| 119 | series: data | |
| 120 | }; | |
| 121 | return option; | |
| 122 | } | |
| 123 | toColumn=function(jsData){ | |
| 124 | var mapdata=getData(jsData); | |
| 125 | var xM=mapdata.miaoshu; | |
| 126 | var data=mapdata.data; | |
| 127 | var option={ | |
| 128 | chart: { | |
| 129 | renderTo: id, | |
| 130 | defaultSeriesType: 'column' | |
| 131 | }, | |
| 132 | title: { | |
| 133 | text: parent.document.title | |
| 134 | }, | |
| 135 | subtitle: { | |
| 136 | ||
| 137 | text: document.domain | |
| 138 | ||
| 139 | }, | |
| 140 | xAxis: { | |
| 141 | categories: xM | |
| 142 | }, | |
| 143 | yAxis: { | |
| 144 | title: { | |
| 145 | text: '' | |
| 146 | } | |
| 147 | }, | |
| 148 | legend: { | |
| 149 | layout: 'vertical', | |
| 150 | backgroundColor: '#FFFFFF', | |
| 151 | align: 'left', | |
| 152 | verticalAlign: 'top', | |
| 153 | x: 60, | |
| 154 | y: 40, | |
| 155 | floating: true, | |
| 156 | shadow: true | |
| 157 | }, | |
| 158 | tooltip: { | |
| 159 | formatter: function() { | |
| 160 | return '<b>'+ this.series.name +'</b><br/>'+ | |
| 161 | this.x +': '+ this.y +''; | |
| 162 | } | |
| 163 | }, | |
| 164 | plotOptions: { | |
| 165 | column: { | |
| 166 | pointPadding: 0.2, | |
| 167 | borderWidth: 0 | |
| 168 | } | |
| 169 | }, | |
| 170 | series:data | |
| 171 | } | |
| 172 | return option; | |
| 173 | } | |
| 174 | toLine=function(jsData){ | |
| 175 | var mapdata=getData(jsData); | |
| 176 | var xM=mapdata.miaoshu; | |
| 177 | var data=mapdata.data; | |
| 178 | var option={ | |
| 179 | chart: { | |
| 180 | renderTo: id, | |
| 181 | defaultSeriesType: 'line', | |
| 182 | marginRight: 100, | |
| 183 | marginBottom: 15 | |
| 184 | }, | |
| 185 | title: { | |
| 186 | text: parent.document.title, | |
| 187 | x: -20 //center | |
| 188 | }, | |
| 189 | subtitle: { | |
| 190 | ||
| 191 | text: document.domain,//'Source: yc100.xicp.net' | |
| 192 | x: -20 | |
| 193 | }, | |
| 194 | xAxis: { | |
| 195 | categories: xM | |
| 196 | }, | |
| 197 | yAxis: { | |
| 198 | title: { | |
| 199 | text: "" | |
| 200 | }, | |
| 201 | plotLines: [{ | |
| 202 | value: 0, | |
| 203 | width: 1, | |
| 204 | color: '#808080' | |
| 205 | }] | |
| 206 | }, | |
| 207 | tooltip: { | |
| 208 | formatter: function() { | |
| 209 | return '<b>'+ this.series.name +'</b><br/>'+ | |
| 210 | this.x +': '+ this.y +''; | |
| 211 | } | |
| 212 | }, | |
| 213 | legend: { | |
| 214 | layout: 'vertical', | |
| 215 | align: 'right', | |
| 216 | verticalAlign: 'top', | |
| 217 | x: -10, | |
| 218 | y: 100, | |
| 219 | borderWidth: 0 | |
| 220 | }, | |
| 221 | series:data | |
| 222 | }; | |
| 223 | return option; | |
| 224 | } | |
| 225 | toPieDie=function(jsData){ | |
| 226 | var mapdata=getData(jsData); | |
| 227 | var xM=mapdata.miaoshu; | |
| 228 | var data1=mapdata.data; | |
| 229 | var colors = Highcharts.getOptions().colors, | |
| 230 | categories = xM; | |
| 231 | //name = 'Browser brands', | |
| 232 | var data=mapdata.dataV; | |
| 233 | ||
| 234 | // Build the data arrays | |
| 235 | var browserData = []; | |
| 236 | var versionsData = []; | |
| 237 | var count=0; | |
| 238 | for (var i = 0; i < data.length; i++) { | |
| 239 | count=0; | |
| 240 | // add version data | |
| 241 | for (var j = 0; j < data[i].drilldown.data.length; j++) { | |
| 242 | var brightness = 0.2 - (j / data[i].drilldown.data.length) / 5 ; | |
| 243 | versionsData.push({ | |
| 244 | name: data[i].drilldown.categories[j], | |
| 245 | y: data[i].drilldown.data[j], | |
| 246 | color: Highcharts.Color(data[i].color).brighten(brightness).get() | |
| 247 | }); | |
| 248 | count+=data[i].drilldown.data[j]; | |
| 249 | } | |
| 250 | // add browser data | |
| 251 | browserData.push({ | |
| 252 | name: categories[i], | |
| 253 | y: count, | |
| 254 | color: data[i].color | |
| 255 | }); | |
| 256 | } | |
| 257 | var option={ | |
| 258 | chart: { | |
| 259 | renderTo: id, | |
| 260 | type: 'pie' | |
| 261 | }, | |
| 262 | title: { | |
| 263 | text: parent.document.title | |
| 264 | }, | |
| 265 | yAxis: { | |
| 266 | title: { | |
| 267 | ||
| 268 | text: document.domain//Total percent market share | |
| 269 | } | |
| 270 | }, | |
| 271 | plotOptions: { | |
| 272 | pie: { | |
| 273 | shadow: false | |
| 274 | } | |
| 275 | }, | |
| 276 | tooltip: { | |
| 277 | formatter: function() { | |
| 278 | return '<b>'+ this.point.name +'</b>: '+ this.y ; | |
| 279 | } | |
| 280 | }, | |
| 281 | series: [{ | |
| 282 | name: '名称', | |
| 283 | data: browserData, | |
| 284 | size: '60%', | |
| 285 | dataLabels: { | |
| 286 | formatter: function() { | |
| 287 | return this.y > 5 ? this.point.name : null; | |
| 288 | }, | |
| 289 | color: 'white', | |
| 290 | distance: -30 | |
| 291 | } | |
| 292 | }, { | |
| 293 | name: '详细', | |
| 294 | data: versionsData, | |
| 295 | innerSize: '60%', | |
| 296 | dataLabels: { | |
| 297 | formatter: function() { | |
| 298 | // display only if larger than 1 | |
| 299 | return this.y > 1 ? '<b>'+ this.point.name +':</b> '+ this.y : null; | |
| 300 | } | |
| 301 | } | |
| 302 | }] | |
| 303 | }; | |
| 304 | return option; | |
| 305 | } | |
| 306 | draw=function(jsData){//绘图 | |
| 307 | var option; | |
| 308 | if(parameter.type=="line"){ | |
| 309 | option=toLine(jsData); | |
| 310 | }else if(parameter.type=="column"){ | |
| 311 | option=toColumn(jsData); | |
| 312 | }else if(parameter.type=="columnD"){ | |
| 313 | option=toColumnDie(jsData); | |
| 314 | }else if(parameter.type=="pieD"){ | |
| 315 | option=toPieDie(jsData); | |
| 316 | } | |
| 317 | chart = new Highcharts.Chart(option); | |
| 318 | } | |
| 319 | })(); | |
