当前位置:编程学习 > html/css >>

Highcharts将数据以图表的形式展现

1、首先将Highcharts插件所需的js跟css样式文件引入项目中,下载地址为:Highcharts.rar

2、在前台页面中添加一个存放图表的容器


[html]
<div id="container" style="min-width: 400px; height: 500px; margin: 0 auto"></div> 

<div id="container" style="min-width: 400px; height: 500px; margin: 0 auto"></div>
3、在后台拼接json数据


[java]
@Action("ycccBarGramData") 
   public void ycccBarGramData() { 
       try { 
           String nyStr = FormatDate.getNyStr(tjksny, tjjsny); 
           List<Map<String, Object>> resultList = this.ycccService.getYcccList(nyStr, jgdm); 
           if (resultList != null && resultList.size() > 0) { 
               String yValue = ""; 
               String yData = ""; 
               Map<String, Object> data = resultList.get(0); 
               String[] params = new String[]{"YCZS", "WCLS", "YFKWCLS", "RQS", "JDWCLS", "YJDBLS", "YJDQSHQRS", "ZS"}; 
               for (int i = 0; i < params.length; i++) { 
                   yData += data.get(params[i]) + ","; 
               } 
               yData = yData.substring(0, yData.length() - 1); 
               yValue += "{type:'column',name:'" + data.get("JGMC") + "',data:[" + yData + "]}"; 
               StringBuffer arrJson = new StringBuffer("{"); 
               arrJson.append("\"iSucc\":true"); 
               arrJson.append(",\"title\":\"异常查处分布图(" + tjksny + "至" + tjjsny + ")\""); 
               arrJson.append(",\"subTitle\":\"(" + tjksny + "至" + tjjsny + ")\""); 
               arrJson.append(",\"yTitle\":\"异常查处数\""); 
               arrJson.append(",\"xValue\":\"['异常总数','未处理数','已反馈未处理数','日清数','监督未处理数','已监督办理数','已监督且审核确认数','总数']\""); 
               arrJson.append(",\"yValue\":\"[" + yValue + "]\""); 
               arrJson.append("}"); 
               this.renderHtml(arrJson.toString()); 
           } else { 
               this.renderHtml("{\"iSucc\":false,\"noData\":true}"); 
           } 
       } catch (Exception e) { 
           this.renderHtml("{\"iSucc\":false}"); 
           e.printStackTrace(); 
       } 
   } 

 @Action("ycccBarGramData")
    public void ycccBarGramData() {
        try {
            String nyStr = FormatDate.getNyStr(tjksny, tjjsny);
            List<Map<String, Object>> resultList = this.ycccService.getYcccList(nyStr, jgdm);
            if (resultList != null && resultList.size() > 0) {
                String yValue = "";
                String yData = "";
                Map<String, Object> data = resultList.get(0);
                String[] params = new String[]{"YCZS", "WCLS", "YFKWCLS", "RQS", "JDWCLS", "YJDBLS", "YJDQSHQRS", "ZS"};
                for (int i = 0; i < params.length; i++) {
                    yData += data.get(params[i]) + ",";
                }
                yData = yData.substring(0, yData.length() - 1);
                yValue += "{type:'column',name:'" + data.get("JGMC") + "',data:[" + yData + "]}";
                StringBuffer arrJson = new StringBuffer("{");
                arrJson.append("\"iSucc\":true");
                arrJson.append(",\"title\":\"异常查处分布图(" + tjksny + "至" + tjjsny + ")\"");
                arrJson.append(",\"subTitle\":\"(" + tjksny + "至" + tjjsny + ")\"");
                arrJson.append(",\"yTitle\":\"异常查处数\"");
             

补充:web前端 , HTML/CSS  ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,