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