|
|
/* * 图片转换对话框脚本 **/
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 ];
}
}
}
|
