<%@ page language="java" contentType="text/html; charset=UTF-8"
|
pageEncoding="UTF-8"%>
|
<%@page import="com.yc.sdk.shopping.util.SettingKey"%>
|
<%
|
String url_grid = SettingKey.getHostUrl(request)
|
+ request.getContextPath() + "/";
|
%>
|
<script type="text/javascript" src="/Grid/GridE.js?v=<%=com.yc.utils.FileUtil.getVerstion(request,"/Grid/GridE.js")%>"></script>
|
<!-- 1. Add these JavaScript inclusions in the head of your page -->
|
<script type="text/javascript"
|
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
|
|
<script type="text/javascript" src="<%=url_grid %>/js/Highcharts/code/highcharts.js?v=<%=com.yc.utils.FileUtil.getVerstion(request,"/js/Highcharts/code/highcharts.js")%>"></script>
|
<!-- 1b) Optional: the exporting module
|
<script type="text/javascript" src="<%=url_grid %>/js/Highcharts/code/modules/exporting.js?v=<%=com.yc.utils.FileUtil.getVerstion(request,"/js/Highcharts/code/modules/exporting.js")%>"></script>-->
|
<!-- 2. Add the JavaScript to initialize the chart on document ready -->
|
<script type="text/javascript" src="<%=url_grid %>/js/chart38.js?v=<%=com.yc.utils.FileUtil.getVerstion(request,"/js/chart38.js")%>"></script>
|
<!-- 3. Add the JavaScript to initialize the chart on document ready -->
|
<style type="text/css">
|
.ul_p {
|
float: left;
|
height: 21px;
|
_overflow: hidden;
|
zoom: 1;
|
}
|
|
.ul_p li {
|
float: left;
|
width: 40px;
|
height: 20px;
|
text-align: center;
|
}
|
|
.check_p {
|
float: left;
|
width: 240px;
|
height: 20px;
|
}
|
|
.show_div {
|
width: 98%;
|
height: 240px;
|
border: 1px solid white;
|
display: none;
|
position: absolute;
|
}
|
|
.div_miaoshu {
|
margin-top: 10px;
|
width: 98%;
|
height: 200px;
|
}
|
</style>
|
<script>
|
function showDiv(th,showId){
|
var topH=334;
|
$('#'+showId).show();
|
$('#'+showId).css('top',(parseInt($('#'+th).css('height'))+topH));
|
var cor="#DEEDF7";
|
$('#'+th).css('background',cor);
|
$('#'+showId).css('background',cor)
|
}
|
function hideDiv(id,kId){
|
$('#'+id).hide();
|
$('#'+kId).css('background','#FFF');
|
}
|
</script>
|
<!-- <div>
|
<span style="margin-left: 5px;"><img
|
src="/style/default/images/layout_button_down.gif"
|
onclick="parent.goBack();" style="cursor: pointer;"></span><span
|
style="margin-right: 5px; float: right;"><img
|
src="/style/default/images/layout_button_down.gif"
|
onclick="parent.goBack();" style="cursor: pointer;"></span>
|
</div> -->
|
<div>
|
<span style="margin-left: 10px;"><a onclick="parent.goBack();" style="cursor: pointer;"><img
|
src="/images/QQ20170511150152.png"
|
style="cursor: pointer;">返回</a></span>
|
</div>
|
<div id="grap" style="width: 98%; height: 300px;"></div>
|
<div id="select_grap" style="font-size: 12px;">
|
<ul id="char_p" class="ul_p">
|
<li id="kongId" onmouseover="showDiv('kongId','tuDiv');"
|
onmouseout="hideDiv('tuDiv','kongId');"><a
|
href="javascript:void(0);">图型</a></li>
|
<li id="kongIdx" onmouseover="showDiv('kongIdx','xDiv');"
|
onmouseout="hideDiv('xDiv','kongIdx');"><a
|
href="javascript:void(0);">X轴值</a></li>
|
<li id="kongIdy" onmouseover="showDiv('kongIdy','yDiv');"
|
onmouseout="hideDiv('yDiv','kongIdy');"><a
|
href="javascript:void(0);">Y轴值</a></li>
|
<li style="width: 50px;">对调<input type="checkbox" onclick="xy()"></li>
|
</ul>
|
</div>
|
<div id="tuDiv" onmouseout="hideDiv('tuDiv','kongId');"
|
onmouseover="showDiv('kongId','tuDiv');" class="show_div">
|
<div class="div_miaoshu">
|
<input type="radio" name="ptoType" onclick="charTo('line');"
|
checked="checked">曲线 <input type="radio" name="ptoType"
|
onclick="charTo('column');">条形分组 <input type="radio"
|
name="ptoType" onclick="charTo('columnD');">条形叠加 <input
|
type="radio" name="ptoType" onclick="charTo('pieD');">饼图叠加
|
</div>
|
</div>
|
<div id="xDiv" onmouseout="hideDiv('xDiv','kongIdx');"
|
onmouseover="showDiv('kongIdx','xDiv');" class="show_div">
|
<div id="xKong" class="div_miaoshu"></div>
|
<div style="width: 100%; float: left;">说明：请勾单选框的值为字符串的，此值作为X轴描述用，顾选择字符串值的字段才能实现画图的描述信息。</div>
|
</div>
|
<div id="yDiv" onmouseout="hideDiv('yDiv','kongIdy');"
|
onmouseover="showDiv('kongIdy','yDiv');" class="show_div">
|
<div id="yKong" class="div_miaoshu"></div>
|
<div style="width: 100%; float: left;">说明：请勾复选框的值为数据的，才能实现画图的依据。</div>
|
</div>
|
<div id="grid_container" style="width: 98%; height: 36%;"></div>
|
<script>
|
parent.mygrid=TreeGrid("${data}","grid_container");
|
document.onkeydown = parent.hotkey;
|
var grapht=${JSdata};<%//图表数据集数组,调用形式：grapht[0].Companyname%>
|
var dataX="${dataX}";<%// int类型字段%>
|
var dataY="${dataY}";<%// String类型字段%>
|
function charTo(type){
|
parameter.type=type;
|
draw(grapht);
|
}
|
function xMiaoTo(id){
|
parameter.showId=id;
|
draw(grapht);
|
}
|
function xy(){
|
parameter.die=!parameter.die;
|
draw(grapht);
|
}
|
function yValueTo(checsName){
|
var checks=document.getElementsByName(checsName);
|
var v;var j=0;
|
parameter.vs=[];
|
for(i=0;i<checks.length;i++){
|
if(checks[i].checked){
|
v=checks[i].value.split(";");
|
parameter.vs[j]={};
|
parameter.vs[j].drawId=v[0];
|
parameter.vs[j].drawM=v[1];
|
j++;
|
}
|
}
|
draw(grapht);
|
}
|
(function(){
|
var showSelct=function(){
|
var fenge="'";//"|"
|
var datalist=(parent.document.getElementById('datalist').value).split(fenge);
|
var selHtml="";var option="";var opInfo;
|
var checkOps="";
|
var checked=""
|
var toX_=true;
|
var toY_=true;
|
for(var i=0;i<datalist.length;i++){
|
opInfo=datalist[i].split(",");
|
if(dataX.indexOf(';'+opInfo[1]+';')!=-1){<%//如果不是 数字类型%>
|
//checked="";
|
if(toY_){<%//并且是第一个数字 作为画图%>
|
var i_=0;
|
parameter.vs[i_]={};
|
parameter.vs[i_].drawM=opInfo[3];
|
parameter.vs[i_].drawId=opInfo[1];
|
toY_=false;
|
}
|
checked="checked";
|
checkOps+="<span class='check_p'><input type='checkbox' value='"+opInfo[1]+";"+opInfo[3]+"' name='checkVas' onclick=\"yValueTo('checkVas')\" "+checked+">"+opInfo[3]+"</span>";
|
}else{
|
if(toX_){<%//并且是第一个 显示为描述%>
|
parameter.showId = opInfo[1];
|
toX_ = false;
|
}
|
option += "<span class='check_p'><input type='radio' name='char_x_value' onclick=\"xMiaoTo('"
|
+ opInfo[1]
|
+ "');\" "
|
+ ((i == 0) ? "checked" : "")
|
+ ">"
|
+ opInfo[3]
|
+ "</span>";
|
}
|
}
|
$('#xKong').html(option);
|
$('#yKong').html(checkOps);
|
}
|
showSelct();
|
parameter.type = "line";
|
draw(grapht);
|
yValueTo('checkVas');
|
})();
|
</script>
|
