HighCharts入门

红太狼 2022-06-08 07:00 157阅读 0赞

一、什么是HighCharts

1、HighCharts是网页报表工具，开发语言是Javascript

2、HighCharts是一个简单易用、美观、跨平台、跨浏览器的图表工具

3、HighCharts支持图表的类型有：曲线图、柱状图、饼状图、区域图、散点图、综合图的各种图表需求。

直线图——line

折线图——spline

柱状图——column

饼状图——pie

区域图——area

综合图——more

一、你必须知道的

1、首先，HighCharts是基于Jquery框架开发的，所以需要在页面引入Jquery，具体代码是：

2、其次，需要引入HighCharts js文件

引入HighCharts js文件还可以是拷贝下载下来的Highcharts资源包中的js目录下的highcharts.js文件

3、如果你想使用导出功能，必须引入导出相关的js文件，该文件存在与/Highcharts-2.3.5/js/modules/目录下

引入下面的三个资源文件后，你就可以参考API文档进行开发了

HighCharts 图表属性——chart

HighCharts 颜色属性——colors

HighCharts 版权属性——credits

HighCharts 导出属性——explorting

HighCharts HTML标签——labels

HighCharts 语言属性——lang

HighCharts 图例属性——legengd

HighCharts 加载属性——loading

HighCharts 导出按钮属性——navigation

HighCharts 数据点属性——plotOptions

HighCharts 数据列属性——series

HighCharts 标题和副标题——title subtitle

HighCharts 数据点提示框——tooltip

HighCharts X轴和Y轴——xAxis yAxis

![点击查看原始大小图片][02e9ebc5-f41a-34b2-baa3-2c20b44ed837.jpg]

Html代码   ![收藏代码][icon_star.png]

1.  <html>  
2.      <head>  
3.          <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
4.          <script type="text/javascript" src="../jquery-1.4.4.js"></script>  
5.          <script type="text/javascript">  
6.              $(function () \{  
7.              var chart;   
8.              $(document).ready(function() \{  
9.                  chart = new Highcharts.Chart(\{  
10.                 //HighCharts中chart属性配置  
11.                   chart: \{  
12.                     renderTo: 'container',//div 标签  
13.                     type: 'line',//图表类型  
14.                       
15.                     /\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*以下chart配置可选\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*/  
16.                     backgroundColor:"\#EAF7FF",//图表背景色  
17.                     borderWidth:5,//图表边框宽度  
18.                     borderRadius:15,//图表边框圆角角度  
19.                     plotBackgroundColor:"\#6DBFBB",//主图表区背景颜色  
20.                     plotBorderColor:'red',//主图表边框颜色  
21.                     plotBorderWidth:2,//主图表边框宽度  
22.                     shadow:true,//是否设置阴影  
23.                     zoomType:'xy'//拖动鼠标放大图表的方向  
24.                   \},  
25.                    credits : \{  
26.                         //enable:true,默认就为true，可以不配置  
27.                         //如果想要去除版权（也就是不显示），只需要设置enable:false即可  
28.                         href:'http://www.52wulian.org',//链接地址  
29.                         position: \{                        //文字的位置  
30.                             x:-30,  
31.                             y:-30  
32.                         \},  
33.                         style:\{                            //文字的样式  
34.                             color:'red',  
35.                             fontWeight:'bold'  
36.                         \},  
37.                         enabled:true,//不显示highCharts版权信息,不显示为false  
38.                         text:'我爱物联网'                //文字  
39.                   \},  
40.                   /\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*  
41.                   \*\*Colors-颜色属性为可选配置  
42.                   \*\*通过配置配置colors，可以轻松的设置数据列的颜色  
43.                   1、颜色代码可以是十六进制，也可以是英文单词，  
44.                     还可以是RGB，如同css  
45.                     2、默认是从第一个数据列起调用第一个颜色代码，  
46.                     有多少个数据列调用相应数量的颜色  
47.                     3、当数据列大于默认颜色数量时，重复从第一个  
48.                     颜色看是调用  
49.                   \*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*/  
50.                   colors:\[  
51.                     '\#000000',//黑  
52.                     '\#FF0000',//红  
53.                     '\#00FF00',//绿  
54.                     '\#0000FF',//蓝  
55.                     '\#FFFF00',//黄  
56.                     '\#FF00FF',//紫  
57.                     '\#FFFFFF',//紫  
58.                   \],  
59.                   exporting: \{  
60.                     //enabled:true,默认为可用，当设置为false时，图表的打印及导出功能失效  
61.                     buttons:\{    //配置按钮选项  
62.                         printButton:\{    //配置打印按钮  
63.                             width:50,  
64.                             symbolSize:20,  
65.                             borderWidth:2,  
66.                             borderRadius:0,  
67.                             hoverBorderColor:'red',  
68.                             height:30,  
69.                             symbolX:25,  
70.                             symbolY:15,  
71.                             x:-200,  
72.                             y:20  
73.                         \},  
74.                         exportButton:\{    //配置导出按钮  
75.                             width:50,  
76.                             symbolSize:20,  
77.                             borderWidth:2,  
78.                             borderRadius:0,  
79.                             hoverBorderColor:'red',  
80.                             height:30,  
81.                             symbolX:25,  
82.                             symbolY:15,  
83.                             x:-150,  
84.                             y:20  
85.                         \}  
86.                     \},  
87.                     filename:'52wulian.org',//导出的文件名  
88.                     type:'image/png',//导出的文件类型  
89.                     width:800    //导出的文件宽度  
90.                   \},  
91.                   labels:\{  
92.                       items:\[\{  
93.                         //标签代码（html代码）  
94.                         html:'<p style="font-size:20">Copyright © 2012-2013 </p><a href="http://www.52wulian.org" style="font-size:20;text-decoration: underline;">我爱物联网</a>',  
95.                         style:\{ //设置标签位置  
96.                                 left:'100px',  
97.                                 top:'50px'  
98.                         \}  
99.                     \}\],  
100.                       style:\{    //设置标签颜色  
101.                           color:'rgb(0,0,255)'  
102.                       \}  
103.                   \},  
104.                   xAxis: \{  
105.                         categories: \['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',  
106.                             'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'\]  
107.                     \},       
108.                   series: \[\{  
109.                         name: 'Tokyo',  
110.                         data: \[7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6\]  
111.                     \}, \{  
112.                         name: 'New York',  
113.                         data: \[-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5\]  
114.                     \}, \{  
115.                         name: 'Berlin',  
116.                         data: \[-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0\]  
117.                     \}, \{  
118.                         name: 'London',  
119.                         data: \[3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8\]  
120.                     \}\]  
121.                 \});  
122.             \});  
123.         \});  
124.         </script>  
125.     </head>  
126.     <body>  
127.         <script src="../highcharts.js"></script>  
128.         <script src="../exporting.js"></script>  
129.         <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>  
130.     </body>  
131. </html>

*  [HighChart\_API.rar][HighChart_API.rar] (1.1 MB)
 *  下载次数: 449

[02e9ebc5-f41a-34b2-baa3-2c20b44ed837.jpg]: /images/20220608/4291b3ca77934ac7928edf78d5655ff3.png
[icon_star.png]: /images/20220608/67e1f93d959a43259f6ec70e4b79deed.png
[HighChart_API.rar]: http://dl.iteye.com/topics/download/e759f82b-110c-3b39-a86a-162306cee809