/* * 图表parse插件 */ UE.parse.register('charts',function( utils ){ var resourceRoot = this.rootPath, containers = this.root, sources = null; //不存在指定的根路径, 则直接退出 if ( !resourceRoot ) { return; } if ( sources = parseSources() ) { loadResources(); } function parseSources () { if ( !containers ) { return null; } return extractChartData( containers ); } /** * 提取数据 */ function extractChartData ( rootNode ) { var data = [], tables = rootNode.getElementsByTagName( "table" ); for ( var i = 0, tableNode; tableNode = tables[ i ]; i++ ) { if ( tableNode.getAttribute( "data-chart" ) !== null ) { data.push( formatData( tableNode ) ); } } return data.length ? data : null; } function formatData ( tableNode ) { var meta = tableNode.getAttribute( "data-chart" ), metaConfig = {}, data = []; //提取table数据 for ( var i = 0, row; row = tableNode.rows[ i ]; i++ ) { var rowData = []; for ( var j = 0, cell; cell = row.cells[ j ]; j++ ) { rowData.push( ( cell.innerText || cell.textContent ) | 0 ); } data.push( rowData ); } //解析元信息 meta = meta.split( ";" ); for ( var i = 0, metaData; metaData = meta[ i ]; i++ ) { metaData = metaData.split( ":" ); metaConfig[ metaData[ 0 ] ] = metaData[ 1 ]; } return { table: tableNode, meta: metaConfig, data: data }; } //加载资源 function loadResources () { loadJQuery(); } function loadJQuery () { //不存在jquery, 则加载jquery if ( !window.jQuery ) { utils.loadFile(document,{ src : resourceRoot + "/third-party/jquery-1.10.2.min.js", tag : "script", type : "text/javascript", defer : "defer" },function(){ loadHighcharts(); }); } else { loadHighcharts(); } } function loadHighcharts () { //不存在Highcharts, 则加载Highcharts if ( !window.Highcharts ) { utils.loadFile(document,{ src : resourceRoot + "/third-party/highcharts/highcharts.js", tag : "script", type : "text/javascript", defer : "defer" },function(){ loadTypeConfig(); }); } else { loadTypeConfig(); } } //加载图表差异化配置文件 function loadTypeConfig () { utils.loadFile(document,{ src : resourceRoot + "/dialogs/charts/chart.config.js", tag : "script", type : "text/javascript", defer : "defer" },function(){ render(); }); } //渲染图表 function render () { var config = null, chartConfig = null, container = null; for ( var i = 0, len = sources.length; i < len; i++ ) { config = sources[ i ]; chartConfig = analysisConfig( config ); container = createContainer( config.table ); renderChart( container, typeConfig[ config.meta.chartType ], chartConfig ); } } /* * 渲染图表 * @param container 图表容器节点对象 * @param typeConfig 图表类型配置 * @param config 图表通用配置 * */ function renderChart ( container, typeConfig, config ) { $( container ).highcharts( $.extend( {}, typeConfig, { credits: { enabled: false }, exporting: { enabled: false }, title: { text: config.title, x: -20 //center }, subtitle: { text: config.subTitle, x: -20 }, xAxis: { title: { text: config.xTitle }, categories: config.categories }, yAxis: { title: { text: config.yTitle }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { enabled: true, valueSuffix: config.suffix }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 1 }, series: config.series } )); } /* * 创建图表的容器 * 新创建的容器会替换掉对应的table对象 * */ function createContainer ( tableNode ) { var container = document.createElement( "div" ); container.className = "edui-chart-container"; tableNode.parentNode.replaceChild( container, tableNode ); return container; } //根据config解析出正确的类别和图表数据信息 function analysisConfig ( config ) { var series = [], //数据类别 categories = [], result = [], data = config.data, meta = config.meta; //数据对齐方式为相反的方式, 需要反转数据 if ( meta.dataFormat != "1" ) { for ( var i = 0, len = data.length; i < len ; i++ ) { for ( var j = 0, jlen = data[ i ].length; j < jlen; j++ ) { if ( !result[ j ] ) { result[ j ] = []; } result[ j ][ i ] = data[ i ][ j ]; } } data = result; } result = {}; //普通图表 if ( meta.chartType != typeConfig.length - 1 ) { categories = data[ 0 ].slice( 1 ); for ( var i = 1, curData; curData = data[ i ]; i++ ) { series.push( { name: curData[ 0 ], data: curData.slice( 1 ) } ); } result.series = series; result.categories = categories; result.title = meta.title; result.subTitle = meta.subTitle; result.xTitle = meta.xTitle; result.yTitle = meta.yTitle; result.suffix = meta.suffix; } else { var curData = []; for ( var i = 1, len = data[ 0 ].length; i < len; i++ ) { curData.push( [ data[ 0 ][ i ], data[ 1 ][ i ] | 0 ] ); } //饼图 series[ 0 ] = { type: 'pie', name: meta.tip, data: curData }; result.series = series; result.title = meta.title; result.suffix = meta.suffix; } return result; } });