HighCharts 详细使用及API文档说明

标签：style   class   blog   code   java   http   

官方在线API：http://api.highcharts.com/highcharts

中文网： http://www.hcharts.cn/

一、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: {…} // 配置导出按钮属性

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

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

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

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

       title: {…}                  // 配置标题

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

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

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

})

    上面红色部分是图标完整性及美观必须自己配置的选项，其他选项无特殊需要默认就行，也就是不用配置，所以开发HighCharts是不是很简单，只需要配置简单的几个选项就行，下面详细讲解每个选项的配置。

三、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、红色部分为主要配置内容
 

四、实例说明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”文件夹。

doctype html>
html lang="en">
head>
  script type="text/javascript" src="js/jquery.min.js">script>
  script type="text/javascript" src="js/highcharts.js">script>
  script type="text/javascript" src="js/exporting.js">script>
  script>
    //左侧Javascript代码
  script>
head>
body>
  div id="container" style="min-width:700px;height:400px">div>
body>
html>

$(function () {
    var aa = [1,4
                ] ;
    $(‘#container‘).highcharts({
        chart: {
            type: ‘column‘
        },
        title: {
            text: ‘Monthly Average Rainfall‘
        },
        subtitle: {
            text: ‘Source: WorldClimate.com‘
        },
        xAxis: {
            categories: aa
        },
        yAxis: {
            min: 0,
            title: {
                text: ‘Rainfall (mm)‘
            }
        },
        tooltip: {
            headerFormat: ‘{point.key}

HighCharts 详细使用及API文档说明,搜素材,soscw.com

HighCharts 详细使用及API文档说明

标签：style   class   blog   code   java   http   

原文地址：http://www.cnblogs.com/kennyliu/p/3804874.html