<%@ page language="java" pageEncoding="utf-8"%>
<%@page import="org.springframework.security.core.context.SecurityContextHolder"%>
<%@page import="com.klspta.console.user.User"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
Object principal = SecurityContextHolder.getContext().getAuthentication().getPrincipal();
String userid =((User) principal).getUserID();
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<%@ include file="/base/include/dhx.jspf"%>
<%@ include file="/base/include/restRequest.jspf" %>
<style>
#chart_container2{
margin-left:200px;
margin-top:0px;
width:1000px;
height:400px;
border:1px;
solid #A4BED4;
}
font{
font-family:"宋体";
font-size:20px;
margin-left:47%;
margin-top:30px;
}
</style>
<script>
function doOnLoad(){
var dataset_colors = [
{ id:1, sales:20, year:"02", color: "#ee4339",region:"厦门市"},
{ id:2, sales:55, year:"03", color: "#ee9336",region:"思明区"},
{ id:3, sales:40, year:"04", color: "#eed236",region:"湖里区"},
{ id:4, sales:78, year:"05", color: "#d3ee36",region:"海沧区"},
{ id:5, sales:111, year:"06", color: "#a7ee70",region:"集美区"},
{ id:6, sales:35, year:"07", color: "#58dccd",region:"同安区"},
{ id:7, sales:80, year:"08", color: "#36abee",region:"翔安区"},
];
var barChart2 = new dhtmlXChart({
view:"bar",
container:"chart_container2",
label:"#sales#",
value:"#sales#",
color:"#color#", //"color" property in data
border:false,
barWidth:40,
alpha:0.2,
radius:0,
//line:{ color:"#a244ea" },
xAxis:{
template:"'#region#"
},
yAxis:{
start:0,
end:100,
step:10,
template:function(obj){
return (obj%20?"":obj)
}
}
});
barChart2.parse(dataset_colors,"json");
/*mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath('/domain/base/thirdres/dhtmlx4/codebase/imgs');
mygrid.setSkin("dhx_skyblue");
mygrid.enableSmartRendering(true);
mygrid.setHeader("|导出|,厦门市,思明区,海沧区,湖里区,集美区,同安区,翔安区");
mygrid.setInitWidths("40,80,80,80,80,80,80,80");
mygrid.setColAlign("left,left,left,left,left,left,left,left");
mygrid.setColTypes("ro,ro,ro,ro,ro,ro,ro,ro");
mygrid.setColSorting("str,str,str,str,str,str,str,str");
mygrid.load("<%=basePath%>/service/rest/xfjbrw/getXfjbDhcAndHczList?status="+status+"&userId=<%=userid%>&userName=<%=userName%>","json");*/
}
</script>
</head>
<body οnlοad="doOnLoad()">
<div><font>巡查记录情况</font></div>
<div id="chart_container2"></div>
<div id="gridbox"></div>
</body>
</html>
=========================解析=============================
var barChart2 = new dhtmlXChart({
view:"bar", //
gradient:'3d',
container:"chart_container2", //要被渲染到地方,一般body里定义了一个div 里的id “chart_container2”label:"#sales#", //是显示的文字,加#是加载data中的sales变量名
value:"#sales#", //必须加#,以加载data中的数据
color:"#color#", // 同上
border:false,
barWidth:40,
alpha:0.2, //透明度
radius:0,
加载数据时用parse