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