您的位置: 首页  >  文章  >  Java与Highcharts实例（二） - Hello Highcharts

Java与Highcharts实例（二） - Hello Highcharts

分类: 文章 • 2024-06-10 16:08:16

好了，首先，我们来实现一个Highcharts版的Hello World

1. 下载Highcharts

在官方网址可以找到下载地址

该网站有目录结构介绍：

Java与Highcharts实例（二） - Hello Highcharts

我这里访问Highcharts官方网站和Google很是慢，所以直接引入本地的JS

2. 配置

2.1 引入Highcharts需要的JS文件

[html] view plain copy
  1. <script src="js/jquery.min.js"></script>  
  2. <script src="js/highcharts.js"></script>  

2.2 新建DIV容器

这里需要一个容器来展示图表

[html] view plain copy
  1. <!-- 定义图表的容器 -->  
  2. <div id="container" style="width: 100%; height: 400px;"></div>  

2.3 JS代码

[javascript] view plain copy
  1. <script type="text/javascript">  
  2.     $(function() {  
  3.         $('#container').highcharts({ //图表展示容器，与div的id保持一致  
  4.             chart : {  
  5.                 type : 'column' //指定图表的类型，默认是折线图（line）  
  6.             },  
  7.             title : {  
  8.                 text : 'My first Highcharts chart' //指定图表标题  
  9.             },  
  10.             xAxis : {  
  11.                 categories : [ 'my', 'first', 'chart' ] //指定x轴分组  
  12.             },  
  13.             yAxis : {  
  14.                 title : {  
  15.                     text : 'something' //指定y轴的标题  
  16.                 }  
  17.             },  
  18.             series : [ { //指定数据列  
  19.                 name : 'Jane', //数据列名  
  20.                 data : [ 1, 0, 4 ] //数据  
  21.             }, {  
  22.                 name : 'John',  
  23.                 data : [ 5, 7, 3 ]  
  24.             } ]  
  25.         });  
  26.     });  
  27. </script>  

完整代码：

[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.         $('#container').highcharts({ //图表展示容器，与div的id保持一致  
  15.             chart : {  
  16.                 type : 'column' //指定图表的类型，默认是折线图（line）  
  17.             },  
  18.             title : {  
  19.                 text : 'My first Highcharts chart' //指定图表标题  
  20.             },  
  21.             xAxis : {  
  22.                 categories : [ 'my', 'first', 'chart' ] //指定x轴分组  
  23.             },  
  24.             yAxis : {  
  25.                 title : {  
  26.                     text : 'something' //指定y轴的标题  
  27.                 }  
  28.             },  
  29.             series : [ { //指定数据列  
  30.                 name : 'Jane', //数据列名  
  31.                 data : [ 1, 0, 4 ] //数据  
  32.             }, {  
  33.                 name : 'John',  
  34.                 data : [ 5, 7, 3 ]  
  35.             } ]  
  36.         });  
  37.     });  
  38. </script>  
  39. </head>  
  40. <body>  
  41.     <!-- 定义图表的容器 -->  
  42.     <div id="container" style="width: 100%; height: 400px;"></div>  
  43. </body>  
  44. </html>  

3. 展示效果

Java与Highcharts实例（二） - Hello Highcharts


源码详见：http://download.****.net/download/wqc19920906/9977811

相关推荐