本章节我们将为大家介绍使用 Highcharts 生成图表的一些配置。

第一步：创建 HTML 页面

创建一个 HTML 页面，引入 jQuery 和 Highcharts 库：

文件名：HighchartsTest.htm

<html>
<head>
<title>Highcharts 教程 | 菜鸟教程</title> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="/try/demo_source/highcharts.js"></script> </head> <body> <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div> <script language="JavaScript"> $(document).ready(function() {
                                                                                }); </script> </body> </html>

实例中 id 为 container 的 div 用于包含 Highcharts 绘制的图表。

第二步: 创建配置文件

Highcharts 库使用 json 格式来配置。

$('#container').highcharts(json);

这里 json 表示使用 json 数据格式和 json 格式的配置来绘制图表。步骤如下：

标题

为图表配置标题：

var title = {
               text: '月平均气温' };
副标题

为图表配置副标题：

var subtitle = {
               text: 'Source: runoob.com' };

X 轴

配置要在 X 轴显示的项。

var xAxis = {
               categories: ['一月', '二月', '三月', '四月', '五月', '六月' ,'七月', '八月', '九月', '十月', '十一月', '十二月'] };

Y 轴

配置要在 Y 轴显示的项。

var yAxis = {
               title: {
                   text: 'Temperature (\xB0C)' }, plotLines: [{
                             value: 0, width: 1, color: '#808080' }] };