【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>
四、效果截图
五、在线演示
六、资源下载
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。