1.4 快速认识图表配置项

Highcharts最核心的部分就是图表配置项。用户通过图表配置项来对标题进行定制，从而实现自己所要的效果。所以，掌握图表配置项结构是非常重要的。本节将简要讲解结构框架，便于读者后续深入。

1.4.1 基本结构

了解结构的最直接方式就是看官网API，上面详细列出了公开的配置项信息。查看官网API有两种方式：

第一种是直接访问官网提供的API，网址为http://api.highcharts.com/highcharts，效果如图1.20所示。由于它是国外网站，所以经常会出现访问缓慢的现象。

图1.20 API帮助页面

第二种是在下载的Highcharts包中，双击api文件夹下的highcharts.html文件，也可以打开API帮助文档。

在左侧的CONFIGURATION OPTIONS下就是常用的配置项。其中，Highcharts. setOptions是一些全局配置项目，包含global和lang两项。其中，配置项lang用于配置一些本地化的选项。这部分内容，会在后面具体讲解。

其中，("#container").highcharts({是我们最常用的选项，具体含义如表1.1所示。

表1.1 常用配置项

以上配置项均为顶级配置项。每个配置项下包含很多子配置项。其中很多子配置项还包括其他配置项，从而形成层次结构。下面对常用的几个配置项做一个基本介绍。

1.4.2 图表区配置项chart

图表区就是图表图案所在的区域。该区域是使用顶级配置项chart设置。其语法结构如下：

chart:{
    //相关配置项
}

在该配置项中主要对图表区域做整体设置。例如，如果图表区域中所有的图表都是同一个类型，可以直接在该配置项中设置图表类型。语法形式如下：

chart:{
    type:String
}

其中，参数String指定图表类型，默认值为line。所以，如果用户不在任何地方指定图表类型，Highcharts默认会以折线图的形式显示图表内容。

1.4.3 版权信息配置项credits

版权信息位于右下角，默认是Highcharts.com。它可以帮助浏览者明确信息发布者和权利所属者。该区域使用顶级配置项credits设置。其语法形式如下：

credits:{
    //相关配置项
}

如果用户不需要这个区域，可以将该对象设置为null。在配置项中添加以下代码：

credits:null

这样就不显示版权信息了。

1.4.4 图例配置项legend

图例用来展现图表区域的数据构成。它可以显示图表区中有几个数据列，包括隐藏的数据列。该部分使用顶级配置项legend设置。其语法如下：

legend:{
    //相关配置项
}

如果不想显示该部分，只需要在配置项代码中添加以下代码，就可以不显示图例。

legend:{
    enabled:false                                       //取消图例的显示
}

1.4.5 标题title和副标题subtitle

在Highcharts中，一个图表可以包含一个标题和一个副标题。它们分别使用顶级配置项title和subtitle设置。其语法如下：

title:{
    //相关配置项
},
subtitle:{
    //相关配置项
}

如果用户不设置，Highcharts会默认显示一个标题，内容为Chart title。设置标题代码如下：

title:{
    text:'标题内容'
}

这样就可以修改标题。如果不想显示标题，直接设置该配置项为空，代码如下：

title:null

1.4.6 数据列配置项plotOptions和series

配置项plotOptions的结构如图1.21所示。该配置项包括23个子配置项。其中，除了配置项series，其他22个配置项对应一种特定图表类型。而series用于设置当前容器中所有数据列的基本配置。

图1.21 配置项plotOptions结构

配置项series的结构如图1.22所示。虽然从图中看，似乎series也分为22类，但实际并不是这样的。由于series中的选项较多，但并不是每个配置项都在特定的图表类型中使用。所以为了方便用户查阅，Highcharts将选项按照图表类型重新组织。用户只要根据设置的类型，直接选择对应的类型即可。

图1.22 配置项series结构

由于plotOptions.series、plotOptions.*（除plotOptions.series之外）和series的配置项重复，所以相同的设置会有优先级问题。其中，series的优先级大于plotOptions.*的，plotOptions.*的优先级大于plotOptions.series的。

在实际使用中，尤其是一个容器中包含多个图表类型的时候，合理利用这种优先级，可以减少代码的编写量。对于针对所有图表的通用配置，建议通过plotOptions.series设置；对于所有同类型图表的设置，建议通过plotOptions.*设置；针对特定一个图表的设置，建议通过series设置。

1.4.7 提示框tooltip

当鼠标放到图表的数据图形上，Highcharts就会弹出一个提示框。该提示框显示该数据图形的相关数据，如数据列名、x值和y值等。提示框是由顶级配置项tooltip设置。其语法形式如下：

tooltip:{
    //相关配置项
}

如果不想在图表中显示提示框，只要在配置项代码中添加一下代码即可：

tooltip:{
    enabled:false
}

1.4.8 数轴xAxis/yAxis

在Highcharts中，通常每个图表都有具有x轴和y轴。x轴使用顶级配置项xAxis表示；y轴使用顶级配置项yAxis表示。其语法如下：

xAxis:[{
    //相关配置项
}],
yAxis:[{
    //相关配置项
}]

如果用户不对这两个配置项进行设置，Highcharts也会根据用户提供的数据自动生成对应的坐标轴。