官方网站：https://www.highcharts.com.cn/
Highcharts 是一个用纯 JavaScript 编写的一个图表库， 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。
Highcharts 支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表，其中很多图表可以集成在同一个图形中形成混合图。
上手：
获取 Highcharts
你可以通过以下几种方式获取 Highcharts ：
引入 Highcharts
Highcharts 最基本的运行只需要一个 JS 文件，即 highcharts.js，以使用 CDN 文件为例，对应的代码是：
<head>
<meta charset="UTF-8">
<title>Title</title>
//引入highcharts.js文件
<script src="./js/highcharts.js"></script>
</head>
创建一个简单的图表
在绘图前我们需要为 Highcharts 准备一个 DOM 容器，并指定其大小
<div id="container" style="min-width:400px;height:400px"></div>
然后通过 Highcharts 的初始化函数 Highcharts.chart 来创建图表，该函数接受两个参数，第一个参数是 DOM 容器的 Id，第二个参数是图表配置，
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个 Highcharts 图表</title>
</head>
<body>
<!-- 图表容器 DOM -->
<div id="container" style="width: 600px;height:400px;"></div>
<!-- 引入 highcharts.js -->
<script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
<script>
// 图表配置
var options = {
chart: {
type: ‘bar‘ //指定图表的类型，默认是折线图（line）
},
title: {
text: ‘我的第一个图表‘ // 标题
},
xAxis: {
categories: [‘苹果‘, ‘香蕉‘, ‘橙子‘] // x 轴分类
},
yAxis: {
title: {
text: ‘吃水果个数‘ // y 轴标题
}
},
series: [{ // 数据列
name: ‘小明‘, // 数据列名
data: [1, 0, 4] // 数据
}, {
name: ‘小红‘,
data: [5, 7, 3]
}]
};
// 图表初始化函数
var chart = Highcharts.chart(‘container‘, options);
</script>
</body>
</html>
效果：
原文：https://www.cnblogs.com/musong-out/p/11397203.html