1.3 图表构成

为了方便大家更好地了解Highcharts图表，这里从界面和代码两个角度讲解Highcharts图表的实现方式。

1.3.1 界面构成

在第一个实例中，实现了一个图表。一个图表通常由图表区、标题、绘图区、坐标轴、图例／数据列等几个部分构成，如图1.19所示。在Highcharts中，每个部分都由一个或者多个组件构成。其中，黑色方框括住的部分就是图表区。而由坐标轴围起来的部分就是绘图区。后面将依次讲解这几个部分的实现方式。这里，大家只要知道每个部分的名称即可。

图1.19 图表构成

1.3.2 代码构成

虽然在第一个实例中并没有编写多少代码，但图1.19却展现了丰富的内容。这充分体现了Highcharts使用的便捷性。实现Highcharts图表实际分为两个步骤，下面将依次讲解。

1．图表配置项对象

Highcharts核心主体就是图表配置项对象。该对象包含了图表的各类数据和配置信息。每个部分往往都是由更小的配置项对象组成。用户只要按照规范的格式，填写对应的数据和配置值就可以了。整个过程就像搭建积木一样。下面对第一个实例的配置项对象做简要介绍。

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]            //指定数据节点
    }]
};

这块内容也可以使用传统JavaScript逐项赋值的方式实现。从维护角度考虑，推荐使用以上方式实现。

2．在容器中绘制图表

在指定好配置项对象后，用户就可以使用Highcharts插件提供的higcharts方法在指定的容器中绘制图表。需要的代码如下：

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

只需要以上两个步骤，就可以在现有的网页中绘制出图1.19所示的图表了。如果用户对图表进行扩展，只需要修改图表配置对象即可。