Highcharts 中文社区

查看: 4889|回复: 5

HighCharts 详细使用及API文档说明

[复制链接]
  • TA的每日心情
    擦汗
    2016-10-24 15:39
  • 签到天数: 50 天

    [LV.5]常住居民I

    8

    主题

    24

    帖子

    4435

    积分

    HC 大师

    Rank: 6Rank: 6

    积分
    4435
    发表于 2014-4-11 20:41:46 | 显示全部楼层 |阅读模式
    本帖最后由 zhy 于 2014-4-11 21:05 编辑

    HighCharts 详细使用及API文档说明
    一、HighCharts开发说明

    HighCharts开发实际上配置HighCharts每个部分,比如配置标题(title),副标题(subtitle)等,其中每个部分又有更细的参数配置,比如标题下有对齐方式(align),标题文字(text)等。
    下图为整个图表的每个部分位置说明。
    highcharts2_1.jpg

    二、HighCharts整体结构

    通过查看
    API文档我们知道HighCharts结构如下(API文档在文章后面提供下载
    var chart = newHighcharts.Chart({
      chart:{…}        //配置chart图表区
      colors:[{...}]    // 配置主体显示颜色(多个线条和柱体的颜色顺序的)
      credits:{…}      // 配置右下角版权链接
      exporting:{…}    // 配置导出及打印
      global:{…}       // HighCharts国际化方法调用
      labels:{…}       // HTML标签,可以放置在绘图的任何位置
      lang:{…}         // 语言对象属性配
      legend:{…}       //配置图例选项
      loading:{…}      // 配置图表加载选项
      navigation:{…}   // 配置导出按钮属性
      pane:{…}         // 仅适用于极性图表和角仪表
      plotOptions:{…}  // 配置数据点选项
      series:[{...}]   //配置数据列选项
      subtitle:{…}     // 配置副标题
      title:{…}       // 配置标题
      tooltip:{…}     // 配置数据点提示框
      xAxis:{…}       // 配置x轴选项
      yAxis:{…}       // 配置y轴选项
    })
    红色部分表示为了图表的完整性或美观性必须配置的属性。
    其他选项无特殊需要默认就行,也就是不用配置,所以开发HighCharts其实很简单,只需要配置简单的几个选项就行,下面详细讲解每个选项的配置。


    三、HighCharts每部分详细配置

    1、chart :图表区选项
      参数名
      说明
      默认值
      backgroundColor
      设置图表区背景色
      "#FFFFFF"
      borderWidth
      设置图表边框宽度
      0
      borderRadius
      设置图表边框圆角角度
      5
      renderTo
      图表放置的容器,一般在html中放置一个DIV,获取DIVid属性值
      null
      defaultSeriesType
      默认图表类型line, spline, area,  areaspline,column, bar, pie , scatter
      "line"
      width
      图表宽度,默认根据图表容器自适应宽度
      null
      height
      图表高度,默认根据图表容器自适应高度
      null  
      margin  
      设置图表与其他元素之间的间距,数组,如[0,0,0,0]  
      [null]
      
      plotBackgroundColor
      主图表区背景色,即X轴与Y轴围成的区域的背景色
      null
      plotBorderColor
      主图表区边框的颜色,即X轴与Y轴围成的区域的边框颜色
      null
      plotBorderWidth
      主图表区边框的宽度  
      0  
      shadow  
      是否设置阴影,需要设置背景色backgroundColor  
      false
      ovreflow
      是否自使用图表区域高度和宽度,如果没有设置widthheight时,会自适应大小
      true  
      zoomType  
      拖动鼠标进行缩放,沿x轴或y轴进行缩放,可以设置为:’x',’y',’xy’
      “”
      events
      事件回调,支持addSerieclickloadselection等方法的回调函数


    2、colors :数据列颜色选项

      参数名
      说明
      默认值
      color
      
      用于展示图表,折线/柱状/饼状等图的颜色,数组形式
      
    默认是从第一个数据列起调用第一个颜色代码,有多少个数
      
    据列调用相应数量的
      
    颜色当数据列大于默认颜色数量时,重复从第一个颜色看是调用
      
      colors: [
      '#058DC7','#50B432',
      '#ED561B','#DDDF00',
      '#24CBE5','#64E572',
      '#FF9655','#FFF263',
      '#6AF9C4']
      

    3、credits :版权链接选项

      参数名  
      说明
      默认值
      enabled
      
      是否显示版权及链接,布尔型,默认为显示
    true  
      position
      
      位置。可用align调整对齐方式,xy设置距离。  
      position: { align: ‘right’,x: -10, verticalAlign: ‘bottom’,y: -5  }  
      href
      
      链接地址。String型,默认是highCharts官网  
      www.highcharts.com
      style
      css样式  
      itemStyle : {cursor:’pointer’,color:’#909090′,fontSize:’10px’}  
      text  
      显示文字  
      highcharts.com

    4、exporting :导出及打印选项

      参数名  
      说明  
      默认值  
      buttons  
      打印和导出按钮样式  

      enabled  
      是否显示按钮(也就是启用打印导出功能),布尔型  
      true
      filename  
      导出图片文件名  
      “chart”  
      type
      文件格式,有image/png |  image/jpeg | application/pdf | image/svg+xml
      “image/png”  
      url  
      务器url,默认是用highcharts服务器
      http://export.highcharts.com  
      width  
      图片宽度
      800  

    5、labels :HTML标签

      参数名  
      说明  
      默认值  
      items  
      html代码
      “”  
      style
      标签样式
      style: {color: ‘#3E576F’}

    6、lang :语言配置选项,
    主要配置符号、导出时显示的语句、时间显示语言等(一下只列举几个,更多请参考API文档)

      参数名  
      说明  
      默认值  
      decimalPoint
      
      小数点符号  
      “.”  
      downloadJPEG  
      导出显示的文字,还有downloadPDF等,都一样  
      “Download JPEG image”  
      months
      
      月份,字符串数组形式
      
      ['January' 'February', 'March',
      'April','May', 'June',
      'July','August','September',
      'October', 'November', 'December']
      
      numericSymbols  
      数值单位,比如10001k  
      ['k', 'M', 'G', 'T', 'P', 'E']

    7、legend :图例选项

      参数名  
      说明
      默认值  
      layout  
      布局方向,水平horizontal和垂直vertical  
      “horizontal”  
      align  
      对齐方式  
      “center”  
      backgroundColor  
      背景颜色  
      null  
      borderColor  
      图例边框颜色
      #909090
      borderRadius  
      图例边框角度  
      5  
      enabled  
      是否显示图例  
      true
      floating
    是否可以浮动,配合xy属性  
      false  
      shadow  
      是否显示阴影  
      false  

    8、plotOptions :数据点选项

      参数名  
      说明  
      默认值  
      enable  
      是否在数据点上直接显示数据  
      “horizontal”  
      align  
      对齐方式  
      “center”  
      backgroundColor  
      背景颜色  
      null  
      borderColor  
      图例边框颜色  
      #909090  
      borderRadius  
      图例边框角度
      5  
      enabled
      是否显示图例
      true  
      floating  
      是否可以浮动,配合xy属性  
      false
      shadow
      是否显示阴影
      false  

    9、series :数据列选项

      参数名  
      说明  
      默认值  
      data
      
      显示在图表中的数据列,可以为数组或者JSON格式的数据。例如:
      data:[0,  5, 3, 5]data: [{name: 'Point  1',y: 0}, {name: 'Point 2',y: 5}]
      “”
      
      dataParser   
      数据分隔符
      “,”
      name  
      数据列名  
      “”  
      type
      数据列类型,同图表类型
      “line"  

    10、title :图表标题选项

      参数名  
      说明  
      默认值  
      text  
      标题文本内容  
      “Chart title”  
      align   
      水平对齐
      “top”
      margin
      
      标题与副标题或图标区的间距
      
      15  
      floating  
      是否浮动,如果为true,则标题可以偏离主图表区  
      false  
      style  
      css样式  
      {color: ‘#3E576F’,fontSize: ’16px’}
      x  
      水平距离(相对于水平对齐方式)  
      0  
      y  
      垂直距离(相对于垂直对齐方式)  
      15

    11、subtitle :副标题选项 (同标题属性)


    12、tooltip :数据点提示框选项

      参数名  
      说明  
      默认值  
      enable  
      是否显示提示框  
      true
      backgroundColor  
      设置提示框的背景色
      “top”  
      borderColor
      提示框边框颜色  
      “auto"  
      borderRadius
      提示框圆角度
      5  
      style
      css样式  
      style: {
      color: ‘#333333′,

      fontSize:  ’9pt’,
      padding: ’5px’}
      
      formatter
      
      回调函数,用于格式化输出提示框的显示内容
      返回的内容支持html标签如:<b>,  <strong>,<br/>
      
      

    13、xAxis :x轴选项

      参数名  
      说明  
      默认值  
      categories
      
      设置X轴分类名称,数组,例如:
      categories:  ['Apples', 'Bananas', 'Oranges']
      []  
      title   
      X轴名称,其下还有更详细的配置  

      labels
      
      设置X轴各分类名称的样式style,如格式formatter,角度rotation  
      15
      
      max  
      X轴最大值,如果为null,则自动匹配  
      null  
      min
      X轴最大值,同max  
      null  
      gridLineColor  
      网格(竖线)颜色  
      “#C0C0C0″  
      gridLineWidth  
      网格(竖线)宽度
      1  
      lineColor
      基线颜色  
      “#C0D0E0″  
      lineWidth
      lineWidth  
      0  

    14、yAxis :y轴选项(配置同X轴)


    四、实例说明


    1、要求

    l  绘制一个显示本站2012/9/22日访问统计,包括浏览量(pv),IP数的折线图。
    l  轴按每小时统计,y轴显示对应的数量
    l  折线图上x轴对应的点显示数量,当鼠标经过改点时,用提示框形式显相关信息
    l  要有图例显示每条折现代表什么数据信息
    l  图表右下角加上“我爱物联网”字样并链接到www.52wulian.org
    l  要有主标题和副标题
    l  要能实现图表打印及导出常见格式的图片功能

    2、具体实现l

    在html文件中引入Jquery库及Highcharts库文件(highcharts.js及exporting.js)
    l  按照需求参考API文档配置图表每部分功能

    3、代码

    [mw_shl_code=html,true]<!--
      --  HighCharts演示文档  --
      --  By 我爱物联网 --
      --  http://www.52wulian.org --
    -->
    <html>
        <head>

            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
            <!-- HighCharts 代码  -->
            <script type="text/javascript">
                $(function () {
                    var chart;
                    $(document).ready(function() {
                        //定义一个HighCharts
                        chart = new Highcharts.Chart({
                            //配置chart选项
                            chart: {
                                renderTo: 'highcharts1',  //容器名,和body部分的div id要一致
                                type: 'spline'            //图表类型,这里选择折线图
                            },
                            //配置链接及名称选项
                            credits: {
                                enabled : true,
                                href : "http://www.52wulian.org",

                                text : "浏览总理:291,IP总数:74  -- 我爱物联网"
                            },
                            //配置标题
                            title: {

                                text: '我爱物联网 2012/09/22 访问统计',
                                y:10  //默认对齐是顶部,所以这里代表距离顶部10px
                            },
                            //配置副标题
                            subtitle: {
                                text: '数据来源:百度统计',
                                y:30
                            },
                            //配置x轴
                            xAxis: {
                                categories: ['0', '1', '2', '3', '4', '5','6', '7', '8', '9', '10', '11','12','13','14','15','16','17','18','19','20','21','22','23/点']
                            },
                            // 配置y轴
                            yAxis: {
                                title: {
                                    text: '次数(次)'
                                },

                                labels: {  
                                    formatter: function() {
                                        return this.value +'次'
                                    }
                                }
                            },
                            //配置数据点提示框
                            tooltip: {
                                crosshairs: true,
                            },
                            //配置数据列
                            series: [{
                                name: '浏览次数(PV)',
                                marker: {
                                    symbol: 'square'
                                },
                                data: [16,10, 8, 0, 0, 0, 2, 1, 5,10,25,34,8,12,38,22,13,14,11, 8, 8, 5, 8,33]},{
                                name: 'IP数',
                                marker: {
                                    symbol: 'diamond'
                                },
                                data: [ 7, 2, 1, 0, 0, 0, 1, 1, 3, 5, 4, 2,5, 5, 2, 1, 5, 3, 1, 4, 4, 4, 5, 9]
                            }]
                            });
                        });
                    });
            </script>
        </head>
       
        <body>

            <script src="js/highcharts.js"></script>

            <script src="js/exporting.js"></script>   


            <div id="highcharts1" style="min-width:400px;height:400px;margin:0 auto;">
    </body>
    </html>[/mw_shl_code]


    五、附件下载


    API文档:http://pan.baidu.com/share/link?shareid=63516&uk=3087605183
    解压密码:www.52wulian.org


    ------------------------------------------------------------------分割线-------------------------------------------------------------------
    以上内容是本人于2012年9月28日发表在个人博客上的文字,是本人在学习Highcharts过程中整理的比较详细的资料
    原文地址:http://www.52wulian.org/highcharts_api/

    本帖被以下淘专辑推荐:

    Highcharts 中文网论坛管理团队

    我们提供:商业授权技术支持图表定制VIP服务 等相关支持服务
    在线客服:2133220776(QQ,非技术,工作日 10:00 ~ 17:00)
    新浪微博:http://weibo.com/highcharts
  • TA的每日心情
    郁闷
    2015-1-21 19:05
  • 签到天数: 1 天

    [LV.1]初来乍到

    0

    主题

    5

    帖子

    57

    积分

    HC 新手

    Rank: 1

    积分
    57
    发表于 2014-4-14 18:27:20 | 显示全部楼层
    太老了,里面的js和现在的不一样!!
  • TA的每日心情
    开心
    2014-6-1 18:40
  • 签到天数: 1 天

    [LV.1]初来乍到

    0

    主题

    5

    帖子

    276

    积分

    HC 熟手

    Rank: 2

    积分
    276

    最佳新人

    发表于 2014-6-1 19:17:11 | 显示全部楼层
    额,虽然老了点,但看起来还不错的样子,赞一个
  • TA的每日心情

    2014-10-31 09:33
  • 签到天数: 22 天

    [LV.4]偶尔看看III

    1

    主题

    21

    帖子

    490

    积分

    HC 熟手

    Rank: 2

    积分
    490
    发表于 2014-8-22 17:14:13 | 显示全部楼层
    x轴是datetime怎么弄。。。。
  • TA的每日心情
    开心
    2016-7-6 12:12
  • 签到天数: 42 天

    [LV.5]常住居民I

    0

    主题

    5

    帖子

    442

    积分

    HC 熟手

    Rank: 2

    积分
    442
    发表于 2014-8-28 13:54:35 | 显示全部楼层
    很不错, 谢谢

    该用户从未签到

    0

    主题

    1

    帖子

    34

    积分

    HC 新手

    Rank: 1

    积分
    34
    发表于 2014-9-1 15:05:28 | 显示全部楼层
    谢谢楼主分享:lol
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    关闭

    站长推荐上一条 /1 下一条

    快速回复 返回顶部 返回列表