Highcharts图表插件的使用说明

最新推荐文章于 2022-08-31 16:35:55 发布

置顶程序员大徐

最新推荐文章于 2022-08-31 16:35:55 发布

阅读量1.2k

点赞数 1

分类专栏： jquery highcharts web前端 java进阶文章标签：前端 jquery 插件

本文链接：https://blog.csdn.net/xuqiang930410/article/details/78958860

版权

java进阶同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

web前端

3 篇文章 0 订阅

订阅专栏

jquery

2 篇文章 0 订阅

订阅专栏

一、简介
1. Highcharts 是一个用纯JavaScript编写的一个图表库。(使用时需要机遇JQuery来使用)
2. Highcharts 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表
二、特点
1. 兼容性 - 支持所有主流浏览器和移动平台（android、iOS等）。
2. 多设备 - 支持多种设备，如手持设备 iPhone/iPad、平板等。
3. 免费使用 - 开源免费。
4. 轻量 - highcharts.js 内核库大小只有 35KB 左右。
5. 配置简单 - 使用 json 格式配置
6. 动态 - 可以在图表生成后修改。
7. 多维 - 支持多维图表
8. 配置提示工具 - 鼠标移动到图表的某一点上有提示信息。
9. 时间轴 - 可以精确到毫秒。
10. 导出 - 表格可导出为 PDF/ PNG/ JPG / SVG 格式
11. 输出 - 网页输出图表。
12. 可变焦 - 选中图表部分放大，近距离观察图表；
13. 外部数据 - 从服务器载入动态数据。
14. 文字旋转 - 支持在任意方向的标签旋转。
三、支持的图表类型
没有描述
四、 Highcharts使用准备（环境配置）
1. 准备JQuery的js文件
1. 下载链接（jQuery 3.2.1）
开发版：https://pan.baidu.com/s/1jHG7f6Y 密码：7vzj
产品版：https://pan.baidu.com/s/1qYzajbI 密码：cv7h
2. 下载Highcharts的文件（文件中包含插件使用所需要的JS文件及CSS文件，以及所有图表的使用案例）
1. 下载链接https://pan.baidu.com/s/1nvL0VhR 密码：6pc3
五、 Highcharts的图表配置（案例描述以折线图为例）
1. Highcharts 基本组成
这里写图片描述
2. 案例

<html>
<head>
   <meta charset="UTF-8" />
   <title>Highcharts 教程</title>
   <!-- 导入jquery文件 -->
   <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
   <!-- 导入highcharts的js文件 -->
   <script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<!-- 显示报表的DIV -->
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<!-- js图表配置 -->
<script language="JavaScript">
$(document).ready(function() {
   //配置图表标题内容
   var title = {
       text: '月平均气温'   
   };
   //配置图表子标题
   var subtitle = {
        text: 'Source: runoob.com'
   };
   //图表x轴数据
   var xAxis = {
       categories: ['一月', '二月', '三月', '四月', '五月', '六月'
              ,'七月', '八月', '九月', '十月', '十一月', '十二月']
   };
   //配置y轴数据（title y轴的标题 plotLines y轴的范围）
   var yAxis = {
      title: {
         text: 'Temperature (\xB0C)'
      },
      plotLines: [{
         value: 0,
         width: 1,
         color: '#808080'
      }]
   };   
   var tooltip = {
      valueSuffix: '\xB0C'
   }
   var legend = {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'middle',
      borderWidth: 0
   };
   //图表数据
   var series =  [
      {
         name: 'Tokyo',
         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: 'New York',
         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]
      }, 
      {
         name: 'Berlin',
         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: 'London',
         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]
      }
   ];
   //创建JSON对象
   var json = {};
   //将前面配置的属性加入到json对象中
   json.title = title;
   json.subtitle = subtitle;
   json.xAxis = xAxis;
   json.yAxis = yAxis;
   json.tooltip = tooltip;
   json.legend = legend;
   json.series = series;
   //加载json配置到图表中
   $('#container').highcharts(json);
});
</script>
</body>
</html>