一、labels属性说明

Labels属性允许在HighCharts图表的任意位置添加任意的html代码。可以实现许多自定义内容。

二、labels属性详解

参数 子参数 说明 默认值
items —- 一个html标签 —-
—- html html代码 “”
—- style 标签位置(只能是位置，其他css不行) style: {
left: ’100px’,
top: ’100px’
}
style —- 标签的颜色（这里的style和items中的style不同） style: {
color: ‘#3E576F’
} 

三、实例说明

<html>

    <head>

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

        <script type="text/javascript" src="js/jquery.min.js"></script>

        <script type="text/javascript">

            $(function () {

            var chart;

            $(document).ready(function() {

                chart = new Highcharts.Chart({

                  chart: {

                    renderTo: 'container',

                    type: 'areaspline',

                  },

                  credits : {

                        enabled:false//不显示highCharts版权信息

                  },

                  labels:{

                      items:[{

                        //标签代码（html代码）

                        html:'<p style="font-size:20">Copyright © 2012-2013 </p><a href="http://www.52wulian.org" style="font-size:20;text-decoration: underline;">我爱物联网</a>',

                        style:{ //设置标签位置

                                left:'100px',

                                top:'50px',

                        }

                    }],

                      style:{    //设置标签颜色

                          color:'rgb(0,0,255)'

                      }

                  },

                  xAxis: {

                    categories: ['2011-11','2011-12','2012-01','2012-02','2012-03']

                  },

                  series: [{

                        name: 'series1',

                        data: [2,4,5,9,2]

                    },{

                        name:'series2',

                        data:[3,5,7,2,1]

                    }]

              });

            });

            });

        </script>

    </head>

    <body>

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

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

        <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

    </body>

</html>

四、效果截图

五、在线演示

六、资源下载

【HighCharts系列教程】八、Html标签属性——Labels的更多相关文章

  1. Spring 系列教程之自定义标签的解析

    Spring 系列教程之自定义标签的解析 在之前的章节中,我们提到了在 Spring 中存在默认标签与自定义标签两种,而在上一章节中我们分析了 Spring 中对默认标签的解析过程,相信大家一定已经有 ...

  2. Spring 系列教程之默认标签的解析

    Spring 系列教程之默认标签的解析 之前提到过 Spring 中的标签包括默认标签和自定义标签两种,而两种标签的用法以及解析方式存在着很大的不同,本章节重点带领读者详细分析默认标签的解析过程. 默 ...

  3. CRL快速开发框架系列教程八(使用CRL.Package)

    本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...

  4. 黄聪：Microsoft Enterprise Library 5.0 系列教程(八) Unity Dependency Injection and Interception

    原文:黄聪:Microsoft Enterprise Library 5.0 系列教程(八) Unity Dependency Injection and Interception 依赖注入容器Uni ...

  5. SpringBoot系列教程之事务传递属性

    200202-SpringBoot系列教程之事务传递属性 对于mysql而言,关于事务的主要知识点可能几种在隔离级别上:在Spring体系中,使用事务的时候,还有一个知识点事务的传递属性同样重要,本文 ...

  6. 【HighCharts系列教程】三、图表属性——chart

    一.chart属性说明 Chart是HighCharts图表中主要属性,包括了图表区域的颜色.线条.高度.宽度.对齐.图表类型等诸多属性,也是HighCharts图表中必须配置的属性之一. 配置cha ...

  7. 【HighCharts系列教程】一、认识Highcharts

    一.什么是HighCharts HighCharts是网页报表工具,开发语言是Javascript HighCharts是一个简单易用.美观.跨平台.跨浏览器的图表工具 HighCharts支持图表的 ...

  8. 【HighCharts系列教程】二、Highcharts结构及API文档

    一.你必须知道的 1.首先,HighCharts是基于Jquery框架开发的,所以需要在页面引入Jquery,具体代码是: <script type="text/javascript& ...

  9. Influx Sql系列教程八：query数据查询基本篇

    前面几篇介绍了InfluxDB的添加,删除修改数据,接下来进入查询篇,掌握一定的SQL知识对于理解本篇博文有更好的帮助,下面在介绍查询的基础操作的同时,也会给出InfluxSql与SQL之间的一些差别 ...

随机推荐

  1. Spring Security3实现,权限动态获取

    Spring Security3实现,权限动态获取 原文  http://blog.csdn.net/yangwei19680827/article/details/9359113 主题 网络安全Sp ...

  2. spring多个数据源配置

    sys.properties中的内容 jdbc.driverClassName=oracle.jdbc.driver.OracleDriver DB.url=jdbc\:oracle\:thin\:@ ...

  3. phpStudy环境配置多个站点，绑定域名

    经常做网站的朋友,往往要在自已的电脑同时建立多个站点,而phpstudy这款软件就能很好的解决这个问题,大家看下图 点击上图中的 其它选项菜单 ,就会弹出下面的对话框,然后点击 站点域名管理 然 后在 ...

  4. 覆盖问题<shui>

    题目链接 /* hang[maxn]标记每行是否可以被攻击,并计算前缀和 lie [maxn]标记每列是否可以被攻击,并计算前缀和 */ #include<cstdio> // #incl ...

  5. Gson解析数据

    package com.bwie.test;import java.io.BufferedReader;import java.io.IOException;import java.io.InputS ...

  6. gcc编译错误表

    conversion from %s to %s not supported by iconv”iconv 不支持从 %s 到 %s 的转换” iconv_open”iconv_open” no ic ...

  7. div里面的margin-top失效

    div标签中的元素margin-top失效的解决方法 元素上级标签是div,已经设置了width和height等的属性,可是,在对元素使用margin进行调整的时候,无法生效,下面有个不错的解决方法, ...

  8. java 数组流

    Example10_10.java import java.io.*; public class Example10_10 { public static void main(String args[ ...

  9. Box2d FilterData

    Box2D.Dynamics.b2ContactFilter类,碰撞源码: public virtual function ShouldCollide(fixtureA:b2Fixture, fixt ...

  10. c++ 中bool 的默认值

    比如在Test.h中定义变量: _isFirst; //Test.h头文件 #ifndef __TEST_H__ #define __TEST_H__ class Test{ private: boo ...