suchen

Heim  >  Artikel  >  php教程  >  csv文件画图

csv文件画图

PHP中文网
PHP中文网Original
2016-05-22 18:27:011402Durchsuche

在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>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：php 正则只保留 汉字 字母 数字 Nächster Artikel：基于php的基金财务数据接口调用代码实例

In Verbindung stehende Artikel

Mehr sehen