dhtmlx的chart开发整理

<%@ 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


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值