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‘

}

结果仍为柱状图:

时间: 2024-11-10 01:16:58

highcharts例子的相关文章

HighCharts -教程+例子

Highchart简介: Highcharts是一款免费开源的纯javascript编写的图表库,能够很简单便捷的在Web网站或Web应用中添加交互性的图表, Highcharts目前支持直线图.曲线图.面积图.柱状图.饼图.散点图等多达18种不同类型的图表,可以满足你对Web图表的任何需求 ! Highcharts功能强大,图表种类多也很漂亮,高度自定义,兼容性比较好.具体参考:http://www.hcharts.cn/docs/index.php?doc=start-introductio

django官网例子-使用highcharts

接上,投票结果返回仅仅是树值,页面太单一,想做一个报表,通过图表来展现数据,使用highcharts,把原来的返回结果改为图表显示(使用了两个图表,一个是饼图,一个是柱状图) 获取数据 编写一个函数,用于返回json数据的函数,这里数据我只是自己手动定义了, import json def get_vote_result(request):     pie_list = [[u'北京',50],[u'上海',20],[u'广州',30]]     t_country = [u'北京',u'上海'

无聊写了一个最简单的MVC4+Highcharts连数据库例子

乱搞了个数据库 后面发现没定INT类型 直接将ID当数据显示了 效果图: 前端 1 @{ 2 Layout = null; 3 } 4 5 <!DOCTYPE html> 6 7 <html> 8 <head> 9 <meta name="viewport" content="width=device-width" /> 10 11 <script src="~/Scripts/jquery-1.7.1

大数据时代的图表可视化利器——highcharts,D3和百度的echarts

还记得阿里巴巴那个令人澎湃激情的双十一吗?还记得淘宝生动形象地把你的的消费历程一一地展示给你看吗?还记得那些酷炫拽的it报告图表吗?在这个大数据越来越盛行的年代,怎样去表达一些用户的关系,人物的关联,甚至是事情的发展,都让我们有更多的表达方式.其中最简单直接,形象明了的就是用图表说明问题了. 如果在以前,要实现各种图表,可能很多人会选择flash.但是flash成本较高,图表多的时候很耗性能.后来越来越多的纯js框架出现,让大家有了更多的选择.所以接下来我想推荐几个不错的图表js框架给大家用.

highcharts 结合phantomjs纯后台生成图片系列二之php2

上篇文章中介绍了phantomjs的使用场景,方法. 本篇文章详细介绍使用php,highcharts 结合phantomjs纯后台生成图片.包含一步步详细的php代码 一.highcharts 结合phantomjs纯后台生成图片系列的准备: 下载phantomjs解析插件,从highcharts官方下载所需插件. 新建一个工程文件夹phantomjs,所必备的js文件有: highcharts 结合phantomjs纯后台生成图片系列二之php 其中jquery.js为 v1.7.1; hi

highcharts 结合phantomjs纯后台生成图片系列二之php

上篇文章中介绍了phantomjs的使用场景,方法.本篇文章详细介绍使用php,highcharts 结合phantomjs纯后台生成图片. 一.准备: 下载phantomjs解析插件,从 highcharts官方 下载所需插件. 新建一个工程文件夹名位:phantomjs,所必备的js文件有: 其中jquery.js为v1.7.1; highcharts-convert.js的下载地址可去 github上下载 . highcharts官方文档有关于highcharts-convert.js的使

highcharts分段显示不同颜色

最近在做统计图的时候,碰到一个需求 类似如下: 就是在红色虚线框内的折线在不同区域用不同的颜色表示,并且是虚线. 开始定位为用highcharts库实现.确定用这个库后,开始在网上查资料,发现有类似的例子,网址是:http://code.hcharts.cn/hcharts.cn/hhhhco 1 $(function () { 2 $('#container').highcharts({ 3 series: [{ 4 data: [-10, -5, 0, 5, 10, 15, 10, 10,

利用Highcharts制作web图表学习(一)

前言:最近项目中需要对数据进行汇总和分析得出柱状图或曲线图这样散装点图,经过学习和测试发现Highchart不错,如果大家项目中需要的话,不妨看看有的例子摘自官网 一.先说说HighCharts的主要特性包括: 1.兼容性:HighCharts采用纯JavaScript编写,兼容当今大部分的浏览器,包括Safari.IE和火狐等等: 2.图表类型:HighCharts支持图表类型,包括曲线图.区域图.柱状图.饼状图.散状点图和综合图表等等,可以满足各种需求. 3.不受语言约束:HighChart

Highcharts创建一个简单的柱状图

新建一个html文件,将highcharts引入到你的页面后,通过两个步骤我们就可以创建一个简单的图表了. 1.创建div容器 在页面的 body部分创建一个div,并指定div 的 id,高度和宽度,代码如下 <div id="container" style="min-width:800px;height:400px"></div> 2.编写Highcharts代码 编写Highcharts必须的代码,用<script><