java highcharts实例_Java与Highcharts实例（四） - Hello Highcharts (后台Java传递数

上一回，咱们实现了从后台传递数据，在图表中展现，而图表的大部分配置都实在JS中控制的，javascript

我的有个想法，咱们应该能够将图表的配置都拿到后台去，没有在实际开发中使用过，不知道是否好用，这里简单尝试下html

(PS:试了下，可行，可是不知道实际项目中可用否？)java

1. 构造实体

个人想法是，在这里构造一个和Highcharts配置同样的一个实体：jquery

为每一种属性配置一个java实体(这里须要注意的是实体的名称需与highchart中的属性一直，不然json解析出的数据就会有问题)数据库

java代码json

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 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 getSeries() {

return series;

}

public void setSeries(List series) {

this.series = series;

}

}

后台的java代码ide

@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 series = new ArrayList();

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();

}

修改页面代码ui

pageEncoding="UTF-8"%>

html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Hello Highcharts !

$(function() {

//从后台获取json格式的数据

$.getJSON("go" , function(data) {

//初始化chart

var chart = new Highcharts.Chart(data);

});

});

效果：this

这样的话有个好处，就是全部的信息均可以存到数据库中，作成可配置的，spa

能够作一个管理界面去修该，而不是去修改JS