highcharts例子

直接看代码

<script language="JavaScript">
$(document).ready(function() {   
    $.ajax({
        type:'post',
        url:'<%=basePath%>charts/getData?type=column',
        success:function(result){
            result=eval(result);
                var chart={
                        type:'column'
                }
              var title = {
                      text: '班级统计'   
                   };
                   var xAxis = {
                      categories: ['one', 'two', 'three', 'four', 'five']
                   };
                   var yAxis = {
                      title: {
                         text: '比例'
                      }
                   };
                   var plotOptions = {
                      line: {
                         dataLabels: {
                            enabled: true
                         },   
                         enableMouseTracking: true
                      }
                   };
                   var series= result;   
                   var credits = {
                              enabled: false
                           };
                   var json = {};
                    
                   json.chart=chart;
                   json.title = title;
                   json.xAxis = xAxis;
                   json.yAxis = yAxis;  
                   json.series = series;
                   json.credits = credits;
                   json.plotOptions = plotOptions;
                   $('#container').highcharts(json);
                  
                
            
            
        },
        error:function(){
            alert(2);
        }
    
    });
});
 
</script>

后台代码:

@RequestMapping(value="getData",method=RequestMethod.POST)
    public void getData(HttpServletRequest request,HttpServletResponse response,String type){
        List list = new ArrayList();
        HighCharts hc = new HighCharts();
        HighCharts hc2 = new HighCharts();
        List lt = new ArrayList();
        List lt2 = new ArrayList();
        hc.setName("test");
        hc2.setName("wolf");
        hc.setType("line");
        hc2.setType("line");
        Random rd=new Random();
        for (int i=0;i<10;i++) {
            Map<String, Object> map = new HashMap<String, Object>();
            map.put("name", "test1");
            map.put("y", rd.nextInt(100));
            map.put("percentage", (i+1)*0.3*100);
            lt.add(map);
        }
        for (int i=0;i<10;i++) {
            Map<String, Object> map = new HashMap<String, Object>();
            map.put("name", "test1");
            map.put("y", rd.nextInt(100));
            map.put("percentage", (i+1)*0.3*100);
            lt2.add(map);
        }
        hc.setData(lt);
        hc2.setData(lt2);
        list.add(JSONObject.toJSON(hc));
        list.add(JSONObject.toJSON(hc2));
        
        try {
            
            response.getWriter().print(list);
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }

效果图:

再后台代码中如果设置

hc.setType("column");
hc2.setType("column");

则展示的是直方图:

当然也可以改为pie,显示饼状图,但因为饼状图只适合显示单个数组的情况,结果两个会重合,因此饼状图是最简单的图表。

注意:在后台代码中如果不设置type,则默认为line,此时,js中的chart中的type生效,所以type生效的顺序是数据中的type(后台代码,也是series)>js中chart的type。

例如:在后台设置

hc.setType("column");
hc2.setType("column");

然后在js的chart中设置

chart={

type:'line'

}

结果仍为柱状图:

 

转载于:https://www.cnblogs.com/yxjdragon/p/5946800.html

Highcharts案例介绍 1. 显示一个静态的折线图,要求显示data1.txt文件中的气象数据。 2. 将第一个案例改成直方图,并在每个方块上显示温度值。 3. 在第一个案例中进行修改,不显示版权信息,并将折线图更改为曲线图。 4. 在第三个案例中进行修改,进行辅助线的显示、定制legend(图例)、Tooltip(数据显示框)以及数据输出(中文)。要求当鼠标移动到对应节点的时候,显示辅助线,另外要求分别显示平均最高气温和最低气温的辅助线;要求legend显示在覆盖图表,并显示在左上角;要求数据提示框同时显示最高温度和最低温度&今日平均温度。 a. 显示中文输出 b. 定制legend c. 定制tooltip e. 显示平均温度辅助线(作业:当最高温度不显示的时候,最高平均温度这个辅助线也不显示,同理最低温度一样。) 解决方案:(为了方便操作,可以将legend的属性floating修改为false,然后将最低气温的第一个值改成11,这样方便操作) 公用部分: 使用自定义属性将平均温度辅助线分别添加到对应属性列中(也可以不添加)。 i: 使用chart属性里面的events中的redraw方法,参考属性this.series[i].visible属性,该属性如果为true,表示该数据列显示,如果为false,表示该数据列不显示。然后再分别进行操作。 ii:使用plotOptions中的series的events事件中的hide和show事件,这个就不用参考visible属性。 f. 显示辅助线(x轴上) 5. 显示一个饼图,要求显示data2.txt中的浏览器用户数据。 6. 在第5个案例的基础上,要求点击某个浏览器扇形后,在另外一个容器中显示该浏览器具体的用户使用数据,具体数据在data3.txt中。 7. 显示中国各省份用户ip访问量的展示图,具体数据在data4.txt。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值