BVB Source Codes

Easy to point the content management system DianCMS v6.0.0 SQL version Show charts.js Source code

Return Download Easy to point the content management system DianCMS v6.0.0 SQL version: download charts.js Source code - Download Easy to point the content management system DianCMS v6.0.0 SQL version Source code - Type:.js
  1. /*
  2.  * 图片转换对话框脚本
  3.  **/
  4.  
  5. var tableData = [],
  6.     //编辑器页面table
  7.     editorTable = null,
  8.     chartsConfig = window.typeConfig,
  9.     resizeTimer = null,
  10.     //初始默认图表类型
  11.     currentChartType = 0;
  12.  
  13. window.onload = function () {
  14.  
  15.     editorTable = domUtils.findParentByTagName( editor.selection.getRange().startContainer, 'table', true);
  16.  
  17.     //未找到表格, 显示错误页面
  18.     if ( !editorTable ) {
  19.         document.body.innerHTML = "<div class='edui-charts-not-data'>未找到数据</div>";
  20.         return;
  21.     }
  22.  
  23.     //初始化图表类型选择
  24.     initChartsTypeView();
  25.     renderTable( editorTable );
  26.     initEvent();
  27.     initUserConfig( editorTable.getAttribute( "data-chart" ) );
  28.     $( "#scrollBed .view-box:eq("+ currentChartType +")" ).trigger( "click" );
  29.     updateViewType( currentChartType );
  30.  
  31.     dialog.addListener( "resize", function () {
  32.  
  33.         if ( resizeTimer != null ) {
  34.             window.clearTimeout( resizeTimer );
  35.         }
  36.  
  37.         resizeTimer = window.setTimeout( function () {
  38.  
  39.             resizeTimer = null;
  40.  
  41.             renderCharts();
  42.  
  43.         }, 500 );
  44.  
  45.     } );
  46.  
  47. };
  48.  
  49. function initChartsTypeView () {
  50.  
  51.     var contents = [];
  52.  
  53.     for ( var i = 0, len = chartsConfig.length; i<len; i++ ) {
  54.  
  55.         contents.push( '<div class="view-box" data-chart-type="'+ i +'"><img width="300" src="images/charts'+ i +'.png"></div>' );
  56.  
  57.     }
  58.  
  59.     $( "#scrollBed" ).html( contents.join( "" ) );
  60.  
  61. }
  62.  
  63. //渲染table, 以便用户修改数据
  64. function renderTable ( table ) {
  65.  
  66.     var tableHtml = [];
  67.  
  68.     //构造数据
  69.     for ( var i = 0, row; row = table.rows[ i ]; i++ ) {
  70.  
  71.         tableData[ i ] = [];
  72.         tableHtml[ i ] = [];
  73.  
  74.         for ( var j = 0, cell; cell = row.cells[ j ]; j++ ) {
  75.  
  76.             var value = getCellValue( cell );
  77.  
  78.             if ( i > 0 && j > 0 ) {
  79.                 value = +value;
  80.             }
  81.  
  82.             if ( i === 0 || j === 0 ) {
  83.                 tableHtml[ i ].push( '<th>'+ value +'</th>' );
  84.             } else {
  85.                 tableHtml[ i ].push( '<td><input type="text" class="data-item" value="'+ value +'"></td>' );
  86.             }
  87.  
  88.             tableData[ i ][ j ] = value;
  89.  
  90.         }
  91.  
  92.         tableHtml[ i ] = tableHtml[ i ].join( "" );
  93.  
  94.     }
  95.  
  96.     //draw 表格
  97.     $( "#tableContainer" ).html( '<table id="showTable" border="1"><tbody><tr>'+ tableHtml.join( "</tr><tr>" ) +'</tr></tbody></table>' );
  98.  
  99. }
  100.  
  101. /*
  102.  * 根据表格已有的图表属性初始化当前图表属性
  103.  */
  104. function initUserConfig ( config ) {
  105.  
  106.     var parsedConfig = {};
  107.  
  108.     if ( !config ) {
  109.         return;
  110.     }
  111.  
  112.     config = config.split( ";" );
  113.  
  114.     $.each( config, function ( index, item ) {
  115.  
  116.         item = item.split( ":" );
  117.         parsedConfig[ item[ 0 ] ] = item[ 1 ];
  118.  
  119.     } );
  120.  
  121.     setUserConfig( parsedConfig );
  122.  
  123. }
  124.  
  125. function initEvent () {
  126.  
  127.     var cacheValue = null,
  128.         //图表类型数
  129.         typeViewCount = chartsConfig.length- 1,
  130.         $chartsTypeViewBox = $( '#scrollBed .view-box' );
  131.  
  132.     $( ".charts-format" ).delegate( ".format-ctrl", "change", function () {
  133.  
  134.         renderCharts();
  135.  
  136.     } )
  137.  
  138.     $( ".table-view" ).delegate( ".data-item", "focus", function () {
  139.  
  140.         cacheValue = this.value;
  141.  
  142.     } ).delegate( ".data-item", "blur", function () {
  143.  
  144.         if ( this.value !== cacheValue ) {
  145.             renderCharts();
  146.         }
  147.  
  148.         cacheValue = null;
  149.  
  150.     } );
  151.  
  152.     $( "#buttonContainer" ).delegate( "a", "click", function (e) {
  153.  
  154.         e.preventDefault();
  155.  
  156.         if ( this.getAttribute( "data-title" ) === 'prev' ) {
  157.  
  158.             if ( currentChartType > 0 ) {
  159.                 currentChartType--;
  160.                 updateViewType( currentChartType );
  161.             }
  162.  
  163.         } else {
  164.  
  165.             if ( currentChartType < typeViewCount ) {
  166.                 currentChartType++;
  167.                 updateViewType( currentChartType );
  168.             }
  169.  
  170.         }
  171.  
  172.     } );
  173.  
  174.     //图表类型变化
  175.     $( '#scrollBed' ).delegate( ".view-box", "click", function (e) {
  176.  
  177.         var index = $( this ).attr( "data-chart-type" );
  178.         $chartsTypeViewBox.removeClass( "selected" );
  179.         $( $chartsTypeViewBox[ index ] ).addClass( "selected" );
  180.  
  181.         currentChartType = index | 0;
  182.  
  183.         //饼图, 禁用部分配置
  184.         if ( currentChartType === chartsConfig.length - 1 ) {
  185.  
  186.             disableNotPieConfig();
  187.  
  188.         //启用完整配置
  189.         } else {
  190.  
  191.             enableNotPieConfig();
  192.  
  193.         }
  194.  
  195.         renderCharts();
  196.  
  197.     } );
  198.  
  199. }
  200.  
  201. function renderCharts () {
  202.  
  203.     var data = collectData();
  204.  
  205.     $('#chartsContainer').highcharts( $.extend( {}, chartsConfig[ currentChartType ], {
  206.  
  207.         credits: {
  208.             enabled: false
  209.         },
  210.         exporting: {
  211.             enabled: false
  212.         },
  213.         title: {
  214.             text: data.title,
  215.             x: -20 //center
  216.         },
  217.         subtitle: {
  218.             text: data.subTitle,
  219.             x: -20
  220.         },
  221.         xAxis: {
  222.             title: {
  223.                 text: data.xTitle
  224.             },
  225.             categories: data.categories
  226.         },
  227.         yAxis: {
  228.             title: {
  229.                 text: data.yTitle
  230.             },
  231.             plotLines: [{
  232.                 value: 0,
  233.                 width: 1,
  234.                 color: '#808080'
  235.             }]
  236.         },
  237.         tooltip: {
  238.             enabled: true,
  239.             valueSuffix: data.suffix
  240.         },
  241.         legend: {
  242.             layout: 'vertical',
  243.             align: 'right',
  244.             verticalAlign: 'middle',
  245.             borderWidth: 1
  246.         },
  247.         series: data.series
  248.  
  249.     } ));
  250.  
  251. }
  252.  
  253. function updateViewType ( index ) {
  254.  
  255.     $( "#scrollBed" ).css( 'marginLeft', -index*324+'px' );
  256.  
  257. }
  258.  
  259. function collectData () {
  260.  
  261.     var form = document.forms[ 'data-form' ],
  262.         data = null;
  263.  
  264.     if ( currentChartType !== chartsConfig.length - 1 ) {
  265.  
  266.         data = getSeriesAndCategories();
  267.         $.extend( data, getUserConfig() );
  268.  
  269.     //饼图数据格式
  270.     } else {
  271.         data = getSeriesForPieChart();
  272.         data.title = form[ 'title' ].value;
  273.         data.suffix = form[ 'unit' ].value;
  274.     }
  275.  
  276.     return data;
  277.  
  278. }
  279.  
  280. /**
  281.  * 获取用户配置信息
  282.  */
  283. function getUserConfig () {
  284.  
  285.     var form = document.forms[ 'data-form' ],
  286.         info = {
  287.             title: form[ 'title' ].value,
  288.             subTitle: form[ 'sub-title' ].value,
  289.             xTitle: form[ 'x-title' ].value,
  290.             yTitle: form[ 'y-title' ].value,
  291.             suffix: form[ 'unit' ].value,
  292.             //数据对齐方式
  293.             tableDataFormat: getTableDataFormat (),
  294.             //饼图提示文字
  295.             tip: $( "#tipInput" ).val()
  296.         };
  297.  
  298.     return info;
  299.  
  300. }
  301.  
  302. function setUserConfig ( config ) {
  303.  
  304.     var form = document.forms[ 'data-form' ];
  305.  
  306.     config.title && ( form[ 'title' ].value = config.title );
  307.     config.subTitle && ( form[ 'sub-title' ].value = config.subTitle );
  308.     config.xTitle && ( form[ 'x-title' ].value = config.xTitle );
  309.     config.yTitle && ( form[ 'y-title' ].value = config.yTitle );
  310.     config.suffix && ( form[ 'unit' ].value = config.suffix );
  311.     config.dataFormat == "-1" && ( form[ 'charts-format' ][ 1 ].checked = true );
  312.     config.tip && ( form[ 'tip' ].value = config.tip );
  313.     currentChartType = config.chartType || 0;
  314.  
  315. }
  316.  
  317. function getSeriesAndCategories () {
  318.  
  319.     var form = document.forms[ 'data-form' ],
  320.         series = [],
  321.         categories = [],
  322.         tmp = [],
  323.         tableData = getTableData();
  324.  
  325.     //反转数据
  326.     if ( getTableDataFormat() === "-1" ) {
  327.  
  328.         for ( var i = 0, len = tableData.length; i < len; i++ ) {
  329.  
  330.             for ( var j = 0, jlen = tableData[ i ].length; j < jlen; j++ ) {
  331.  
  332.                 if ( !tmp[ j ] ) {
  333.                     tmp[ j ] = [];
  334.                 }
  335.  
  336.                 tmp[ j ][ i ] = tableData[ i ][ j ];
  337.  
  338.             }
  339.  
  340.         }
  341.  
  342.         tableData = tmp;
  343.  
  344.     }
  345.  
  346.     categories = tableData[0].slice( 1 );
  347.  
  348.     for ( var i = 1, data; data = tableData[ i ]; i++ ) {
  349.  
  350.         series.push( {
  351.             name: data[ 0 ],
  352.             data: data.slice( 1 )
  353.         } );
  354.  
  355.     }
  356.  
  357.     return {
  358.         series: series,
  359.         categories: categories
  360.     };
  361.  
  362. }
  363.  
  364. /*
  365.  * 获取数据源数据对齐方式
  366.  */
  367. function getTableDataFormat () {
  368.  
  369.     var form = document.forms[ 'data-form' ],
  370.         items = form['charts-format'];
  371.  
  372.     return items[ 0 ].checked ? items[ 0 ].value : items[ 1 ].value;
  373.  
  374. }
  375.  
  376. /*
  377.  * 禁用非饼图类型的配置项
  378.  */
  379. function disableNotPieConfig() {
  380.  
  381.     updateConfigItem( 'disable' );
  382.  
  383. }
  384.  
  385. /*
  386.  * 启用非饼图类型的配置项
  387.  */
  388. function enableNotPieConfig() {
  389.  
  390.     updateConfigItem( 'enable' );
  391.  
  392. }
  393.  
  394. function updateConfigItem ( value ) {
  395.  
  396.     var table = $( "#showTable" )[ 0 ],
  397.         isDisable = value === 'disable' ? true : false;
  398.  
  399.     //table中的input处理
  400.     for ( var i = 2 , row; row = table.rows[ i ]; i++ ) {
  401.  
  402.         for ( var j = 1, cell; cell = row.cells[ j ]; j++ ) {
  403.  
  404.             $( "input", cell ).attr( "disabled", isDisable );
  405.  
  406.         }
  407.  
  408.     }
  409.  
  410.     //其他项处理
  411.     $( "input.not-pie-item" ).attr( "disabled", isDisable );
  412.     $( "#tipInput" ).attr( "disabled", !isDisable )
  413.  
  414. }
  415.  
  416. /*
  417.  * 获取饼图数据
  418.  * 饼图的数据只取第一行的
  419.  **/
  420. function getSeriesForPieChart () {
  421.  
  422.     var series = {
  423.             type: 'pie',
  424.             name: $("#tipInput").val(),
  425.             data: []
  426.         },
  427.         tableData = getTableData();
  428.  
  429.  
  430.     for ( var j = 1, jlen = tableData[ 0 ].length; j < jlen; j++ ) {
  431.  
  432.         var title = tableData[ 0 ][ j ],
  433.             val = tableData[ 1 ][ j ];
  434.  
  435.         series.data.push( [ title, val ] );
  436.  
  437.     }
  438.  
  439.     return {
  440.         series: [ series ]
  441.     };
  442.  
  443. }
  444.  
  445. function getTableData () {
  446.  
  447.     var table = document.getElementById( "showTable" ),
  448.         xCount = table.rows[0].cells.length - 1,
  449.         values = getTableInputValue();
  450.  
  451.     for ( var i = 0, value; value = values[ i ]; i++ ) {
  452.  
  453.         tableData[ Math.floor( i / xCount ) + 1 ][ i % xCount + 1 ] = values[ i ];
  454.  
  455.     }
  456.  
  457.     return tableData;
  458.  
  459. }
  460.  
  461. function getTableInputValue () {
  462.  
  463.     var table = document.getElementById( "showTable" ),
  464.         inputs = table.getElementsByTagName( "input" ),
  465.         values = [];
  466.  
  467.     for ( var i = 0, input; input = inputs[ i ]; i++ ) {
  468.         values.push( input.value | 0 );
  469.     }
  470.  
  471.     return values;
  472.  
  473. }
  474.  
  475. function getCellValue ( cell ) {
  476.  
  477.     var value = utils.trim( ( cell.innerText || cell.textContent || '' ) );
  478.  
  479.     return value.replace( new RegExp( UE.dom.domUtils.fillChar, 'g' ), '' ).replace( /^\s+|\s+$/g, '' );
  480.  
  481. }
  482.  
  483.  
  484. //dialog确认事件
  485. dialog.onok = function () {
  486.  
  487.     //收集信息
  488.     var form = document.forms[ 'data-form' ],
  489.         info = getUserConfig();
  490.  
  491.     //添加图表类型
  492.     info.chartType = currentChartType;
  493.  
  494.     //同步表格数据到编辑器
  495.     syncTableData();
  496.  
  497.     //执行图表命令
  498.     editor.execCommand( 'charts', info );
  499.  
  500. };
  501.  
  502. /*
  503.  * 同步图表编辑视图的表格数据到编辑器里的原始表格
  504.  */
  505. function syncTableData () {
  506.  
  507.     var tableData = getTableData();
  508.  
  509.     for ( var i = 1, row; row = editorTable.rows[ i ]; i++ ) {
  510.  
  511.         for ( var j = 1, cell; cell = row.cells[ j ]; j++ ) {
  512.  
  513.             cell.innerHTML = tableData[ i ] [ j ];
  514.  
  515.         }
  516.  
  517.     }
  518.  
  519. }
downloadcharts.js Source code - Download Easy to point the content management system DianCMS v6.0.0 SQL version Source code
Related Source Codes/Software:
Ray speed v7.0 wage query system - To modify the software to conduct a comprehensive ... 2016-08-19
Address book v1.0 FaLiang three layer - This Demo is a three layer address book source cod... 2016-08-19
Deng Xi v2.4 website help system - Deng Xi website help system is a very useful help ... 2016-08-19
1.0 housing, rental housing sale platform - Rent housing rent out platform is a very typical r... 2016-08-19
Cloud on the CMS (SyCms) v1.95 - Add menus and blocks the system style functionalit... 2016-08-19
KesionICMS intelligent website system (school) v3.7 formal version - For school management web site, the kesion forward... 2016-08-19
KesionICMS intelligent website system (enterprise edition) v3.7 formal version - KesionICMS intelligent website (enterprise edition... 2016-08-19
KesionICMS intelligent website system (government) v3.7 formal version - Government Portal website construction Establish t... 2016-08-19
KesionICMS intelligent website system (gm) v3.7 formal version - KESIONICMS intelligent building systems with a fle... 2016-08-19
KesionIMALL v3.7 formal version online mall system - KESIONIMALLV3.7 online shop system, as a new e-com... 2016-08-19
fatfree - A powerful yet easy-to-use PHP micro-framework des... 2017-05-13
TSA-Travel-Sentry-master-keys - 3D reproduction of TSA Master key 2017-05-12
python3-cookbook - "The Python Cookbook" 3 rd Edition Translatio 2017-05-12
isso - a Disqus alternative https:... 2017-05-12
hologram - A markdown based documentation system for style gu... 2017-05-12
www.html5rocks.com - ....a top-notch resource for web developer 2017-05-12
MTStatusBarOverlay - A custom iOS status bar overlay seen in Apps like ... 2017-05-12
blueprint - Reverse engineer server configuration ... 2017-05-12
PullToRefresh - A simple iPhone TableViewController for adding the... 2017-05-12
mrjob - Run MapReduce jobs on Hadoop or Amazon Web Service... 2017-05-11

 Back to top