123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519 |
- /*
- * 图片转换对话框脚本
- **/
-
- var tableData = [],
- //编辑器页面table
- editorTable = null,
- chartsConfig = window.typeConfig,
- resizeTimer = null,
- //初始默认图表类型
- currentChartType = 0;
-
- window.onload = function () {
-
- editorTable = domUtils.findParentByTagName( editor.selection.getRange().startContainer, 'table', true);
-
- //未找到表格, 显示错误页面
- if ( !editorTable ) {
- document.body.innerHTML = "<div class='edui-charts-not-data'>未找到数据</div>";
- return;
- }
-
- //初始化图表类型选择
- initChartsTypeView();
- renderTable( editorTable );
- initEvent();
- initUserConfig( editorTable.getAttribute( "data-chart" ) );
- $( "#scrollBed .view-box:eq("+ currentChartType +")" ).trigger( "click" );
- updateViewType( currentChartType );
-
- dialog.addListener( "resize", function () {
-
- if ( resizeTimer != null ) {
- window.clearTimeout( resizeTimer );
- }
-
- resizeTimer = window.setTimeout( function () {
-
- resizeTimer = null;
-
- renderCharts();
-
- }, 500 );
-
- } );
-
- };
-
- function initChartsTypeView () {
-
- var contents = [];
-
- for ( var i = 0, len = chartsConfig.length; i<len; i++ ) {
-
- contents.push( '<div class="view-box" data-chart-type="'+ i +'"><img width="300" src="../images/charts'+ i +'.png"></div>' );
-
- }
-
- $( "#scrollBed" ).html( contents.join( "" ) );
-
- }
-
- //渲染table, 以便用户修改数据
- function renderTable ( table ) {
-
- var tableHtml = [];
-
- //构造数据
- for ( var i = 0, row; row = table.rows[ i ]; i++ ) {
-
- tableData[ i ] = [];
- tableHtml[ i ] = [];
-
- for ( var j = 0, cell; cell = row.cells[ j ]; j++ ) {
-
- var value = getCellValue( cell );
-
- if ( i > 0 && j > 0 ) {
- value = +value;
- }
-
- if ( i === 0 || j === 0 ) {
- tableHtml[ i ].push( '<th>'+ value +'</th>' );
- } else {
- tableHtml[ i ].push( '<td><input type="text" class="data-item" value="'+ value +'"></td>' );
- }
-
- tableData[ i ][ j ] = value;
-
- }
-
- tableHtml[ i ] = tableHtml[ i ].join( "" );
-
- }
-
- //draw 表格
- $( "#tableContainer" ).html( '<table id="showTable" border="1"><tbody><tr>'+ tableHtml.join( "</tr><tr>" ) +'</tr></tbody></table>' );
-
- }
-
- /*
- * 根据表格已有的图表属性初始化当前图表属性
- */
- function initUserConfig ( config ) {
-
- var parsedConfig = {};
-
- if ( !config ) {
- return;
- }
-
- config = config.split( ";" );
-
- $.each( config, function ( index, item ) {
-
- item = item.split( ":" );
- parsedConfig[ item[ 0 ] ] = item[ 1 ];
-
- } );
-
- setUserConfig( parsedConfig );
-
- }
-
- function initEvent () {
-
- var cacheValue = null,
- //图表类型数
- typeViewCount = chartsConfig.length- 1,
- $chartsTypeViewBox = $( '#scrollBed .view-box' );
-
- $( ".charts-format" ).delegate( ".format-ctrl", "change", function () {
-
- renderCharts();
-
- } )
-
- $( ".table-view" ).delegate( ".data-item", "focus", function () {
-
- cacheValue = this.value;
-
- } ).delegate( ".data-item", "blur", function () {
-
- if ( this.value !== cacheValue ) {
- renderCharts();
- }
-
- cacheValue = null;
-
- } );
-
- $( "#buttonContainer" ).delegate( "a", "click", function (e) {
-
- e.preventDefault();
-
- if ( this.getAttribute( "data-title" ) === 'prev' ) {
-
- if ( currentChartType > 0 ) {
- currentChartType--;
- updateViewType( currentChartType );
- }
-
- } else {
-
- if ( currentChartType < typeViewCount ) {
- currentChartType++;
- updateViewType( currentChartType );
- }
-
- }
-
- } );
-
- //图表类型变化
- $( '#scrollBed' ).delegate( ".view-box", "click", function (e) {
-
- var index = $( this ).attr( "data-chart-type" );
- $chartsTypeViewBox.removeClass( "selected" );
- $( $chartsTypeViewBox[ index ] ).addClass( "selected" );
-
- currentChartType = index | 0;
-
- //饼图, 禁用部分配置
- if ( currentChartType === chartsConfig.length - 1 ) {
-
- disableNotPieConfig();
-
- //启用完整配置
- } else {
-
- enableNotPieConfig();
-
- }
-
- renderCharts();
-
- } );
-
- }
-
- function renderCharts () {
-
- var data = collectData();
-
- $('#chartsContainer').highcharts( $.extend( {}, chartsConfig[ currentChartType ], {
-
- credits: {
- enabled: false
- },
- exporting: {
- enabled: false
- },
- title: {
- text: data.title,
- x: -20 //center
- },
- subtitle: {
- text: data.subTitle,
- x: -20
- },
- xAxis: {
- title: {
- text: data.xTitle
- },
- categories: data.categories
- },
- yAxis: {
- title: {
- text: data.yTitle
- },
- plotLines: [{
- value: 0,
- width: 1,
- color: '#808080'
- }]
- },
- tooltip: {
- enabled: true,
- valueSuffix: data.suffix
- },
- legend: {
- layout: 'vertical',
- align: 'right',
- verticalAlign: 'middle',
- borderWidth: 1
- },
- series: data.series
-
- } ));
-
- }
-
- function updateViewType ( index ) {
-
- $( "#scrollBed" ).css( 'marginLeft', -index*324+'px' );
-
- }
-
- function collectData () {
-
- var form = document.forms[ 'data-form' ],
- data = null;
-
- if ( currentChartType !== chartsConfig.length - 1 ) {
-
- data = getSeriesAndCategories();
- $.extend( data, getUserConfig() );
-
- //饼图数据格式
- } else {
- data = getSeriesForPieChart();
- data.title = form[ 'title' ].value;
- data.suffix = form[ 'unit' ].value;
- }
-
- return data;
-
- }
-
- /**
- * 获取用户配置信息
- */
- function getUserConfig () {
-
- var form = document.forms[ 'data-form' ],
- info = {
- title: form[ 'title' ].value,
- subTitle: form[ 'sub-title' ].value,
- xTitle: form[ 'x-title' ].value,
- yTitle: form[ 'y-title' ].value,
- suffix: form[ 'unit' ].value,
- //数据对齐方式
- tableDataFormat: getTableDataFormat (),
- //饼图提示文字
- tip: $( "#tipInput" ).val()
- };
-
- return info;
-
- }
-
- function setUserConfig ( config ) {
-
- var form = document.forms[ 'data-form' ];
-
- config.title && ( form[ 'title' ].value = config.title );
- config.subTitle && ( form[ 'sub-title' ].value = config.subTitle );
- config.xTitle && ( form[ 'x-title' ].value = config.xTitle );
- config.yTitle && ( form[ 'y-title' ].value = config.yTitle );
- config.suffix && ( form[ 'unit' ].value = config.suffix );
- config.dataFormat == "-1" && ( form[ 'charts-format' ][ 1 ].checked = true );
- config.tip && ( form[ 'tip' ].value = config.tip );
- currentChartType = config.chartType || 0;
-
- }
-
- function getSeriesAndCategories () {
-
- var form = document.forms[ 'data-form' ],
- series = [],
- categories = [],
- tmp = [],
- tableData = getTableData();
-
- //反转数据
- if ( getTableDataFormat() === "-1" ) {
-
- for ( var i = 0, len = tableData.length; i < len; i++ ) {
-
- for ( var j = 0, jlen = tableData[ i ].length; j < jlen; j++ ) {
-
- if ( !tmp[ j ] ) {
- tmp[ j ] = [];
- }
-
- tmp[ j ][ i ] = tableData[ i ][ j ];
-
- }
-
- }
-
- tableData = tmp;
-
- }
-
- categories = tableData[0].slice( 1 );
-
- for ( var i = 1, data; data = tableData[ i ]; i++ ) {
-
- series.push( {
- name: data[ 0 ],
- data: data.slice( 1 )
- } );
-
- }
-
- return {
- series: series,
- categories: categories
- };
-
- }
-
- /*
- * 获取数据源数据对齐方式
- */
- function getTableDataFormat () {
-
- var form = document.forms[ 'data-form' ],
- items = form['charts-format'];
-
- return items[ 0 ].checked ? items[ 0 ].value : items[ 1 ].value;
-
- }
-
- /*
- * 禁用非饼图类型的配置项
- */
- function disableNotPieConfig() {
-
- updateConfigItem( 'disable' );
-
- }
-
- /*
- * 启用非饼图类型的配置项
- */
- function enableNotPieConfig() {
-
- updateConfigItem( 'enable' );
-
- }
-
- function updateConfigItem ( value ) {
-
- var table = $( "#showTable" )[ 0 ],
- isDisable = value === 'disable' ? true : false;
-
- //table中的input处理
- for ( var i = 2 , row; row = table.rows[ i ]; i++ ) {
-
- for ( var j = 1, cell; cell = row.cells[ j ]; j++ ) {
-
- $( "input", cell ).attr( "disabled", isDisable );
-
- }
-
- }
-
- //其他项处理
- $( "input.not-pie-item" ).attr( "disabled", isDisable );
- $( "#tipInput" ).attr( "disabled", !isDisable )
-
- }
-
- /*
- * 获取饼图数据
- * 饼图的数据只取第一行的
- **/
- function getSeriesForPieChart () {
-
- var series = {
- type: 'pie',
- name: $("#tipInput").val(),
- data: []
- },
- tableData = getTableData();
-
-
- for ( var j = 1, jlen = tableData[ 0 ].length; j < jlen; j++ ) {
-
- var title = tableData[ 0 ][ j ],
- val = tableData[ 1 ][ j ];
-
- series.data.push( [ title, val ] );
-
- }
-
- return {
- series: [ series ]
- };
-
- }
-
- function getTableData () {
-
- var table = document.getElementById( "showTable" ),
- xCount = table.rows[0].cells.length - 1,
- values = getTableInputValue();
-
- for ( var i = 0, value; value = values[ i ]; i++ ) {
-
- tableData[ Math.floor( i / xCount ) + 1 ][ i % xCount + 1 ] = values[ i ];
-
- }
-
- return tableData;
-
- }
-
- function getTableInputValue () {
-
- var table = document.getElementById( "showTable" ),
- inputs = table.getElementsByTagName( "input" ),
- values = [];
-
- for ( var i = 0, input; input = inputs[ i ]; i++ ) {
- values.push( input.value | 0 );
- }
-
- return values;
-
- }
-
- function getCellValue ( cell ) {
-
- var value = utils.trim( ( cell.innerText || cell.textContent || '' ) );
-
- return value.replace( new RegExp( UE.dom.domUtils.fillChar, 'g' ), '' ).replace( /^\s+|\s+$/g, '' );
-
- }
-
-
- //dialog确定事件
- dialog.onok = function () {
-
- //收集信息
- var form = document.forms[ 'data-form' ],
- info = getUserConfig();
-
- //添加图表类型
- info.chartType = currentChartType;
-
- //同步表格数据到编辑器
- syncTableData();
-
- //执行图表命令
- editor.execCommand( 'charts', info );
-
- };
-
- /*
- * 同步图表编辑视图的表格数据到编辑器里的原始表格
- */
- function syncTableData () {
-
- var tableData = getTableData();
-
- for ( var i = 1, row; row = editorTable.rows[ i ]; i++ ) {
-
- for ( var j = 1, cell; cell = row.cells[ j ]; j++ ) {
-
- cell.innerHTML = tableData[ i ] [ j ];
-
- }
-
- }
-
- }
|