highCharts图表入门实例

本文通过讲解Highcharts生成一个简单的3D柱状图实例来学习Highcharts的使用。

　　JSP 页面

　　1、需要引入的js文件

<script src="<%=basePath%>javascript/jquery-1.6.1.js"></script>
<script src="<%=basePath%>javascript/wiassess/highCharts4.0.3/highcharts.js"></script>
<script src="<%=basePath%>javascript/wiassess/highCharts4.0.3/highcharts-3d.js"></script>
<script src="<%=basePath%>javascript/wiassess/highCharts4.0.3/modules/exporting.js"></script>

2、javascript

<script type="text/javascript">
function Query(){
 /* 省略tradTp,county,nature等参数的获取过程 */
         $.ajax({
            type:"post",
            dataType:"json",
             data: {"project.tradTp":tradTp,"project.county":county,"project.projNature":nature,"project.replDtS":replDtS,"project.replDtE":replDtE,"project.chartTp":chartTp},  //参数列表
            async:false,
            url:"<%=basePath%>wiassess/projectMgr/projectMgrAction!getProjectChart.action",
            success: function(result){
                     var jsonData=result;
                     var xdata=jsonData.xdata; //xdata是后台传向前台的参数，代表横轴的数组
                     var data=jsonData.data;   //data是后台传向前台的参数，代表显示数据，本实例显示的是年用水量
                     var tiltleTm=jsonData.title; //tiltleTm 是后台传向前台的参数，代表图标的标题
                     var chart = new Highcharts.Chart({
                            chart: {
                                renderTo: 'chartPro', //要显示柱状图的div的id
                                type: 'column',       //图表类型为柱状图
                                margin: 75,
                                options3d: {           //这里设置3D图表的样式
                                    enabled: true,
                                    alpha: 10,
                                    beta: 0,
                                    depth: 50,
                                    viewDistance: 25
                                }
                            },

                            title: {
                                text: tiltleTm    //显示柱状图的标题
                            },
                           credits: {//不显示highchart超链接
                                enabled: false
                            },
                            plotOptions: {
                                column: {
                                    depth: 10,
                                    value: 0,
                                    width: 1
                                }
                            },
                            yAxis:{    //纵坐标
                                   title:{
                                       text:'单位：立方米'
                                   }
                            },
                            xAxis: {   //横坐标
                                categories:  xdata
                            },
                           tooltip: {    //提示格式
                                shared: true,
                                useHTML: true,
                                headerFormat: '<small>{point.key}</small><table>',
                                pointFormat: '<tr><td style="color: {series.color}">{series.name}: </td>' +
                                    '<td style="text-align: right"><b>{point.y} 立方米</b></td></tr>',
                                footerFormat: '</table>',
                                valueDecimals: 2
                            },
                            series: [{
                                name:'取水总量',
                                data: data
                            }]
                        });
            },
            error: function(){
                alert('获取失败!');
            }
        });
}
</script>

3、jsp

 <div id="chartPro"  style=" width: 66%; height: 400px; "  ></div>

后台传数据----拼接json

action方法getProjectChart()

/**
     * 获得项目统计图
     * @return
     * @throws Exception
     */
     public String   getProjectChart() throws Exception{
           //省略参数获取过程<br>　　　　　　    //需要获取的参数<br>　　　　　　　//1、title：titleStr----柱状图的标题，StringBuffer类型，将其值传入前台
//2、data:sumWaterByCounty-----柱状图的数据列，是一个数组
//3、xdata:xdata-------横坐标轴的数据，也是一个数组
<br>
         /**
    　　　　　　 * 输出统计的字符串转化成JSON，返回JSON
             * */
    　　　 　StringBuilder sb=new StringBuilder();
        sb.append("{\"success\":true,");
        sb.append("\"title\":\""+titleStr.toString()+"\",");
        sb.append("\"data\":"+JSONArray.fromObject(sumWaterByCounty)+",\"xdata\":"+JSONArray.fromObject(xdata)+"");
        sb.append("}");
    　　　　 jsonStr=sb.toString();
        return jsonStr;//返回拼接的JSON，供前台获取<br>　　　　　　}