Java與Highcharts實例（三） - Hello Highcharts (後臺Java傳遞數

上一回，咱們使用官方的介紹，完成了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();

效果：