# 1.4 第一个实例
【**step1**】创建div容器
在页面的 body 部分创建一个 div，并指定必须的属性（ID，高度和宽度等），代码如下
~~~
<div id="container" style="min-width:800px;height:400px"></div>
~~~
【**step2**】编写图表配置代码
~~~
<script>
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]
}]
});
</script>
~~~
【**step3**】保存代码文件，在浏览器打开，查看结果
# demo
~~~
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="container" style="min-width:400px;height:400px;"></div>
<script src="https://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script>
var chart= new Highcharts.Chart('container', {
chart: {
type: 'line' //指定图表的类型，默认是折线图（line）
},
title: {
text: '重庆2017年9月份气温走势图' //指定图表标题
},
subtitle:{
text:'数据来源：重庆气象局'
},
xAxis: {
categories: ['01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30'] //指定x轴分组
},
yAxis: {
title: {
text: '温度(℃)' //指定y轴的标题
}
},
series: [{ //指定数据列
name: '最高温度', //数据列名
data: [24, 25, 27,26,23,26,30,30,26,26,31,31,32,32,30,33,32,26,26,24,26,27,27,28,28,30,24,22,23,24] //数据
}, {
name: '最低温度',
data: [20, 21, 22,21,20,21,21,23,22,21,20,21,21,24,23,24,25,21,21,20,21,22,22,21,22,22,19,19,20,19]
}]
});
</script>
</body>
</html>
~~~
