【HighCharts系列教程】八、Html标签属性——Labels

一、labels属性说明

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

二、labels属性详解

 

参数子参数说明默认值
items—-一个html标签—-
—-htmlhtml代码“”
—-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》

五、在线演示

演示地址:
http://www.52wulian.org/test/HighCharts/highcharts_2_6_labels.html

六、资源下载

本例源文件:
http://pan.baidu.com/share/link?shareid=248660&uk=3087605183

 

    原文作者:岁月淡忘了谁
    原文地址: https://www.cnblogs.com/henuyuxiang/p/4253346.html
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞