| 提交 | 用户 | 时间 | ||
| 8286c6 | 1 | /* |
| 懒 | 2 | * 图片转换对话框脚本 |
| 3 | **/ | |
| 4 | ||
| 5 | var tableData = [], | |
| 6 | //编辑器页面table | |
| 7 | editorTable = null, | |
| 8 | chartsConfig = window.typeConfig, | |
| 9 | resizeTimer = null, | |
| 10 | //初始默认图表类型 | |
| 11 | currentChartType = 0; | |
| 12 | ||
| 13 | window.onload = function () { | |
| 14 | ||
| 15 | editorTable = domUtils.findParentByTagName( editor.selection.getRange().startContainer, 'table', true); | |
| 16 | ||
| 17 | //未找到表格， 显示错误页面 | |
| 18 | if ( !editorTable ) { | |
| 19 | document.body.innerHTML = "<div class='edui-charts-not-data'>未找到数据</div>"; | |
| 20 | return; | |
| 21 | } | |
| 22 | ||
| 23 | //初始化图表类型选择 | |
| 24 | initChartsTypeView(); | |
| 25 | renderTable( editorTable ); | |
| 26 | initEvent(); | |
| 27 | initUserConfig( editorTable.getAttribute( "data-chart" ) ); | |
| 28 | $( "#scrollBed .view-box:eq("+ currentChartType +")" ).trigger( "click" ); | |
| 29 | updateViewType( currentChartType ); | |
| 30 | ||
| 31 | dialog.addListener( "resize", function () { | |
| 32 | ||
| 33 | if ( resizeTimer != null ) { | |
| 34 | window.clearTimeout( resizeTimer ); | |
| 35 | } | |
| 36 | ||
| 37 | resizeTimer = window.setTimeout( function () { | |
| 38 | ||
| 39 | resizeTimer = null; | |
| 40 | ||
| 41 | renderCharts(); | |
| 42 | ||
| 43 | }, 500 ); | |
| 44 | ||
| 45 | } ); | |
| 46 | ||
| 47 | }; | |
| 48 | ||
| 49 | function initChartsTypeView () { | |
| 50 | ||
| 51 | var contents = []; | |
| 52 | ||
| 53 | for ( var i = 0, len = chartsConfig.length; i<len; i++ ) { | |
| 54 | ||
| 55 | contents.push( '<div class="view-box" data-chart-type="'+ i +'"><img width="300" src="images/charts'+ i +'.png"></div>' ); | |
| 56 | ||
| 57 | } | |
| 58 | ||
| 59 | $( "#scrollBed" ).html( contents.join( "" ) ); | |
| 60 | ||
| 61 | } | |
| 62 | ||
| 63 | //渲染table， 以便用户修改数据 | |
| 64 | function renderTable ( table ) { | |
| 65 | ||
| 66 | var tableHtml = []; | |
| 67 | ||
| 68 | //构造数据 | |
| 69 | for ( var i = 0, row; row = table.rows[ i ]; i++ ) { | |
| 70 | ||
| 71 | tableData[ i ] = []; | |
| 72 | tableHtml[ i ] = []; | |
| 73 | ||
| 74 | for ( var j = 0, cell; cell = row.cells[ j ]; j++ ) { | |
| 75 | ||
| 76 | var value = getCellValue( cell ); | |
| 77 | ||
| 78 | if ( i > 0 && j > 0 ) { | |
| 79 | value = +value; | |
| 80 | } | |
| 81 | ||
| 82 | if ( i === 0 || j === 0 ) { | |
| 83 | tableHtml[ i ].push( '<th>'+ value +'</th>' ); | |
| 84 | } else { | |
| 85 | tableHtml[ i ].push( '<td><input type="text" class="data-item" value="'+ value +'"></td>' ); | |
| 86 | } | |
| 87 | ||
| 88 | tableData[ i ][ j ] = value; | |
| 89 | ||
| 90 | } | |
| 91 | ||
| 92 | tableHtml[ i ] = tableHtml[ i ].join( "" ); | |
| 93 | ||
| 94 | } | |
| 95 | ||
| 96 | //draw 表格 | |
| 97 | $( "#tableContainer" ).html( '<table id="showTable" border="1"><tbody><tr>'+ tableHtml.join( "</tr><tr>" ) +'</tr></tbody></table>' ); | |
| 98 | ||
| 99 | } | |
| 100 | ||
| 101 | /* | |
| 102 | * 根据表格已有的图表属性初始化当前图表属性 | |
| 103 | */ | |
| 104 | function initUserConfig ( config ) { | |
| 105 | ||
| 106 | var parsedConfig = {}; | |
| 107 | ||
| 108 | if ( !config ) { | |
| 109 | return; | |
| 110 | } | |
| 111 | ||
| 112 | config = config.split( ";" ); | |
| 113 | ||
| 114 | $.each( config, function ( index, item ) { | |
| 115 | ||
| 116 | item = item.split( ":" ); | |
| 117 | parsedConfig[ item[ 0 ] ] = item[ 1 ]; | |
| 118 | ||
| 119 | } ); | |
| 120 | ||
| 121 | setUserConfig( parsedConfig ); | |
| 122 | ||
| 123 | } | |
| 124 | ||
| 125 | function initEvent () { | |
| 126 | ||
| 127 | var cacheValue = null, | |
| 128 | //图表类型数 | |
| 129 | typeViewCount = chartsConfig.length- 1, | |
| 130 | $chartsTypeViewBox = $( '#scrollBed .view-box' ); | |
| 131 | ||
| 132 | $( ".charts-format" ).delegate( ".format-ctrl", "change", function () { | |
| 133 | ||
| 134 | renderCharts(); | |
| 135 | ||
| 136 | } ) | |
| 137 | ||
| 138 | $( ".table-view" ).delegate( ".data-item", "focus", function () { | |
| 139 | ||
| 140 | cacheValue = this.value; | |
| 141 | ||
| 142 | } ).delegate( ".data-item", "blur", function () { | |
| 143 | ||
| 144 | if ( this.value !== cacheValue ) { | |
| 145 | renderCharts(); | |
| 146 | } | |
| 147 | ||
| 148 | cacheValue = null; | |
| 149 | ||
| 150 | } ); | |
| 151 | ||
| 152 | $( "#buttonContainer" ).delegate( "a", "click", function (e) { | |
| 153 | ||
| 154 | e.preventDefault(); | |
| 155 | ||
| 156 | if ( this.getAttribute( "data-title" ) === 'prev' ) { | |
| 157 | ||
| 158 | if ( currentChartType > 0 ) { | |
| 159 | currentChartType--; | |
| 160 | updateViewType( currentChartType ); | |
| 161 | } | |
| 162 | ||
| 163 | } else { | |
| 164 | ||
| 165 | if ( currentChartType < typeViewCount ) { | |
| 166 | currentChartType++; | |
| 167 | updateViewType( currentChartType ); | |
| 168 | } | |
| 169 | ||
| 170 | } | |
| 171 | ||
| 172 | } ); | |
| 173 | ||
| 174 | //图表类型变化 | |
| 175 | $( '#scrollBed' ).delegate( ".view-box", "click", function (e) { | |
| 176 | ||
| 177 | var index = $( this ).attr( "data-chart-type" ); | |
| 178 | $chartsTypeViewBox.removeClass( "selected" ); | |
| 179 | $( $chartsTypeViewBox[ index ] ).addClass( "selected" ); | |
| 180 | ||
| 181 | currentChartType = index | 0; | |
| 182 | ||
| 183 | //饼图， 禁用部分配置 | |
| 184 | if ( currentChartType === chartsConfig.length - 1 ) { | |
| 185 | ||
| 186 | disableNotPieConfig(); | |
| 187 | ||
| 188 | //启用完整配置 | |
| 189 | } else { | |
| 190 | ||
| 191 | enableNotPieConfig(); | |
| 192 | ||
| 193 | } | |
| 194 | ||
| 195 | renderCharts(); | |
| 196 | ||
| 197 | } ); | |
| 198 | ||
| 199 | } | |
| 200 | ||
| 201 | function renderCharts () { | |
| 202 | ||
| 203 | var data = collectData(); | |
| 204 | ||
| 205 | $('#chartsContainer').highcharts( $.extend( {}, chartsConfig[ currentChartType ], { | |
| 206 | ||
| 207 | credits: { | |
| 208 | enabled: false | |
| 209 | }, | |
| 210 | exporting: { | |
| 211 | enabled: false | |
| 212 | }, | |
| 213 | title: { | |
| 214 | text: data.title, | |
| 215 | x: -20 //center | |
| 216 | }, | |
| 217 | subtitle: { | |
| 218 | text: data.subTitle, | |
| 219 | x: -20 | |
| 220 | }, | |
| 221 | xAxis: { | |
| 222 | title: { | |
| 223 | text: data.xTitle | |
| 224 | }, | |
| 225 | categories: data.categories | |
| 226 | }, | |
| 227 | yAxis: { | |
| 228 | title: { | |
| 229 | text: data.yTitle | |
| 230 | }, | |
| 231 | plotLines: [{ | |
| 232 | value: 0, | |
| 233 | width: 1, | |
| 234 | color: '#808080' | |
| 235 | }] | |
| 236 | }, | |
| 237 | tooltip: { | |
| 238 | enabled: true, | |
| 239 | valueSuffix: data.suffix | |
| 240 | }, | |
| 241 | legend: { | |
| 242 | layout: 'vertical', | |
| 243 | align: 'right', | |
| 244 | verticalAlign: 'middle', | |
| 245 | borderWidth: 1 | |
| 246 | }, | |
| 247 | series: data.series | |
| 248 | ||
| 249 | } )); | |
| 250 | ||
| 251 | } | |
| 252 | ||
| 253 | function updateViewType ( index ) { | |
| 254 | ||
| 255 | $( "#scrollBed" ).css( 'marginLeft', -index*324+'px' ); | |
| 256 | ||
| 257 | } | |
| 258 | ||
| 259 | function collectData () { | |
| 260 | ||
| 261 | var form = document.forms[ 'data-form' ], | |
| 262 | data = null; | |
| 263 | ||
| 264 | if ( currentChartType !== chartsConfig.length - 1 ) { | |
| 265 | ||
| 266 | data = getSeriesAndCategories(); | |
| 267 | $.extend( data, getUserConfig() ); | |
| 268 | ||
| 269 | //饼图数据格式 | |
| 270 | } else { | |
| 271 | data = getSeriesForPieChart(); | |
| 272 | data.title = form[ 'title' ].value; | |
| 273 | data.suffix = form[ 'unit' ].value; | |
| 274 | } | |
| 275 | ||
| 276 | return data; | |
| 277 | ||
| 278 | } | |
| 279 | ||
| 280 | /** | |
| 281 | * 获取用户配置信息 | |
| 282 | */ | |
| 283 | function getUserConfig () { | |
| 284 | ||
| 285 | var form = document.forms[ 'data-form' ], | |
| 286 | info = { | |
| 287 | title: form[ 'title' ].value, | |
| 288 | subTitle: form[ 'sub-title' ].value, | |
| 289 | xTitle: form[ 'x-title' ].value, | |
| 290 | yTitle: form[ 'y-title' ].value, | |
| 291 | suffix: form[ 'unit' ].value, | |
| 292 | //数据对齐方式 | |
| 293 | tableDataFormat: getTableDataFormat (), | |
| 294 | //饼图提示文字 | |
| 295 | tip: $( "#tipInput" ).val() | |
| 296 | }; | |
| 297 | ||
| 298 | return info; | |
| 299 | ||
| 300 | } | |
| 301 | ||
| 302 | function setUserConfig ( config ) { | |
| 303 | ||
| 304 | var form = document.forms[ 'data-form' ]; | |
| 305 | ||
| 306 | config.title && ( form[ 'title' ].value = config.title ); | |
| 307 | config.subTitle && ( form[ 'sub-title' ].value = config.subTitle ); | |
| 308 | config.xTitle && ( form[ 'x-title' ].value = config.xTitle ); | |
| 309 | config.yTitle && ( form[ 'y-title' ].value = config.yTitle ); | |
| 310 | config.suffix && ( form[ 'unit' ].value = config.suffix ); | |
| 311 | config.dataFormat == "-1" && ( form[ 'charts-format' ][ 1 ].checked = true ); | |
| 312 | config.tip && ( form[ 'tip' ].value = config.tip ); | |
| 313 | currentChartType = config.chartType || 0; | |
| 314 | ||
| 315 | } | |
| 316 | ||
| 317 | function getSeriesAndCategories () { | |
| 318 | ||
| 319 | var form = document.forms[ 'data-form' ], | |
| 320 | series = [], | |
| 321 | categories = [], | |
| 322 | tmp = [], | |
| 323 | tableData = getTableData(); | |
| 324 | ||
| 325 | //反转数据 | |
| 326 | if ( getTableDataFormat() === "-1" ) { | |
| 327 | ||
| 328 | for ( var i = 0, len = tableData.length; i < len; i++ ) { | |
| 329 | ||
| 330 | for ( var j = 0, jlen = tableData[ i ].length; j < jlen; j++ ) { | |
| 331 | ||
| 332 | if ( !tmp[ j ] ) { | |
| 333 | tmp[ j ] = []; | |
| 334 | } | |
| 335 | ||
| 336 | tmp[ j ][ i ] = tableData[ i ][ j ]; | |
| 337 | ||
| 338 | } | |
| 339 | ||
| 340 | } | |
| 341 | ||
| 342 | tableData = tmp; | |
| 343 | ||
| 344 | } | |
| 345 | ||
| 346 | categories = tableData[0].slice( 1 ); | |
| 347 | ||
| 348 | for ( var i = 1, data; data = tableData[ i ]; i++ ) { | |
| 349 | ||
| 350 | series.push( { | |
| 351 | name: data[ 0 ], | |
| 352 | data: data.slice( 1 ) | |
| 353 | } ); | |
| 354 | ||
| 355 | } | |
| 356 | ||
| 357 | return { | |
| 358 | series: series, | |
| 359 | categories: categories | |
| 360 | }; | |
| 361 | ||
| 362 | } | |
| 363 | ||
| 364 | /* | |
| 365 | * 获取数据源数据对齐方式 | |
| 366 | */ | |
| 367 | function getTableDataFormat () { | |
| 368 | ||
| 369 | var form = document.forms[ 'data-form' ], | |
| 370 | items = form['charts-format']; | |
| 371 | ||
| 372 | return items[ 0 ].checked ? items[ 0 ].value : items[ 1 ].value; | |
| 373 | ||
| 374 | } | |
| 375 | ||
| 376 | /* | |
| 377 | * 禁用非饼图类型的配置项 | |
| 378 | */ | |
| 379 | function disableNotPieConfig() { | |
| 380 | ||
| 381 | updateConfigItem( 'disable' ); | |
| 382 | ||
| 383 | } | |
| 384 | ||
| 385 | /* | |
| 386 | * 启用非饼图类型的配置项 | |
| 387 | */ | |
| 388 | function enableNotPieConfig() { | |
| 389 | ||
| 390 | updateConfigItem( 'enable' ); | |
| 391 | ||
| 392 | } | |
| 393 | ||
| 394 | function updateConfigItem ( value ) { | |
| 395 | ||
| 396 | var table = $( "#showTable" )[ 0 ], | |
| 397 | isDisable = value === 'disable' ? true : false; | |
| 398 | ||
| 399 | //table中的input处理 | |
| 400 | for ( var i = 2 , row; row = table.rows[ i ]; i++ ) { | |
| 401 | ||
| 402 | for ( var j = 1, cell; cell = row.cells[ j ]; j++ ) { | |
| 403 | ||
| 404 | $( "input", cell ).attr( "disabled", isDisable ); | |
| 405 | ||
| 406 | } | |
| 407 | ||
| 408 | } | |
| 409 | ||
| 410 | //其他项处理 | |
| 411 | $( "input.not-pie-item" ).attr( "disabled", isDisable ); | |
| 412 | $( "#tipInput" ).attr( "disabled", !isDisable ) | |
| 413 | ||
| 414 | } | |
| 415 | ||
| 416 | /* | |
| 417 | * 获取饼图数据 | |
| 418 | * 饼图的数据只取第一行的 | |
| 419 | **/ | |
| 420 | function getSeriesForPieChart () { | |
| 421 | ||
| 422 | var series = { | |
| 423 | type: 'pie', | |
| 424 | name: $("#tipInput").val(), | |
| 425 | data: [] | |
| 426 | }, | |
| 427 | tableData = getTableData(); | |
| 428 | ||
| 429 | ||
| 430 | for ( var j = 1, jlen = tableData[ 0 ].length; j < jlen; j++ ) { | |
| 431 | ||
| 432 | var title = tableData[ 0 ][ j ], | |
| 433 | val = tableData[ 1 ][ j ]; | |
| 434 | ||
| 435 | series.data.push( [ title, val ] ); | |
| 436 | ||
| 437 | } | |
| 438 | ||
| 439 | return { | |
| 440 | series: [ series ] | |
| 441 | }; | |
| 442 | ||
| 443 | } | |
| 444 | ||
| 445 | function getTableData () { | |
| 446 | ||
| 447 | var table = document.getElementById( "showTable" ), | |
| 448 | xCount = table.rows[0].cells.length - 1, | |
| 449 | values = getTableInputValue(); | |
| 450 | ||
| 451 | for ( var i = 0, value; value = values[ i ]; i++ ) { | |
| 452 | ||
| 453 | tableData[ Math.floor( i / xCount ) + 1 ][ i % xCount + 1 ] = values[ i ]; | |
| 454 | ||
| 455 | } | |
| 456 | ||
| 457 | return tableData; | |
| 458 | ||
| 459 | } | |
| 460 | ||
| 461 | function getTableInputValue () { | |
| 462 | ||
| 463 | var table = document.getElementById( "showTable" ), | |
| 464 | inputs = table.getElementsByTagName( "input" ), | |
| 465 | values = []; | |
| 466 | ||
| 467 | for ( var i = 0, input; input = inputs[ i ]; i++ ) { | |
| 468 | values.push( input.value | 0 ); | |
| 469 | } | |
| 470 | ||
| 471 | return values; | |
| 472 | ||
| 473 | } | |
| 474 | ||
| 475 | function getCellValue ( cell ) { | |
| 476 | ||
| 477 | var value = utils.trim( ( cell.innerText || cell.textContent || '' ) ); | |
| 478 | ||
| 479 | return value.replace( new RegExp( UE.dom.domUtils.fillChar, 'g' ), '' ).replace( /^\s+|\s+$/g, '' ); | |
| 480 | ||
| 481 | } | |
| 482 | ||
| 483 | ||
| 484 | //dialog确认事件 | |
| 485 | dialog.onok = function () { | |
| 486 | ||
| 487 | //收集信息 | |
| 488 | var form = document.forms[ 'data-form' ], | |
| 489 | info = getUserConfig(); | |
| 490 | ||
| 491 | //添加图表类型 | |
| 492 | info.chartType = currentChartType; | |
| 493 | ||
| 494 | //同步表格数据到编辑器 | |
| 495 | syncTableData(); | |
| 496 | ||
| 497 | //执行图表命令 | |
| 498 | editor.execCommand( 'charts', info ); | |
| 499 | ||
| 500 | }; | |
| 501 | ||
| 502 | /* | |
| 503 | * 同步图表编辑视图的表格数据到编辑器里的原始表格 | |
| 504 | */ | |
| 505 | function syncTableData () { | |
| 506 | ||
| 507 | var tableData = getTableData(); | |
| 508 | ||
| 509 | for ( var i = 1, row; row = editorTable.rows[ i ]; i++ ) { | |
| 510 | ||
| 511 | for ( var j = 1, cell; cell = row.cells[ j ]; j++ ) { | |
| 512 | ||
| 513 | cell.innerHTML = tableData[ i ] [ j ]; | |
| 514 | ||
| 515 | } | |
| 516 | ||
| 517 | } | |
| 518 | ||
| 519 | } | |
