在thinkphp下使用highcharts用csv文件画图~
<!DOCTYPE HTML> <head> <meta http-equiv="Content-Type"content="text/html; charset=UTF-8"> <title>{$title}</title> <link rel="stylesheet"type="text/css"href="__PUBLIC__/css/default.css"/> <include file='./Public/header'/> <script type="text/javascript"src="__PUBLIC__/swfupload/swfupload.js"></script> <script type="text/javascript"src="__PUBLIC__/Js/swfupload.queue.js"></script> <script type="text/javascript"src="__PUBLIC__/Js/fileprogress.js"></script> <script type="text/javascript"src="__PUBLIC__/Js/handlers.js"></script> <script type="text/javascript"src="__PUBLIC__/jquery/jquery.js"></script> <script type="text/javascript"> var swfu; window.onload = function() { var settings = { flash_url :"__PUBLIC__/swfupload/swfupload.swf", upload_url :"__APP__/Index/upload", //post_params: {"PHPSESSID":"<?php echo session_id(); ?>"}, file_size_limit :"250 MB", file_types :"*.csv", file_types_description :"All Files", file_upload_limit : 100, file_queue_limit : 0, custom_settings : { progressTarget :"fsUploadProgress", cancelButtonId :"btnCancel" }, debug : false, // Button settings button_image_url :"__PUBLIC__/images/TestImageNoText_65x29.png", button_width :"65", button_height :"29", button_placeholder_id :"spanButtonPlaceHolder", button_text : '<span class="theFont">上传</span>', button_text_style :".theFont { font-size: 16; }", button_text_left_padding : 12, button_text_top_padding : 3, // The event handler functions are defined in handlers.js file_queued_handler : fileQueued, file_queue_error_handler : fileQueueError, file_dialog_complete_handler : fileDialogComplete, upload_start_handler : uploadStart, upload_progress_handler : uploadProgress, upload_error_handler : uploadError, upload_success_handler : uploadSuccess, upload_complete_handler : uploadComplete, queue_complete_handler : my_queueComplete // Queue plugin event }; swfu = new SWFUpload(settings); }; </script> <script type="text/javascript"> function my_queueComplete(){ var status = document.getElementById("divStatus"); $("#divStatus").html("上传时间有点长请耐心等待!<img src='__PUBLIC__/images/loading.gif' />"); $("#divStatus").html("上传成功!"); setTimeout(function(){ parent.location.reload(); //location.href = '__APP__/Index/index'; //parent.location.reload(); //parent.layer.close(Index/index); //location.href = '__APP__/Index/index'; },1500); } </script> <style type="text/css"> #file_up { background-color:#E4E4E4; width:200px; height:auto; } #texthit{ color :red; height:50px; display :none; } ul li{ list-style:none; } .am-btn{width:100%;} #avatar_view{margin-top:10px;} #coverfile{opacity:0;position:absolute;top:0px;left:0px;} #up_btn{cursor:pointer;} td{text-align: left;font-size: 14px;margin-left: 5px;} .xubox_setwin .xubox_close1{right: -10px;top: -12px;} </style> </head> <body> <div id="content"style="width: 410px;margin:20px 10px;"> <div> <form id="form1"action="__APP__/Index/upload"method="post" enctype="multipart/form-data"> <div class="fieldset flash"id="fsUploadProgress"> <span class="legend"style="color:#0088cc;">Upload CSV</span> </div> <!-- <div id="divStatus"style="margin-bottom: 5px;">0 Files Uploaded</div> --> <div> <span id="spanButtonPlaceHolder"></span> <input id="btnCancel" type="button"value="Cancel All Uploads" onclick="swfu.cancelQueue();"disabled="disabled" style="margin-left: 2px; font-size: 8pt; height: 29px;"/> </div> </form> </div> <span class="xubox_setwin"><a id="closebtn"class="xubox_close xulayer_png32 xubox_close0 xubox_close1"href="javascript:;"style=""></a></span> <div id="texthit"></div> <!-- <div id="file_up"> 如果你今天已上传过文件,请先点击<button id="click">这里</button>删除之前的文件,<Font color=red>请慎重点</Font> </div> --> </div> <script type="text/javascript"> //在iframe中关闭自身 var index = parent.layer.getFrameIndex(window.name); //获取当前窗体索引 $('#closebtn').on('click', function(){ parent.layer.close(index); //执行关闭 }); </script> </body> </html>
<?php $val_arr = implode(",",$values_arr); $title = 'Parallel Coordinates Title'; ?> <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Highcharts Exporting Server</title> <meta name="description"content="Highcharts Exporting Server"/> <link rel="stylesheet"type="text/css"href="__PUBLIC__/css/easyui.css"> <link rel="stylesheet"type="text/css"href="__PUBLIC__/css/icon.css"> <link rel="stylesheet"type="text/css"href="__PUBLIC__/css/demo.css"> <link rel="stylesheet"type="text/css"href="__PUBLIC__/css/checktu.css"> <script type="text/javascript"src="__PUBLIC__/Js/jquery-1.8.3.min.js"></script> <script type="text/javascript"src="__PUBLIC__/Js/jquery.easyui.min.js"></script> <script> </script> <style type="text/css"> .highcharts-title{ font-size: 18px!important; } .searchbox { width: 98%!important; } .searchbox input{ width: 89%!important; } </style> <script type="text/javascript"src="__PUBLIC__/Js/highcharts.src.js"></script> <script type="text/javascript"> var option; var callBackChartObj = { chart: { renderTo:"container" }, title: { useHTML: true, text: 'title', }, credits:{ //不显示版权信息 enabled:false }, exporting:{ //导出模板不可用 enabled:false }, xAxis: { gridLineWidth: 1, lineColor: '#000', tickColor: '#000', categories: <?php echo $x ?> }, yAxis: { minorTickInterval: 'auto', lineColor: '#000', lineWidth: 1, tickWidth: 1, tickColor: '#000', title: { text: 'sw', }, lineWidth: 0.5, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, legend:{ //关闭图例 enabled:false, <?php echo $byby;?> }, plotOptions:{ //设置数据点 line:{ dataLabels:{ enabled:false //在数据点上显示对应的数据值 }, enableMouseTracking: false //取消鼠标滑向触发提示框 }, series: { marker: { radius: 3, //曲线点半径,默认是4 symbol: 'circle', }, events: { legendItemClick: function (event) { ControlLegendShow(this); return false; } }, lineWidth: 1, cursor: 'pointer' } }, series:<?php echo $sum;?> } function setChart() { setTimeout(lol,50); function lol(){ $("#desc").html(''); var ck=$(".selectitem").html(); var c = ck.replace(/,/g,'$').replace(/ +/g,"_").replace(///g,"$"); var op=option.legend; var co=op[c]; var j=co.count.length; var os= option.series; for(var i=0;i<os.length;i++){ var item=option.series[i][c]; option.series[i].name=item; option.series[i].visible=true; //替换 var t ="$"+item.replace(/./g,'$').replace(/ +/g,"_").replace(/-/g,"$"); option.series[i].color=co[t].color; } $('#container').highcharts(option); var o=option.legend[c]; for(var i=0; i< o.count.length; i++){ $("#desc").append("<tr><td style='background-color:"+o.colors[i]+"; width:50px; color:#fff;'>"+ o.count[i]+"</td><td class='selectitem selcolor'>"+o.desc[i]+"</td></tr>"); } selectcolor(); var ax=$("#container").highcharts(); } } $(function () { option = eval(callBackChartObj); setChart(); $("#seletColor li").mouseenter(function(){ $(this).addClass("protertyhover"); }).mouseleave(function(){ $(this).removeClass("protertyhover"); }); $("#seletColor li").click(function(){ $("#seletColor li").removeClass("selectitem"); $(this).addClass("selectitem"); $("#desc").html(''); var ck=$(".selectitem").html(); var c = ck.replace(/,/g,'$').replace(/ +/g,"_").replace(///g,"$"); var op=option.legend; var co=op[c]; var j=co.count.length; for(var i=0; i<j; i++){ $("#desc").append("<tr><td style='background-color:"+co.colors[i]+"; width:50px; color:#fff;'>"+ co.count[i]+"</td><td class='selectitem selcolor'>"+co.desc[i]+"</td></tr>"); } var os= option.series; for(var i=0;i<os.length;i++){ var item=option.series[i][c]; option.series[i].name=item; option.series[i].visible=true; var t="$"+item.replace(/./g,'$').replace("","_").replace(/-/g,"$"); option.series[i].color=co[t].color; } $('#container').highcharts(option); selectcolor(); }); $("#desc tr").mouseenter(function(){ $(this).addClass("protertyhover"); }).mouseleave(function(){ $(this).removeClass("protertyhover"); }); }); function selectcolor(){ $(".selcolor").click(function(e) { $(this).toggleClass("selectitem"); var selectdesc=$(this).html(); var s=option.series; for(var i=0;i<s.length ;i++) { if(s[i].name==selectdesc){ if (option.series[i].visible) { option.series[i].visible=false; } else { option.series[i].visible=true; } } } $('#container').highcharts(option); }); } function doSearch(value){ var value_arr = '{$val_arr}'; $.post("{:U('tu_search')}",{'value':value,'value_arr':value_arr} ,function(data){ $('#seletColor ul').html(data.info); if( typeof callback === 'function' ){ //执行回调 callback(data) ; }else{ //alert(data.info, data.status) ; //风格一 if(data.info){ option = eval(callBackChartObj); setChart(); $("#seletColor li").mouseenter(function(){ $(this).addClass("protertyhover"); }).mouseleave(function(){ $(this).removeClass("protertyhover"); }); $("#seletColor li").click(function(){ $("#seletColor li").removeClass("selectitem"); $(this).addClass("selectitem"); $("#desc").html(''); var ck=$(".selectitem").html(); var c = ck.replace(/,/g,'$').replace(/ +/g,"_").replace(///g,"$"); var op=option.legend; var co=op[c]; var j=co.count.length; for(var i=0; i<j; i++){ $("#desc").append("<tr><td style='background-color:"+co.colors[i]+"; width:50px; color:#fff;'>"+ co.count[i]+"</td><td class='selectitem selcolor'>"+co.desc[i]+"</td></tr>"); } var os= option.series; for(var i=0;i<os.length;i++){ var item=option.series[i][c]; option.series[i].name=item; option.series[i].visible=true; var t="$"+item.replace(/./g,'$').replace("","_").replace(/-/g,"$"); option.series[i].color=co[t].color; } $('#container').highcharts(option); selectcolor(); }); $("#desc tr").mouseenter(function(){ $(this).addClass("protertyhover"); }).mouseleave(function(){ $(this).removeClass("protertyhover"); }); }else{ alert('没有找到含有'+value+'的项'); } } },"json"); } function cltit(){ var title = { text:"我是新标题", style:{ fontSize: '16px' } }; var chart = $("#container").highcharts(); chart.setTitle(title); } </script> </head> <body> <div data-options="region:'center'"> <div id="container"style="height:450px;min-width:500px;"></div> <span style="position: absolute;color: rgb(51, 51, 51);margin-left: 0px;margin-top: 0px;left: 441px;top: 7px;"><input type="text"value="Parallel Coordinates Title"style="font-size:18px;width:340px;padding:2px 5px;text-align: center;"></span> <divstyle="margin-right:5px;padding: 0 9px;"> <tablestyle='font-size:13px;margin-top:2px;'> <tr> <th>#</th> <th style="width:74.8%;">Test Name</th> <th style="width:9.6%;">Average</th> <th style="width:9.6%;">Std.Est.</th> <th style="width:2%;"></th> </tr> </table> <divstyle="max-height:143px; overflow-y:scroll;"> <tablestyle='font-size:12px'> <volist name="_list"id="vo"key="k"> <tr> <td>{$k}</td> <td style="width:76%;"> {$top_data[$vo]}</td> <td style="width:10%;">{$ssvv[$k-1]}</td> <td style="width:10%;">{$ssccbb[$k-1]}</td> </tr> </volist> </table> </div> </div> </div> <div data-options="region:'east',iconCls:'icon-reload',split:true"style="width:250px;"> <ul> <li>Color By Items </li> <li> <inputdata-options="prompt:'Search',searcher:doSearch"style="font-size:13px;"></input> </li> <li id="seletColor"class="proterty"style="height:280px; overflow-y:scroll;"> <ul> <volist name="values_arr"id="vo"key="k"> <?php $vo = str_replace("&",",", $vo); if ($k == 1) { echo"<li>".$vo."</li>"; }else{ echo"<li>".$vo."</li>"; } ?> </volist> </ul> </li> <li>Details</li> <li id="seletColor"class="proterty"style="height:240px; overflow-y:scroll;"> <table id="desc"class="p_02"> </table> </li> </ul> </div> </body> </html>