网站地图    收藏   

子栏目

主页 > 前端 > css教程 >

Highcharts将数据以图表的形式展现 - html/css语言栏

来源：自学PHP网    时间：2015-04-14 14:51 作者： 阅读:次

[导读] 1、首先将Highcharts插件所需的js跟css样式文件引入项目中，下载地址为：Highcharts.rar2、在前台页面中添加一个存放图表的容器[html]div id=container style=min-width: 400px; height: 500px; margi......

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\":\"异常查处数\"");
                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();
        }
    }
4、在前台页面中接受后台传过去的json数据


[java]
$(function () { 
        var tjksny = "<#if tjksny??>${tjksny}</#if>"; 
        var tjjsny = "<#if tjjsny??>${tjjsny}</#if>"; 
        var jgdm = "<#if jgdm??>${jgdm}</#if>"; 
        $.post( 
                "${base}/fxyp/ycccBarGramData", 
                { 
                    "tjksny":tjksny, 
                    "tjjsny":tjjsny, 
                    "jgdm":jgdm 
                }, 
                function (data) { 
                    var json = eval("(" + data + ")"); 
                    initBarDate(json.title, json.subTitle, json.yTitle, json.xValue, json.yValue); 
                }); 
    }); 
 
    function initBarDate(title, subTitle, yTitle, xValue, yValue) { 
        //获取图标系统所有颜色  
        var colors = Highcharts.getOptions().colors; 
        //初始化图标  
        chart = new Highcharts.Chart({ 
            chart:{ 
                renderTo:'container', //返回id为container容器  
                defaultSeriesType:'column', //返回样式  
                marginTop:105, //图标距离上方距离  
                marginRight:15, 
                type:'column' 
            }, 
            title:{ 
                text:'<span style="font-size:13px;">' + title + '</span>'               //标题  
            }, 
            subtitle:{                         //子标题  
                text:'<span style="color:red">' + subTitle + '</span>', 
                floating:true 
            }, 
            xAxis:{                          //x轴数据构造  
                categories:eval('(' + xValue + ')'), 
                title:{ 
                    text:'异常类型' 
                }, 
                labels:{ 
                    rotation:-45, 
                    align:'right', 
                    style:{ 
                        fontSize:'13px', 
                        fontFamily:'Verdana, sans-serif' 
                    } 
                } 
            }, 
            yAxis:{ 
                min:0, 
                title:{ 
                    text:'异常数量' 
                } 
            }, 
            tooltip:{ 
                formatter:function () { 
                    return '' + 
                            this.x + ': ' + this.y; 
                } 
            }, 
            plotOptions:{ 
                column:{ 
                    pointPadding:0.2, 
                    borderWidth:0, 
                    dataLabels:{ 
                        enabled:true, 
                        color:colors[0], 
                        style:{ 
                            fontWeight:'bold' 
                        }, 
                        formatter:function () { 
                            return this.y; 
                        } 
                    } 
                } 
            }, 
            legend:{ 
                layout:'vertical', //【图例】显示的样式：水平（horizontal）/垂直（vertical）  
                backgroundColor:'#FFFFFF', 
                borderColor:'#CCC', 
                borderWidth:1, 
                align:'right', 
                verticalAlign:'top', 
                enabled:true, 
                y:35, 
                shadow:true, 
                floating:true 
            }, 
            credits:{ 
                enabled:true 
            }, 
            exporting:{                     //导出  
                filename:"chart", 
                type:"image/png", 
                url:'${base}/system/dwzxt/download' 
            }, 
            series:eval('(' + yValue + ')') 
        }); 
    } 

$(function () {
        var tjksny = "<#if tjksny??>${tjksny}</#if>";
        var tjjsny = "<#if tjjsny??>${tjjsny}</#if>";
        var jgdm = "<#if jgdm??>${jgdm}</#if>";
        $.post(
                "${base}/fxyp/ycccBarGramData",
                {
                    "tjksny":tjksny,
                    "tjjsny":tjjsny,
                    "jgdm":jgdm
                },
                function (data) {
                    var json = eval("(" + data + ")");
                    initBarDate(json.title, json.subTitle, json.yTitle, json.xValue, json.yValue);
                });
    });

    function initBarDate(title, subTitle, yTitle, xValue, yValue) {
        //获取图标系统所有颜色
        var colors = Highcharts.getOptions().colors;
        //初始化图标
        chart = new Highcharts.Chart({
            chart:{
                renderTo:'container', //返回id为container容器
                defaultSeriesType:'column', //返回样式
                marginTop:105, //图标距离上方距离
                marginRight:15,
                type:'column'
            },
            title:{
                text:'<span style="font-size:13px;">' + title + '</span>'               //标题
            },
            subtitle:{                         //子标题
                text:'<span style="color:red">' + subTitle + '</span>',
                floating:true
            },
            xAxis:{                          //x轴数据构造
                categories:eval('(' + xValue + ')'),
                title:{
                    text:'异常类型'
                },
                labels:{
                    rotation:-45,
                    align:'right',
                    style:{
                        fontSize:'13px',
                        fontFamily:'Verdana, sans-serif'
                    }
                }
            },
            yAxis:{
                min:0,
                title:{
                    text:'异常数量'
                }
            },
            tooltip:{
                formatter:function () {
                    return '' +
                            this.x + ': ' + this.y;
                }
            },
            plotOptions:{
                column:{
                    pointPadding:0.2,
                    borderWidth:0,
                    dataLabels:{
                        enabled:true,
                        color:colors[0],
                        style:{
                            fontWeight:'bold'
                        },
                        formatter:function () {
                            return this.y;
                        }
                    }
                }
            },
            legend:{
                layout:'vertical', //【图例】显示的样式：水平（horizontal）/垂直（vertical）
                backgroundColor:'#FFFFFF',
                borderColor:'#CCC',
                borderWidth:1,
                align:'right',
                verticalAlign:'top',
                enabled:true,
                y:35,
                shadow:true,
                floating:true
            },
            credits:{
                enabled:true
            },
            exporting:{                     //导出
                filename:"chart",
                type:"image/png",
                url:'${base}/system/dwzxt/download'
            },
            series:eval('(' + yValue + ')')
        });
    }

 

[html]
<PRE></PRE> 
<PRE></PRE> 
<PRE></PRE> 

 


 

最新评论

    加载更多~~

    添加评论

    更多文章推荐

    自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习

    京ICP备14009008号-1@版权所有www.zixuephp.com

    网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com

    添加评论