上一回，我们使用官方的介绍，完成了Highcharts的入门

1. 引入Highcharts 依赖的JS

2. 新建DIV容器

3. 编写JS


在这里，我们用Java做后台实现数据的传递

1. 改造JS

我们为了使用从后台传过来的数据，需要对JS做些修改

[javascript]  view plain  copy
  1. <script type="text/javascript">  
  2.     $(function() {  
  3.           
  4.         var options = {  
  5.                 chart : {  
  6.                     type : 'column' , //指定图表的类型，默认是折线图（line）  
  7.                     renderTo: 'container'  
  8.                 },  
  9.                 title : {  
  10.                     text : 'My first Highcharts chart' //指定图表标题  
  11.                 },  
  12.                 xAxis : {  
  13.                     categories : [ 'my', 'first', 'chart' ] //指定x轴分组  
  14.                 },  
  15.                 yAxis : {  
  16.                     title : {  
  17.                         text : 'something'   // 指定y轴的标题  
  18.                     }  
  19.                 },  
  20.                 series : [ ]  //指定数据列,这里设为空，我们从后台拿数据  
  21.         };  
  22.           
  23.         //从后台获取json格式的数据  
  24.         $.getJSON("hello" , function(data) {  
  25.             //插入Json数据  
  26.             options.series = data;  
  27.             //初始化chart  
  28.             var chart = new Highcharts.Chart(options);  
  29.         });  
  30.   
  31.     });  
  32. </script>  

这里，我们使用了另一种方法初始化Highcharts：new Highcharts.Chart(op);

我们将Highcharts的配置单拿出来作为一个对象（应该是这样理解，有时间学习下JavaScript面向对象的思想比较有好处）

我们在上面定义了一个options对象，图表参数都在这里

我们用JQuery获取数据，然后初始化图表

2. 后台Servlet

[java]  view plain  copy
  1. /* 
  2.  * series : [ { //指定数据列   
  3.               name : 'Jane', //数据列名   
  4.               data : [ 1, 0, 4 ] //数据   
  5.           }, {   
  6.               name : 'John',   
  7.               data : [ 5, 7, 3 ]   
  8.           } ]  
  9.  */  
  10. //初始化数据  
  11. SimpleData data_jane = new SimpleData("Jane" , new Integer[]{1 , 0 , 4});  
  12. SimpleData data_john = new SimpleData("Jone" , new Integer[]{5 , 7 , 3});  
  13.   
  14. List<SimpleData> datas = new ArrayList<SimpleData>();  
  15. datas.add(data_jane);  
  16. datas.add(data_john);  
  17.   
  18. //使用Google的Json工具  
  19. Gson gson = new Gson();  
  20. //将JSON串返回  
  21. PrintWriter out = resp.getWriter();  
  22. out.print(gson.toJson(datas));  
  23. out.flush();  
  24. out.close();  

效果：


好，一个简单调用后台的Highcharts例子就完成了


Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生