在 Highcharts 引入页面后，我们就已经做好了创建第一个图表的准备了。
下面是以一个基础的条形图为例开始我们的第一个图表创建。
一、创建基础条形图
1. 创建 div 容器
在页面的 body 部分创建一个 div，并指定必须的属性（ID，高度和宽度等），代码如下
<div id="container" style="min-width:800px;height:400px"></div>
2. 编写图表配置代码
创建 div 容器后，就可以开始编写 Highcharts 图表配置代码，这部分代码用 <script></script> 包括，可以放在页面代码的任意位置（当然最好的做法是放在 </body> 之前）。下面是条形图的配置
var chart = new Highcharts.Chart('container', {// 图表初始化函数，其中 container 为图表的容器 div
chart: {
type: 'bar' //指定图表的类型，默认是折线图（line）
},
title: {
text: '我的第一个图表' //指定图表标题
},
xAxis: {
categories: ['苹果', '香蕉', '橙子'] //指定x轴分组
},
yAxis: {
title: {
text: 'something' //指定y轴的标题
}
},
series: [{ //指定数据列
name: '小明', //数据列名
data: [1, 0, 4] //数据
}, {
name: '小红',
data: [5, 7, 3]
}]
});
完成上述两个步骤后，保存文件并用浏览器打开，运行结果如下图所示
上述例子完整 HTML 代码如下
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="container" style="min-width:400px;height:400px;"></div>
<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
<script>
var chart= new Highcharts.Chart('container', {
chart: {
type: 'bar' //指定图表的类型，默认是折线图（line）
},
title: {
text: '我的第一个图表' //指定图表标题
},
xAxis: {
categories: ['苹果', '香蕉', '橙子'] //指定x轴分组
},
yAxis: {
title: {
text: '吃水果个数' //指定y轴的标题
}
},
series: [{ //指定数据列
name: '小明', //数据列名
data: [1, 0, 4] //数据
}, {
name: '小红',
data: [5, 7, 3]
}]
});
</script>
</body>
</html>
至此，我们已经初步了解和学会了自己编写简单的 Highcharts 图表了，是不是 So easy！这只是开始，后面的学习和使用会更好玩。