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