一.Excel组成元素

二.Excel图表类型与用途

三.Excel可视化大全-应用

进入正题之前，先纠正一种误解。

有人觉得，基本图表太简单、太原始，不高端，不大气，因此追求更复杂的图表。但是，越简单的图表，越容易理解，而快速易懂地理解数据，不正是”数据可视化”的最重要目的和最高追求吗？

所以，请不要小看这些基本图表。因为用户最熟悉它们，所以只要是适用的场合，就应该考虑优先使用。

1.饼状图

（1）需求：地区/销售额－－＞饼状图

方法：
1）生成图表：选中－－＞插入－－＞二维饼图
2）数据显示：➕－－＞数据标签－－＞→－－＞数据标签外－－＞更多选项－－＞类别名称/值/百分比
3）数据显示：➕－－＞数据标签－－＞→－－＞数据标签外－－＞更多选项－－＞分隔符－－＞新文本行
4）调整格式：图例选项－－＞靠右



（2）需求：地区/销售额－－＞子母饼图

方法：
1）生成图表：选中－－>插入－－＞二维饼图
2）数据显示：➕－－＞数据标签－－＞→－－＞数据标签外－－＞更多选项－－＞类别名称/值/百分比
3）数据显示：➕－－＞数据标签－－＞→－－＞数据标签外－－＞更多选项－－＞分隔符－－＞新文本行
4）调整格式：双击杭州－－＞点属于－－＞第二绘图区



操作结果：

饼状图一种应该避免使用的图表，因为肉眼对面积大小不敏感。但是有一个例外，就是反映某个部分占整体的比重，比如贫穷人口占总人口的百分比。

2.折线图

（1）需求：北方和江浙沪销售额折线图
方法：
1）生成图表：选中数据－－＞插入－－＞带数据标记的折线图
2）数据显示：➕－－＞数据标签
3）修改默认系列值：选中－－＞右键－－＞选择数据－－＞编辑－－＞系列名称
4）调整格式：图例选项－－＞靠右
5）添加坐标轴标题：➕－－＞坐标轴标题－－＞更多选项－－＞大小与属性－－＞文字方向－－＞竖排
操作结果：

（2）需求：北方和江浙沪销售额堆积折线图
方法：
1）生成图表：选中数据－－＞插入－－＞堆积折线图
2）数据显示：➕－－＞数据标签
3）调整折线数据：鼠标右键－－＞选择数据－－＞↓箭头
4）调整格式：图例选项－－＞靠右
5）添加坐标轴标题：➕－－＞坐标轴标题－－＞更多选项－－＞大小与属性－－＞文字方向－－＞竖排
6）修改图表标题名称
7）显示时间：右键－－＞选择数据－－＞编辑－－＞选择时间－－＞确定
操作方法：

（3）需求：北方和江浙沪销售额百分比堆积折线图
方案：
1）生成图表：选中数据－－＞插入－－＞带数据标记的百分比堆积折线图
2）数据显示：➕－－＞数据标签
3）调整折线数据：鼠标右键－－＞选择数据－－＞↓箭头
4）调整格式：图例选项－－＞靠右
5）添加坐标轴标题：➕－－＞坐标轴标题－－＞更多选项－－＞大小与属性－－＞文字方向－－＞竖排
6）修改图表标题名称
7）修改默认系列值：选中－－＞右键－－＞选择数据－－＞编辑－－＞系列名称
操作结果：

折线图可以反映同一事物在不同时间里的发展变化的情况，能够显示数据的变化趋势，反映事物的变化情况。

3.条形图

（1）需求：将眼妆和底妆绘制成簇状条形图
方法：
1）生成图表：选中数据－－＞插入－－＞二维条形图－－＞簇状条形图
2）数据显示：➕－－＞数据标签
3）修改图表名字：双击－－＞修改
4）调整数据位置：鼠标右键－－＞选择数据－－＞↓箭头
5）修改默认系列值：选中－－＞右键－－＞选择数据－－＞编辑－－＞系列名称
操作结果：

（2）需求：将眼妆和底妆绘制成堆积条形图
方法：
1）生成图表：选中数据－－＞插入－－＞二维条形图－－＞堆积条形图
2）数据显示：➕－－＞数据标签
3）修改图表名字：双击－－＞修改
4）修改颜色：单击－－＞鼠标右键－－＞填充
5）修改默认系列值：选中－－＞右键－－＞选择数据－－＞编辑－－＞系列名称
操作结果：

（3）需求：将眼妆和底妆绘制成百分比堆积条形图
方法：
1）生成图表：选中数据－－＞插入－－＞二维条形图－－＞百分比堆积条形图
2）数据显示：➕－－＞数据标签
3）修改图表名字：双击－－＞修改
4）百分比位置修改：双击－－＞坐标轴选项－－＞标签－－＞标签位置－－＞高
5）修改默认系列值：选中－－＞右键－－＞选择数据－－＞编辑－－＞系列名称
操作结果：

条形图用于比较各组数据的差异性，强调进行个体间的比较。

4.对称图表比较两公司

需求：绘制A公司和B公司的对称图表
方法：
1）生成图表：选中数据－－＞插入－－＞二维条形图－－＞堆积条形图
2）生成新格式图标：右键－－＞更改图表类型－－＞组合图－－＞簇状条形图
3）修改坐标轴数据：双击数据－－＞修改作用域范围为-7000~7000
4）修改分店位置：双击－－＞坐标轴选项－－＞标签－－＞标签位置－－＞低
5）调整数据方向：双击数据刻度－－＞坐标轴选项－－＞逆序刻度值
6）修改数据刻度格式：双击数据刻度－－＞坐标轴选项－－＞数字－－＞格式代码－－＞##；###
7）修改颜色：右键－－＞填充
操作结果：

5.散点图

需求：绘制年龄和信用分的散点图
方法：
1）生成图表：选中数据－－＞插入－－＞散点图
2）修改年龄范围：双击年龄数字－－＞最小值修改为20
3）添加趋势线：➕－－＞趋势线
4）修改单元格的值：➕－－＞数据标签－－＞更多选项－－＞单元格的值－－＞要填写的值
5）去掉Y值：➕－－＞数据标签－－＞更多选项－－＞Y值
6）添加坐标轴标题：➕－－＞数据标签－－＞坐标轴标题－－＞双击修改名字
7）修改图表名字：双击－－＞修改
操作结果：

散点图一般用于发现两个连续变量或多个变量之间的关系，通常可以通过散点图大致看出变量之间的相关关系，当存在大量数据点时结果更精准。

6.气泡图

需求：绘制年龄和信用分与信用历史的气泡图
方法：
1）生成图表：选中数据－－＞插入－－＞气泡图
2）调整气泡大小：双击气泡－－＞缩放气泡大小为50
3）添加气泡（第三个对比数据）：鼠标右键－－＞选择数据－－＞编辑－－＞气泡系列大小－－＞选择数据
4）显示用户数据：➕－－＞数据标签－－＞更多选项－－＞单元格值－－＞用户
5）显示气泡数据：➕－－＞数据标签－－＞更多选项－－＞气泡大小
操作结果：

气泡图与散点图类似，不同之处在于，散点图对成组的两个数值进行比较，而气泡图对成组的三个数值进行比较，第三个数值确定气泡数据点的大小

7.雷达图

需求：绘制小明和小花所有的数据对比图
方法：
1）生成图表：选中小明数据－－＞插入－－＞雷达图
2）修改对比项：选择1－－＞右键－－＞编辑－－＞被选数据
3）修改取值范围：双击数据－－＞最小值/最大值
4）添加小花：鼠标右键－－＞选择数据－－＞添加小花
操作结果：

雷达图适用于多维数据（四维以上），且每个维度必须可以排序但是，它有一个局限，就是数据点最多6个，否则无法辨别，因此适用场合有限。

8.组合图表

需求：绘制销售额和完成销售占比的组合图表
方法：
1）计算目标达成率：销售额/目标值－－＞修改为百分比显示
2）生成图表：选中销售额和占比－－＞插入－－＞生成簇状柱状图
3）生成组合图表：鼠标右键－－＞更改图表类型－－＞选择折线图和次坐标
4）显示数据：➕－－＞数据标签
5）修改图表标题：双击－－＞修改
操作结果：

9.各种对比

需求：绘制及格和优秀线
方法：
1）生成图表：选中销售额和占比－－＞插入－－＞生成簇状柱状图
2）修改图例名字便于修改组合图表：鼠标右键－－＞编辑
3）修改组合图表：鼠标右键－－＞更改图表类型－－＞散点图/折线图/折线图
4）修改垂直轴和次垂直轴范围：双击垂直轴－－＞修改最小值和最大值范围
5）删除多余垂直轴：选中直接删除/选中双击－－＞数字－－＞修改格式代码－－＞;;;
操作结果：

10.其他对比-子弹图

需求：绘制销售额和目标值的子弹图
方法：
1）生成图表：选中销售额和目标值－－＞插入－－＞簇状柱状图
2）修改水平轴：鼠标右键－－＞选择数据－－＞编辑
3）删除次坐标轴
4）修改图例位置：双击－－＞靠右
5）修改柱状图宽度：双击柱状图－－＞调整间隙宽度
6）选中柱状图型－－＞右键－－＞填充－－＞无填充
7）选中柱状图型－－＞右键－－＞边框－－＞颜色/粗细
操作结果：

11.瀑布图

需求：绘制城市和销售占比瀑布图
方法：
1）生成图表：选中城市和销售占比和base－－＞插入－－＞堆积柱状图
2）改变水平轴顺序：双击水平轴－－＞坐标轴选项－－＞逆序类别
3）改变垂直轴位置：双击垂直轴－－＞标签－－＞标签位置－－＞高
4）调整图例位置：鼠标右键－－＞选择数据－－＞↓
5）将堆积数据删除：选中数据－－＞鼠标右键－－＞填充－－＞无填充
6）删除图例项
操作结果：

12.漏斗图

需求：绘制累计占比和base的漏斗图
方法：
1）生成图表：选中比例和隐藏比例－－＞插入－－＞堆积条形图
2）调整比例和隐藏比例位置：右键－－＞选择数据－－＞↓
3）调整水平轴的范围：双击－－＞鼠标右键－－＞最小值/最大值
4）调整垂直轴的数据：单击－－＞鼠标右键－－＞选择数据－－＞编辑－－＞选中数据
5）逆序排列：双击垂直轴－－＞坐标轴选项－－＞逆序排列
6）隐藏比例无填充：单击隐藏比例－－＞填充－－＞无填充
7）调整水平轴位置：双击水平轴－－＞标签－－＞标签位置－－＞高
8）显示数据：➕－－＞数据标签
操作结果：

13.增维分析

需求：多个图表组合应用
方法：
1）生成图表：选中总和数据－－＞插入－－＞折线图
2）删除网格线：选中网格线－－＞删除
3）修改水平轴数据：选中数据－－＞鼠标右键－－＞编辑－－＞选择
4）添加坐标轴标题：➕－－＞坐标轴标题
5）修改坐标轴标题方向：双击坐标轴标题－－＞对齐方式－－＞文字方向－－＞竖排
6）生成环形图表：选中地区和时间－－＞插入－－＞环形图
7）调整图例位置：双击图例－－＞图例位置－－＞靠右
8）复制图例到折线图
9）修改环形图大小与宽度：双击环形图－－＞系列选项－－＞环形图圆环大小
10）复制圆环到折线图
​ 注意：颜色的控制
​ 11）组合图片：选中2张图表－－＞右键－－＞组合
操作结果：

14.公式动态图表

需求：公式动态图表
方法：
1）安装开发工具：文件－－＞选项－－＞自定义功能区－－＞开发工具
2）生成列表框：开发工具－－＞插入－－＞列表框
3）列表框中添加数据：列表框鼠标右键－－＞设置控件格式－－＞选择数据源区域－－＞选择单元格链接
​ 注意：单元格链接的值为数据源区域的数值
4）显示对应月份数据：选中对应长度单元格－－＞=OFFSET(A1,1,0,1,5)
5）根据规律制定联动算法：=OFFSET(A1,单元格链接的单元格,0,1,5)
6）生成图表：选中数据－－＞插入－－＞柱状图
7）列表框放到图表上：鼠标右击图表－－＞置于底层
8）将2张图形组合：选中2张图表－－＞鼠标右键－－＞组合
9）修改水平轴数据：双击－－＞编辑－－＞选择数据
操作结果：

15.数据列变化

需求：绘制科目成绩的动态图表
方法：
1）生成数据验证下拉选框：选中某一个单元格－－＞数据－－＞数据验证－－＞允许－－＞序列－－＞确定
2）根据科目计算分数：=OFFSET(A1,1,1,6,1)
3）计算科目对应值：=MATCH(B12,B1:D1,0)
4）根据科目联动分数：=OFFSET(A1,1,MATCH(B12,B1:D1,0),6,1)
5）修改垂直轴范围：双击垂直轴－－＞最小值0/最大值100
6）修改水平轴内容：鼠标右键－－＞编辑－－＞选择数据
操作结果：

HighCharts图表入门

HighCharts的作用

​ 在JavaEE企业级项目开发中，很多项目都会用到数据的统计和图表的展示功能，如：各种股票系统，银行的资金结算，公司的财务报表，等等。如何快速高效的开发这些图表是一件麻烦的事。

HighCharts可以非常方便的实现这个功能

​ HighCharts是非常棒的一个jQuery插件，和大多数的浏览器都兼容。支持很多类型的图表。并且是动态的插件，你可以轻松在创建图表后添加，删除，修改数列，轴或者点，并且可以从外部加载文件数据，同时支持提示条，甚至还支持缩放和翻转。

HighCharts的优势

​ Highcharts 是一个用纯 JavaScript 编写的一个 HTML5 图表库， 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表，无需任何插件，全部源码开放，
个人及非商业用途可以任意使用及源代码编辑。

​ Highcharts 支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表，其中很多图表可以集成在同一个图形中形成混合图。

下载 Highcharts

​ 通过官网下载页面获取资源包，资源包包含所有相关文件的源代码及压缩版本官网的下载地址是：https://www.hcharts.cn/download ，官网上有非常详细的使用教程，包括入门学习和基础图表的使用。学习和制作一些比较简单图标可以直接通过在线实例来完成，建议大家去官网直接学习，基础比较薄弱的继续往下看教程。

Highcharts目录

引入 Highcharts

​ Highcharts 最基本的运行只需要一个 JS 文件，即 highcharts.js， 将上面的压缩包解压，从code文件夹下可以找到，复制到自己项目中的js文件夹。对应的代码是：

<script src="js/highcharts.js"></script>

创建一个简单的图表

效果图

​ 在绘图前我们需要为 Highcharts 准备一个 DOM 容器，并指定其大小

<div id="container" style="width: 600px;height:400px;"></div>

​ 然后通过 Highcharts 的初始化函数 Highcharts.chart 来创建图表，该函数接受两个参数，第一个参数是 容器的 Id，第二个参数是图表配置，代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个 Highcharts 图表</title>
    <!-- 引入 highcharts.js -->
    <script src="js/highcharts.js"></script>
</head>
<body>
<!-- 图表容器 DOM -->
<div id="container" style="width: 600px;height:400px;"></div>

<script type="text/javascript">
    // 图表配置
        var options = {
            chart: {
                type: 'bar'                          //指定图表的类型，默认是折线图（line）
            },
            title: {
                text: '我的第一个图表'                 // 标题
            },
            xAxis: {
                categories: ['QQ', '支付宝', 'bilibili', '百度云盘', '百词斩']   // x 轴分类
            },
            yAxis: {
                title: {
                    text: '每天使用该软件的次数'                // y 轴标题
                }
            },
            series: [{                              // 数据列
                name: '张三',                        // 数据列名
                data: [10, 3, 4, 6, 7]                     // 数据
            }, {
                name: '李四',
                data: [5, 7, 10, 8, 1]
            }]
        };//这个要写在图表初始化之前，尤其是在使用回调函数之前
        // 图表初始化函数
        var chart = Highcharts.chart('container', options);
</script>
</body>
</html>

这样你的第一个图表就完成了

HighCharts基础教程

图表主要组成

一般情况下，Highcharts 包含标题（Title）、坐标轴（Axis）、数据列（Series）、数据提示框（Tooltip）、图例（Legend）、版权标签（Credits）等，另外还可以包括导出功能按钮（Exporting）等。

Highcharts 基本组成部分如下图所示
官方文档：https://api.hcharts.cn/highcharts#plotOptions

1. 标题（Title）

图表标题，包含标题和副标题（subTitle），其中副标题不是必须的。

2. 坐标轴（Axis）

坐标轴包含x轴（xAxis）和y轴（yAxis）。通常情况下，x轴显示在图表的底部，y轴显示在图表的左侧。多个数据列可以共同使用同一个坐标轴，为了对比或区分数据，Highcharts提供了多轴的支持。

3. 数据列（Series）

数据列即图表上一个或多个数据系列，比如曲线图中的一条曲线，柱状图中的一个柱形。

4. 数据提示框（Tooltip）

当鼠标悬停在某点上时，以框的形式提示该点的数据，比如该点的值、数据单位等。数据提示框内提示的信息可以通过格式化函数动态指定。

5. 图例（Legend）

图例是图表中用不同形状、颜色、文字等 标示不同数据列，通过点击标示可以显示或隐藏该数据列。

6. 版权标签（Credits）

显示在图表右下方的包含链接的文字，默认是Highcharts官网地址。通过指定credits.enabled=false即可不显示该信息。

7. 导出功能（Exporting）

通过引入 exporting.js即可增加图表导出为常见文件功能。

图表配置

图表容器

Highcharts 实例化中绑定容器的方式有很多种方式

1、通过构造函数

var charts = Highcharts.chart('container', {
  // Highcharts 配置
  chart: {
                    type: 'column'//图表类型
                    events: {
                    load: requestData // 图表加载完毕后执行的回调函数(有时候加载不出来是因为函数还没执行完就开始加载空数据)
                                    //不写这个要把回调函数这部分写在图表初始化之前
                }
});

2、如果你的页面已经引入了 jQuery，那么还可以 jQuery 插件的形式调用

$("#container").highcharts({
    // Highcharts 配置  
    chart: {
                    type: 'column'//图表类型
                    /*events: {// 图表加载完毕后执行的回调函数(有时候加载不出来是因为函数还没执行完就开始加载空数据) //不写这个要把回调函数这部分写在图表初始化之前*/
                }
}); 

图表样式

宽度、高度

Highcharts 图表的高度和宽度是根据 DIV 容器的宽高来设定的，即

<div id="container" style="width:400px;height:400px"></div>

标题

标题默认显示在图表的顶部，包括标题和副标题（subTitle），其中副标题是非必须的。设置标题和副标题的示例代码如下：

title: {
    text: '我是标题'
},
subtitle: {
    text: '我是副标题'
}

坐标轴

​ 普通的二维数据图都有X轴和Y轴，默认情况下，x轴显示在图表的底部，y轴显示在左侧（多个y轴时可以是显示在左右两侧）

坐标轴组成部分

坐标轴标题

坐标轴标题。默认情况下，x轴为null（也就是没有title），y轴为'Value'，设置坐标轴标题的代码如下：

xAxis:{
           title:{
          		 text:'x轴标题',
                 categories:['1','2','3','4']
                 //还可以设置格式化值
               }
            }
yAxis:{
   title:{
       text:'y轴标题'
   }
}

坐标轴刻度标签

坐标轴标签（分类）。Labels常用属性有enabled、formatter、step、staggerLines

1）enabled

是否启用Labels。x，y轴默认值都是true，如果想禁用（或不显示）Labels，设置该属性为false即可。

2）Formatter

标签格式化函数。默认实现是：

formatter:function(){
    return this.value;
}

this.value代码坐标轴上当前点的值（也就是x轴当前点的x值，y轴上当前点的y值）

3）Step

Labels显示间隔，数据类型为number（或int）

数据列

什么是数据列

数据列是一组数据集合，例如一条线，一组柱形等。图表中所有点的数据都来自数据列对象，数据列的基本构造是：

series : [{
    name : '',
    data : []
}] 

提示：数据列配置是个数组，也就是数据配置可以包含多个数据列。一个name和data表示一组数据列

数据列中的 name 代表数据列的名字，并且会显示在数据提示框（Tooltip）及图例（Legend）中。

数据列中的数据

在数据列的 data 属性中，我们可以定义图表的数据数组，定义方式：

1. 数值数组。在这种情况下，配置数组中的数值代表 Y 值，X 值则根据 X 轴的配置，要么自动计算，要么从 0 起自增；在分类轴中， X 值就是 categoies 配置，数值数组配置实例如下：

data : [1, 4, 6, 9, 10] 

2. 包含两个值的数组集合。在这种情况下，集合中数组的第一个值代表 X， 第二个值代表 Y；如果第一个值是字符串，则代表该点的名字，并且 X 值会如 1 中所说的情况决定。数组集合的实例：

data ： [ [5, 2], [6,3], [8,2] ]

图表类型

Highcharts 支持多种图表类型，可以针对不同的数据都用合理的图表类型来展现。

Highcharts 目前支持直线图、曲线图、曲线面积图、面积图、面积范围图、柱状图、条形图、饼图、散点图、气泡图、仪表图等丰富的图表类型。

图表类型配置

在 Highcharts 中，可以通过 chart.type 来设置所有默认的图表类型

chart: {
    type: 'spline'
}

示例：柱状图的制作

效果图

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8"><link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            /* css 代码  */
        </style>
        <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
        <script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
        <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
    </head>
    <body>
        <div id="container" style="min-width:400px;height:400px"></div>
        <script>
            var chart = Highcharts.chart('container',{
                chart: {
                    type: 'column'//图表类型 默认折线图，可以把这个改其他参数观察变化
                    //这里可以设置回调函数完成后执行
                },
                
                title: {
                    text: '月平均降雨量'
                },
                subtitle: {
                    text: '数据来源: WorldClimate.com'
                },
                xAxis: {
                    categories: [//分类
                        '一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'
                    ],
                    crosshair: true//配置跟随鼠标或鼠标滑过点时的十字准星线
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: '降雨量 (mm)'
                    }
                },/*数据提示框指的当鼠标悬停在某点上时，以框的形式提示该点的数据，比如该点的值，数据单位等。数据提示框内提示的信息完全可以通过格式化函数动态指定；通过设置 tooltip.enabled = false 即可不启用提示框。
                教程地址：https://www.hcharts.cn/docs/basic-tooltip*/
                tooltip: {
                    // head + 每个 point + footer 拼接成完整的 table
                    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true
                },
                /*
                数据列配置是针对所有数据列及某种数据列有效的通用配置。

                数据列的配置有三个级别：

                配置在 plotOptions.series，针对所有图表类型有效
                配置在 plotOptions.<数据列类型>，针对某种数据列有效
                配置在 series，针对某个数据列有效
                上述三个级别的配置精准度越来越高，也就是越精准的配置会覆盖前面的配置
                */
                plotOptions: {
                    column: {
                        borderWidth: 0
                    }
                },
                series: [{
                    name: '东京',
                    data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
                }, {
                    name: '纽约',
                    data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
                }, {
                    name: '伦敦',
                    data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
                }, {
                    name: '柏林',
                    data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
                }]
            });
        </script>
    </body>
</html>

示例：饼型图的制作

案例要求：

​ 制作大学生就业意向占有比例，使用饼型图来完成。

案例效果：

案例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入 highcharts.js -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/highcharts.js"></script>
</head>
<body>
<div id="container" style="min-width:400px;height:400px"></div>
<script type="text/javascript">
    $(function () {
        $('#container').highcharts({
            chart: {
                type: 'pie'  //图表类型
            },
            title: {
                text: '2018 大学生就业情况调查表'  //设置主标题
            },
            series: [{
                name: '就业量占比',  //数据名字
                data: [
                    ['研究生',   38.2],  
                    ['民营企业',      26.8],
                    ['国有企业',   12.8],
                    ['公务员',    8.5],
                    ['自主创业',     6.2],
                    ['其他',   0.7]
                ]
            }]
        });
    });
</script>
</body>
</html>

​

​