www.gusucode.com > Carbon Forum PHP轻论坛系统 v3.6.5源码程序 > Carbon-Forum-3.6.5/static/editor/dialogs/charts/charts.js

    /*
 * 图片转换对话框脚本
 **/

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 ];

		}

	}

}