您的位置: 首页  >  文章  >  Java与Highcharts实例（四） - Hello Highcharts (后台Java传递数据) - 改造实体

Java与Highcharts实例（四） - Hello Highcharts (后台Java传递数据) - 改造实体

分类: 文章 • 2025-02-06 19:42:22

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

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

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

1. 构造实体

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

Java与Highcharts实例（四） - Hello Highcharts (后台Java传递数据) - 改造实体

[java] view plain copy
  1. package org.ygy.highcharts.domain;  
  2.   
  3. import java.util.List;  
  4.   
  5. public class Highchart implements java.io.Serializable {  
  6.   
  7.     private static final long serialVersionUID = -5880168163194932425L;  
  8.   
  9.     private Chart chart;  
  10.   
  11.     private Title title;  
  12.   
  13.     private XAxis xAxis;  
  14.   
  15.     private YAxis yAxis;  
  16.   
  17.     private List<Serie> series;  
  18.   
  19.     public Chart getChart() {  
  20.         return chart;  
  21.     }  
  22.   
  23.     public void setChart(Chart chart) {  
  24.         this.chart = chart;  
  25.     }  
  26.   
  27.     public Title getTitle() {  
  28.         return title;  
  29.     }  
  30.   
  31.     public void setTitle(Title title) {  
  32.         this.title = title;  
  33.     }  
  34.   
  35.     public XAxis getxAxis() {  
  36.         return xAxis;  
  37.     }  
  38.   
  39.     public void setxAxis(XAxis xAxis) {  
  40.         this.xAxis = xAxis;  
  41.     }  
  42.   
  43.     public YAxis getyAxis() {  
  44.         return yAxis;  
  45.     }  
  46.   
  47.     public void setyAxis(YAxis yAxis) {  
  48.         this.yAxis = yAxis;  
  49.     }  
  50.   
  51.     public List<Serie> getSeries() {  
  52.         return series;  
  53.     }  
  54.   
  55.     public void setSeries(List<Serie> series) {  
  56.         this.series = series;  
  57.     }  
  58.   
  59. }  

其他的实体都是类似的结构

2. 初始化

我们为了方便，直接在Servlet中初始化下

[java] view plain copy
  1. @Override  
  2. protected void doPost(HttpServletRequest req, HttpServletResponse resp)  
  3.         throws ServletException, IOException {  
  4.        req.setCharacterEncoding("UTF-8");    
  5.        resp.setContentType("text/html;charset=utf-8");  
  6.          
  7.     Chart chart = new Chart();  
  8.     chart.setRenderTo("container");  
  9.     chart.setType(ChartType.column);  
  10.   
  11.     Title title = new Title();  
  12.     title.setText("我的第1个Highcarts图表！");  
  13.   
  14.     XAxis xAxis = new XAxis();  
  15.     xAxis.setCategories(new String[] { "my", "first", "chart" });  
  16.   
  17.     YAxis yAxis = new YAxis();  
  18.     Title yTitle = new Title();  
  19.     yTitle.setText("Y轴标题");  
  20.     yAxis.setTitle(yTitle);  
  21.   
  22.     Serie data_jane = new Serie("Jane", new Integer[] { 1, 0, 4 });  
  23.     Serie data_john = new Serie("Jone", new Integer[] { 5, 7, 3 });  
  24.   
  25.     List<Serie> series = new ArrayList<Serie>();  
  26.     series.add(data_jane);  
  27.     series.add(data_john);  
  28.   
  29.     Highchart highchart = new Highchart();  
  30.     highchart.setChart(chart);  
  31.     highchart.setTitle(title);  
  32.     highchart.setxAxis(xAxis);  
  33.     highchart.setyAxis(yAxis);  
  34.     highchart.setSeries(series);  
  35.   
  36.     Gson gson = new Gson();  
  37.       
  38.     PrintWriter out = resp.getWriter();  
  39.     out.print(gson.toJson(highchart));  
  40.     out.flush();  
  41.     out.close();  
  42. }  


3. 修改页面

[html] view plain copy
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
  2.     pageEncoding="UTF-8"%>  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  4. <html>  
  5. <head>  
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  7. <title>Hello Highcharts !</title>  
  8.   
  9. <script src="js/jquery.min.js"></script>  
  10. <script src="js/highcharts.js"></script>  
  11.   
  12. <script type="text/javascript">  
  13.     $(function() {  
  14.         //从后台获取json格式的数据  
  15.         $.getJSON("go" , function(data) {  
  16.             //初始化chart  
  17.             var chart = new Highcharts.Chart(data);  
  18.         });  
  19.   
  20.     });  
  21. </script>  
  22. </head>  
  23. <body>  
  24.     <!-- 定义图表的容器 -->  
  25.     <div id="container" style="width: 100%; height: 400px;"></div>  
  26. </body>  
  27. </html>  

好了，运行下

Java与Highcharts实例（四） - Hello Highcharts (后台Java传递数据) - 改造实体

好了，这样的话有个好处，就是所有的信息都可以存到数据库中，做成可配置的，

可以做一个管理界面去修该，而不是去修改JS

但是，可能会增大传输的数据量，希望有经验的同学可以提供点儿建议

相关推荐