HighCharts 具体使用及API文档说明

一、HighCharts开发说明：

HighCharts开发实际上配置HighCharts每一个部分，比方配置标题（title），副标题（subtitle）等，当中每一个部分又有更细的參数配置，比方标题下有对齐方式（align），标题文字（text）等。下图为整个图表的每一个部分位置说明（请对比以下HighCharts总体结构）

二、HighCharts总体结构：

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

var chart = new Highcharts.Chart({

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

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

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

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

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

       labels: {…}        // HTML标签，能够放置在画图的不论什么位置

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

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

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

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

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

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

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

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

       title: {…}                  // 配置标题

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

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

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

})

    上面红色部分是图标完整性及美观必须自己配置的选项，其它选项无特殊须要默认即可，也就是不用配置，所以开发HighCharts是不是非常easy，仅仅须要配置简单的几个选项即可，以下具体解说每一个选项的配置。

三、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 ： 导出button选项，配置导出button及打印样式等，详见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、红色部分为主要配置内容
 

四、实例说明HighCharts开发步骤

1、要求

    1）绘制一个显示本站2012/9/22日訪问统计，包含浏览量（pv），IP数的折线图。

2）x轴按每小时统计，y轴显示相应的数量

3）折线图上x轴相应的点显示数量，当鼠标经过改点时，用提示框形式显相关信息

4）要有图例显示每条折现代表什么数据信息

5）图表右下角加上“我爱物联网”字样并链接到www.52wulian.org

6）要有主标题和副标题

7）要能实现图表打印及导出常见格式的图片功能

2、开发步骤

1）新建一个目录名为“HighCharts”，并在该目录内新建一个名为“js”的目录，将所需的“highcharts.js”和“exporting.js”拷贝至“js”目录。

2）在“HighCharts”目录里新建一个html文件，任意命名，用文本编辑器写入例如以下内容：（html代码，相信大家都看的懂)