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