Highcharts是一个制作图表的纯Javascript类库

最新推荐文章于 2020-08-28 22:28:59 发布

转载最新推荐文章于 2020-08-28 22:28:59 发布 · 5.3k 阅读

文章标签：

#javascript #jquery #myeclipse #mootools #function #asp.net

JS 图表/图形库专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍如何使用Highcharts库创建交互式曲线图，并演示了如何配置图表样式、添加数据标签及实现打印导出等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Highcharts是一个制作图表的纯Javascript类库，主要特性如下：

兼容性：兼容当今所有的浏览器，包括iPhone、IE和火狐等等；
对个人用户完全免费；
纯JS，无BS；
支持大部分的图表类型：直线图，曲线图、区域图、区域曲线图、柱状图、饼装图、散布图；
跨语言：不管是PHP、Asp.net还是Java都可以使用，它只需要三个文件：一个是Highcharts的核心文件highcharts.js，还有a canvas emulator for IE和Jquery类库或者MooTools类库；
提示功能：鼠标移动到图表的某一点上有提示信息；
放大功能：选中图表部分放大，近距离观察图表；
易用性：无需要特殊的开发技能，只需要设置一下选项就可以制作适合自己的图表；
时间轴：可以精确到毫秒

下载插件

Highcharts下载地址

http://www.highcharts.com/download

jquery下载地址

http://jquery.com/

开发环境：

System：xp JDK:1.5 Tomcat：5.X Myeclipse：6.5

jquery：jquery-1.6.3.min.js

highcharts：Highcharts-2.1.9

项目环境：

注：红色的地方即为本次介绍需要的文件部分。

start

代码如下：

本次介绍是把highcharts中的第一个文件拷贝过来，然后把其他的功能加在了这个文件中，然后查询相关资料，解决了链接以及打印导出等。

<!DOCTYPE HTML>
 <html>
     <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
         <title>Highcharts Example---基本的曲线图</title>
 
         <!-- 1.引入jquery库 -->
         <script type="text/javascript" src="js/jquery-1.6.3.min.js"></script>
         <!-- 2.引入highcharts的核心文件 -->
         <script type="text/javascript" src="js/highcharts.js"></script>
         <!-- 3.引入导出需要的js库文件 -->
         <script type="text/javascript" src="js/exporting.js"></script>
 
         <!--4.js脚本-->
         <script type="text/javascript">
         
 var chart;
             $(document).ready(function() {
                 chart = new Highcharts.Chart({
                     chart: {
                         renderTo: 'container',
                         defaultSeriesType: 'line',//图表类别，可取值有：line、spline、area、areaspline、bar、column等
                         marginRight: 130,
                         marginBottom: 25
                     },
                     title: {
                         text: '襄阳(一级标题)',//设置一级标题
                         x: -20 //center
                     },
                     subtitle: {
                         text: '2011温度各区对比(二级标题)',//设置二级标题
                         x: -20
                     },
                     xAxis: {
                         categories: ['2011/1', '2011/2', '2011/3', '2011/4', '2011/5', '2011/6', 
 '2011/7', '2011/8', '2011/9', '2011/10', '2011/11', '2011/12']//设置x轴的标题
                     },
                     yAxis: {
                         title: {
                             text: '温度 (°C)'//设置y轴的标题
                         },
                         plotLines: [{
                             value: 0,
                             width: 1,
                             color: '#808080'
                         }]
                     },
                     tooltip: {
                         formatter: function() {
 return '<b>'+ this.series.name +'</b><br/>'+
 this.x +': '+ this.y +'°C';//鼠标放在数据点的显示信息，但是当设置显示了每个节点的数据项的值时就不会再有这个显示信息
                         }
                     },
                     legend: {
                         layout: 'vertical',
                         align: 'left',//设置说明文字的文字 left/right/top/
                         verticalAlign: 'top',
                         x: -10,
                         y: 100,
                         borderWidth: 0
                     },
                     exporting:{
                          enabled:true //用来设置是否显示‘打印’,'导出'等功能按钮，不设置时默认为显示
                     },
                     plotOptions: {
                         line: {
                             dataLabels: {
                                 enabled: true //显示每条曲线每个节点的数据项的值
                             },
                             enableMouseTracking: false
                         }
                     },
                     series: [{
                         name: '襄城',//每条线的名称
                         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]//每条线的数据
                     }, {
                         name: '樊城',
                         marker:{
                             symbol:"square"
                         },
                         data: [{
                                y:-3,
                                marker:{
                                symbol:'url(sun.png)'//在线上的某个点显示图标
                                }
                         }, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
                     }, {
                         name: '襄州',
                         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]
                     }, {
                         name: '东津',
                         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]
                     },{
                         name: '鱼梁州',
                         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]
                     }]
                 });
                 
                 
             });
                 
 </script>
     </head>
     <body>
         <!--5.导入容器用于显示图表-->
         <div id="container"
             style="width: 800px; height: 400px; margin: 0 auto"></div>
     </body>
 </html>