- Highcharts网页图表制作实例详解 (Web开发典藏大系)
- 顼宇峰编著
- 270字
- 2021-03-12 18:01:49
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所示。
![](https://epubservercos.yuewen.com/B3512F/15477637705567106/epubprivate/OEBPS/Images/00021.jpg?sign=1739004013-HOPZVMfAAUWN2hs6s7X9wSQhL33S98vC-0-a30c176f9f205cc54daaa72da7e4056a)
图1.18 第一个实例