HighCharts学习笔记(二)HighCharts结构及详细配置

HighCharts结构及详细配置：

一、HighCharts整体结构：

通过查看API文档我们知道HighCharts结构如下：（API文档在文章后面提供下载）

var chart = new Highcharts.Chart({

       chart: {…}             // 配置chart图表区

       colors: [{...}]         // 配置主体显示颜色（多个线条和柱体的颜色顺序的）

       credits: {…}          // 配置右下角版权链接

       exporting: {…}        // 配置导出及打印

       global: {…}           // Highcharts.SetOptions方法调用

       labels: {…}           // HTML标签，可以放置在绘图的任何位置

       lang: {…}             // 语言对象属性配置

       legend: {…}           // 配置图例选项

       loading: {…}          // 配置图表加载选项

       navigation: {…}       // 配置导出按钮属性

       pane: {…}             // 仅适用于极性图表和角仪表

       plotOptions: {…}      // 配置数据点选项

       series: [{...}]        // 配置数据列选项

       subtitle: {…}         // 配置副标题

       title: {…}            // 配置标题

       tooltip: {…}          // 配置数据点提示框

       xAxis: {…}            // 配置x轴选项

       yAxis: {…}            // 配置y轴选项

})

二、HighCharts详细配置

1、chart ：图表区选项

              主要设置图表的类型，图表装载容器名，背景，高度，宽度等图表的整体属性。

2、colors ：数据列颜色选项

    主要是数据列颜色设置，比如多条线条中的每个线条颜色。

3、credits ：版权链接选项

4、exporting ：导出及打印选项

5、global ：Highcharts.SetOptions方法调用

    全局选项,并不适用于每一个图表。这些选项,如lang选项,必须设置使用Highcharts.setOptions方法。一般用不到，详情请查看API文档。

6、labels ：HTML标签（可放置在图表的任意地方）

7、lang ：语言配置选项，主要配置符号、导出时显示的语句、时间显示语言等。和上面的global参数有关，即调用Highcharts.SetOptions方法。下表列举常用的选项注意：lang选项其实就是配置一些显示语言，API中都有详细说明。

8、legend ：图例选项，即数据类标示。

9、loading: 图表加载选项

10、navigation ： 导出按钮选项，配置导出按钮及打印样式等，详见API文档。

11、pane ：极性图表和角仪表选项配置（这两种表是在新版本2.0.1新增加的选项）

12、plotOptions ：数据点选项。分不同图表类型配置不同，下面就常用的选项及spline选项列表如下

13、series ：数据列选项

14、subtitle ： 副标题选项。和title配置一样，在title中详细讲解

15、title ： 标题选项

16、tooltip ：数据点提示框选项

17、xAxis ：x轴选项

18、yAxis ：y轴选项

      和x轴配置相同或类似。

注意：1、以上所有参数如果没特殊要求，及为默认是，可不用再代码中配置

 
  2、API中还有更多的配置选项，可通过阅读API了解详细

   3、红色部分为主要配置内容