上QQ阅读APP看书，第一时间看更新
1.2 第一个实例
下面来实现本教程的第一个Highcharts实例。
【实例1-1】制作北京连续一周最高温度折线图。操作过程如下所述。
（1）新建一个网页文件，命名为Hello.html。同时，将title设置为Hello Highcharts。代码如下：
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Hello Highcharts</title>
</head>
<body>
</body>
</html>
（2）在网页中添加一个div，设置id为container。
<div id="container"></div>
（3）设置该div的样式，代码如下：
<style type="text/css">
#container {
width:500px;
height:300px;
border:1px solid #000;
padding :20px;
margin:10px;
}
</style>
（4）引入jQuery脚本和Highcharts脚本，代码如下：
<script src="jquery.js"></script> <script src="highcharts.js"></script>
注意：这里需要将这两个脚本文件放到Hello.html所在的目录下。
（5）添加图表绘制代码。代码如下：
<script type="text/javascript">
$(document).ready(function () {
var options = {
chart: {
type: 'line'
},
title: {
text: '北京一周最高温度'
},
subtitle: {
text: '2015.02.08--2015.02.14'
},
series: [{
name: '最高温度',
data: [7, 11, 8, 7, 9, 9, 9]
}]
};
$('#container').highcharts(options);
});
</script>
保存以上文件，运行结果如图1.18所示。
图1.18 第一个实例