搜索

首页  >  文章  >  php教程  >  csv文件画图

csv文件画图

PHP中文网
PHP中文网原创
2016-05-22 18:27:011401浏览

在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=&#39;./Public/header&#39;/> 
<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 : &#39;<span class="theFont">上传</span>&#39;,
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=&#39;__PUBLIC__/images/loading.gif&#39; />");
$("#divStatus").html("上传成功！");
setTimeout(function(){
parent.location.reload();
 //location.href = &#39;__APP__/Index/index&#39;;
//parent.location.reload();
//parent.layer.close(Index/index);
 //location.href = &#39;__APP__/Index/index&#39;; 
},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); //获取当前窗体索引
$(&#39;#closebtn&#39;).on(&#39;click&#39;, function(){
 parent.layer.close(index); //执行关闭
});
</script>
</body>
</html>
<?php
 $val_arr = implode(",",$values_arr);
 $title = &#39;Parallel Coordinates Title&#39;;
?>
<!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: &#39;title&#39;,
},
credits:{
//不显示版权信息
enabled:false
},
exporting:{
//导出模板不可用
enabled:false
},
 xAxis: {
 gridLineWidth: 1,
 lineColor: &#39;#000&#39;,
 tickColor: &#39;#000&#39;,
 categories: <?php echo $x ?>

},
 yAxis: {
 minorTickInterval: &#39;auto&#39;,
 lineColor: &#39;#000&#39;,
 lineWidth: 1,
 tickWidth: 1,
 tickColor: &#39;#000&#39;,
 title: {
 text: &#39;sw&#39;,
},
 lineWidth: 0.5,
 plotLines: [{
 value: 0,
 width: 1,
 color: &#39;#808080&#39;
}]
},
legend:{
//关闭图例
enabled:false,
 <?php echo $byby;?>

},
 plotOptions:{ //设置数据点
line:{
dataLabels:{
 enabled:false //在数据点上显示对应的数据值
},
 enableMouseTracking: false //取消鼠标滑向触发提示框
},
 series: {
 marker: {
 radius: 3, //曲线点半径，默认是4
 symbol: &#39;circle&#39;,
},
 events: {
 legendItemClick: function (event) {
ControlLegendShow(this);
 return false;
}
},
 lineWidth: 1,
 cursor: &#39;pointer&#39;
}
},
 series:<?php echo $sum;?>
}
 function setChart() { 
setTimeout(lol,50);

 function lol(){
$("#desc").html(&#39;&#39;);
 var ck=$(".selectitem").html();
 var c = ck.replace(/,/g,&#39;$&#39;).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,&#39;$&#39;).replace(/ +/g,"_").replace(/-/g,"$");
option.series[i].color=co[t].color;
}
$(&#39;#container&#39;).highcharts(option);
 var o=option.legend[c]; 
 for(var i=0; i< o.count.length; i++){
 $("#desc").append("<tr><td style=&#39;background-color:"+o.colors[i]+"; width:50px; color:#fff;&#39;>"+ o.count[i]+"</td><td class=&#39;selectitem selcolor&#39;>"+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(&#39;&#39;);
 var ck=$(".selectitem").html();
 var c = ck.replace(/,/g,&#39;$&#39;).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=&#39;background-color:"+co.colors[i]+"; width:50px; color:#fff;&#39;>"+ co.count[i]+"</td><td class=&#39;selectitem selcolor&#39;>"+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,&#39;$&#39;).replace("","_").replace(/-/g,"$");
option.series[i].color=co[t].color;
}
$(&#39;#container&#39;).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;
}
}
}
$(&#39;#container&#39;).highcharts(option);
});

}

 function doSearch(value){
 var value_arr = &#39;{$val_arr}&#39;;
 $.post("{:U(&#39;tu_search&#39;)}",{&#39;value&#39;:value,&#39;value_arr&#39;:value_arr} ,function(data){ 
 $(&#39;#seletColor ul&#39;).html(data.info);
 if( typeof callback === &#39;function&#39; ){
//执行回调
 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(&#39;&#39;);
 var ck=$(".selectitem").html();
 var c = ck.replace(/,/g,&#39;$&#39;).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=&#39;background-color:"+co.colors[i]+"; width:50px; color:#fff;&#39;>"+ co.count[i]+"</td><td class=&#39;selectitem selcolor&#39;>"+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,&#39;$&#39;).replace("","_").replace(/-/g,"$");
option.series[i].color=co[t].color;
}
$(&#39;#container&#39;).highcharts(option);
selectcolor();
});

 $("#desc tr").mouseenter(function(){
$(this).addClass("protertyhover");
}).mouseleave(function(){
$(this).removeClass("protertyhover");
});
}else{
alert(&#39;没有找到含有&#39;+value+&#39;的项&#39;);
}
}
 },"json"); 
}
function cltit(){
var title = {
text:"我是新标题",
style:{
 fontSize: &#39;16px&#39;
}
};
var chart = $("#container").highcharts();
chart.setTitle(title);
}
</script>
</head>

<body>
<div data-options="region:&#39;center&#39;">
 <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=&#39;font-size:13px;margin-top:2px;&#39;>
<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=&#39;font-size:12px&#39;>
 <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:&#39;east&#39;,iconCls:&#39;icon-reload&#39;,split:true"style="width:250px;">
<ul>
 <li>Color By Items </li>
<li>
 <inputdata-options="prompt:&#39;Search&#39;,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>
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：php 正则只保留 汉字 字母 数字 下一篇：基于php的基金财务数据接口调用代码实例

相关文章

查看更多