# 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>
~~~
