Java与Highcharts实例（三） - Hello Highcharts (后台Java传递数

2019独角兽企业重金招聘Python工程师标准>>>

上一回，我们使用官方的介绍，完成了Highcharts的入门

1. 引入Highcharts 依赖的JS

2. 新建DIV容器

3. 编写JS

在这里，我们用Java做后台实现数据的传递

1. 改造JS

我们为了使用从后台传过来的数据，需要对JS做些修改

<script type="text/javascript">
    $(function() {
        
        var options = {
                chart : {
                    type : 'column' , //指定图表的类型，默认是折线图（line）
                    renderTo: 'container'
                },
                title : {
                    text : 'My first Highcharts chart' //指定图表标题
                },
                xAxis : {
                    categories : [ 'my', 'first', 'chart' ] //指定x轴分组
                },
                yAxis : {
                    title : {
                        text : 'something'   // 指定y轴的标题
                    }
                },
                series : [ ]  //指定数据列,这里设为空，我们从后台拿数据
        };
        
        //从后台获取json格式的数据
        $.getJSON("hello" , function(data) {
            //插入Json数据
            options.series = data;
            //初始化chart
            var chart = new Highcharts.Chart(options);
        });

    });
</script>

这里，我们使用了另一种方法初始化Highcharts：new Highcharts.Chart(op);

我们将Highcharts的配置单拿出来作为一个对象（应该是这样理解，有时间学习下JavaScript面向对象的思想比较有好处）

我们在上面定义了一个options对象，图表参数都在这里

我们用JQuery获取数据，然后初始化图表

2. 后台Servlet

        /*
         * series : [ { //指定数据列  
                name : 'Jane', //数据列名  
                data : [ 1, 0, 4 ] //数据  
            }, {  
                name : 'John',  
                data : [ 5, 7, 3 ]  
            } ] 
         */
        //初始化数据
        SimpleData data_jane = new SimpleData("Jane" , new Integer[]{1 , 0 , 4});
        SimpleData data_john = new SimpleData("Jone" , new Integer[]{5 , 7 , 3});
        
        List<SimpleData> datas = new ArrayList<SimpleData>();
        datas.add(data_jane);
        datas.add(data_john);
        
        //使用Google的Json工具
        Gson gson = new Gson();
        //将JSON串返回
        PrintWriter out = resp.getWriter();
        out.print(gson.toJson(datas));
        out.flush();
        out.close();

效果：

转载于:https://my.oschina.net/u/1170536/blog/342311