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

上一回，咱們實現了從後臺傳遞數據，在圖表中展現，而圖表的大部分配置都實在JS中控制的，

我的有個想法，咱們應該能夠將圖表的配置都拿到後臺去，沒有在實際開發中使用過，不知道是否好用，這裏簡單嘗試下

(PS:試了下，可行，可是不知道實際項目中可用否？)

1. 構造實體

個人想法是，在這裏構造一個和Highcharts配置同樣的一個實體：

爲每一種屬性配置一個java實體（這裏須要注意的是實體的名稱需與highchart中的屬性一直，不然json解析出的數據就會有問題）

java代碼

public class Title {
    private String text;

    public String getText() {
        return text;
    }

    public void setText(String text) {
        this.text = text;
    }

}

public class Chart {
    
    private String type;
    private String renderTo;
    public String getType() {
        return type;
    }
    public void setType(String type) {
        this.type = type;
    }
    public String getRenderTo() {
        return renderTo;
    }
    public void setRenderTo(String renderTo) {
        this.renderTo = renderTo;
    }

    
    
    

}

/**
 * @author lenovo
 *指定圖標類型
 */
public class ChartType {

    /**
     * 柱狀圖
     */
    public final static String COLUMN="column";
}

public class XAxis {
    private String[] categories;

    public String[] getCategories() {
        return categories;
    }

    public void setCategories(String[] categories) {
        this.categories = categories;
    }
    
}

public class YAxis {
    private Title title;

    public Title getTitle() {
        return title;
    }

    public void setTitle(Title title) {
        this.title = title;
    }
    
    

}

public class Serie {
    private String name;
    private Integer[] data;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }


    public Integer[] getData() {
        return data;
    }

    public void setData(Integer[] data) {
        this.data = data;
    }

    public Serie() {

    }

    public Serie(String name, Integer[] data) {
        super();
        this.name = name;
        this.data = data;
    }
    
    

}

import java.io.Serializable;
import java.util.List;

public class Highchart implements Serializable{

    private static final long serialVersionUID = -5880168163194932425L;  
    
    private Chart chart;  
  
    private Title title;  
  
    private XAxis xAxis;  
  
    private YAxis yAxis;  
  
    private List<Serie> series;  
  
    public Chart getChart() {  
        return chart;  
    }  
  
    public void setChart(Chart chart) {  
        this.chart = chart;  
    }  
  
    public Title getTitle() {  
        return title;  
    }  
  
    public void setTitle(Title title) {  
        this.title = title;  
    }  
  
    public XAxis getxAxis() {  
        return xAxis;  
    }  
  
    public void setxAxis(XAxis xAxis) {  
        this.xAxis = xAxis;  
    }  
  
    public YAxis getyAxis() {  
        return yAxis;  
    }  
  
    public void setyAxis(YAxis yAxis) {  
        this.yAxis = yAxis;  
    }  
  
    public List<Serie> getSeries() {  
        return series;  
    }  
  
    public void setSeries(List<Serie> series) {  
        this.series = series;  
    }  
    
    
    
    

}

後臺的java代碼

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        req.setCharacterEncoding("UTF-8");  
        resp.setContentType("text/html;charset=utf-8");
        
        Chart chart = new Chart();
        chart.setRenderTo("container");
        chart.setType(ChartType.column);

        Title title = new Title();
        title.setText("個人第1個Highcarts圖表！");

        XAxis xAxis = new XAxis();
        xAxis.setCategories(new String[] { "my", "first", "chart" });

        YAxis yAxis = new YAxis();
        Title yTitle = new Title();
        yTitle.setText("Y軸標題");
        yAxis.setTitle(yTitle);

        Serie data_jane = new Serie("Jane", new Integer[] { 1, 0, 4 });
        Serie data_john = new Serie("Jone", new Integer[] { 5, 7, 3 });

        List<Serie> series = new ArrayList<Serie>();
        series.add(data_jane);
        series.add(data_john);

        Highchart highchart = new Highchart();
        highchart.setChart(chart);
        highchart.setTitle(title);
        highchart.setxAxis(xAxis);
        highchart.setyAxis(yAxis);
        highchart.setSeries(series);

        Gson gson = new Gson();
        
        PrintWriter out = resp.getWriter();
        out.print(gson.toJson(highchart));
        out.flush();
        out.close();
    }

修改頁面代碼

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello Highcharts !</title>

<script src="js/jquery.min.js"></script>
<script src="js/highcharts.js"></script>

<script type="text/javascript">
    $(function() {
        //從後臺獲取json格式的數據
        $.getJSON("go" , function(data) {
            //初始化chart
            var chart = new Highcharts.Chart(data);
        });

    });
</script>
</head>
<body>
    <!-- 定義圖表的容器 -->
    <div id="container" style="width: 100%; height: 400px;"></div>
</body>
</html>

效果：

這樣的話有個好處，就是全部的信息均可以存到數據庫中，作成可配置的，

能夠作一個管理界面去修該，而不是去修改JS