【HighCharts系列教程】八、Html标签属性——Labels
一、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的更多相关文章
- Spring 系列教程之自定义标签的解析
Spring 系列教程之自定义标签的解析 在之前的章节中,我们提到了在 Spring 中存在默认标签与自定义标签两种,而在上一章节中我们分析了 Spring 中对默认标签的解析过程,相信大家一定已经有 ...
- Spring 系列教程之默认标签的解析
Spring 系列教程之默认标签的解析 之前提到过 Spring 中的标签包括默认标签和自定义标签两种,而两种标签的用法以及解析方式存在着很大的不同,本章节重点带领读者详细分析默认标签的解析过程. 默 ...
- CRL快速开发框架系列教程八(使用CRL.Package)
本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框 ...
- 黄聪：Microsoft Enterprise Library 5.0 系列教程(八) Unity Dependency Injection and Interception
原文:黄聪:Microsoft Enterprise Library 5.0 系列教程(八) Unity Dependency Injection and Interception 依赖注入容器Uni ...
- SpringBoot系列教程之事务传递属性
200202-SpringBoot系列教程之事务传递属性 对于mysql而言,关于事务的主要知识点可能几种在隔离级别上:在Spring体系中,使用事务的时候,还有一个知识点事务的传递属性同样重要,本文 ...
- 【HighCharts系列教程】三、图表属性——chart
一.chart属性说明 Chart是HighCharts图表中主要属性,包括了图表区域的颜色.线条.高度.宽度.对齐.图表类型等诸多属性,也是HighCharts图表中必须配置的属性之一. 配置cha ...
- 【HighCharts系列教程】一、认识Highcharts
一.什么是HighCharts HighCharts是网页报表工具,开发语言是Javascript HighCharts是一个简单易用.美观.跨平台.跨浏览器的图表工具 HighCharts支持图表的 ...
- 【HighCharts系列教程】二、Highcharts结构及API文档
一.你必须知道的 1.首先,HighCharts是基于Jquery框架开发的,所以需要在页面引入Jquery,具体代码是: <script type="text/javascript& ...
- Influx Sql系列教程八：query数据查询基本篇
前面几篇介绍了InfluxDB的添加,删除修改数据,接下来进入查询篇,掌握一定的SQL知识对于理解本篇博文有更好的帮助,下面在介绍查询的基础操作的同时,也会给出InfluxSql与SQL之间的一些差别 ...
随机推荐
- 硬盘安装win8系统方法汇总
从硬盘安装 (推荐)硬盘安装方法一 使用Nt6 hdd installer进行安装,此方法适合XP,vista, Windows 7等系统. 下载Nt6 hdd installer(Win8硬盘安装工 ...
- 解读QML之一
http://cache.baiducontent.com/c?m=9d78d513d98002b8599dcb201a17a7374408c6347691c4523f8a9c12d522195646 ...
- OpenGL红宝书第一个例子：绘制两个三角形
1. 环境配置 在这里不在做环境配置的说明,因为网上可以找到很多类似的教程,如果有需要可以@我,我也希望能帮到大家,其它的不说了,先上我的代码 2. 第一个程序代码 创建LoadShader.h #p ...
- 推荐 iOS 网站：
0. https://developer.apple.com/videos/1. http://www.raywenderlich.com2. http://nshipster.com3. http: ...
- 关键自li，em，dl，ul,ol,footer,header,nav,aside,article
section 版块 用于划分页面上的不同区域,或者划分文章里不同的节 header 页面头部或者版块(section)头部 footer 页面底部或者(section)底部 nav 导航 (包含链接 ...
- 好的 小图标 html
只需引用样式,加入字体文件到项目中就可实现 <link href="css/font-awesome.min.css" rel="stylesheet"& ...
- lucene中Field.Index,Field.Store的一些设置
lucene在doc.add(new Field("content",curArt.getContent(),Field.Store.NO,Field.Index.TOKENIZE ...
- UVA - 11400 Lighting System Design (区间DP)
这个问题有两个点需要注意: 1. 对于一种灯泡,要么全换,要么全不换. 证明: 设一种灯泡单价为p1,电池价格为k1,共需要L个,若把L1个灯泡换成单价为p2,电池为k2的灯泡,产生的总花费为p1*L ...
- html dom模型一
DOM 节点 包含的节点内容: 根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点: 整个文档是一个文档节点 每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点 ...
- 最短路径算法专题2----Dijkstra
这个算法适用于求单源最短路径,从一点出发,到其余个点的最短路径. 算法要点: 1.用二维数组存放点到点的距离-----不能相互到达的点用MAX代替距离 2.用dis数组存放源点到任意其他一点的距离-- ...