csv文件画图

程序员文章站 2024-01-05 14:14:58

...

在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>

csv文件画图

使用maven profile指定配置文件打包适用多环境的方法

使用java自带des加密算法实现文件加密和字符串加密

JS+Struts2多文件上传实例详解

Java对文本文件MD5加密并ftp传送到远程主机目录的实现方法

Maven根据不同环境打包不同配置文件的方法

JavaBean实现多文件上传的两种方法

Struts2+uploadify多文件上传实例

java多线程下载文件原理解析

Spring boot按日切分spring boot的nohup.out日志文件的方法

使用socket进行服务端与客户端传文件的方法