【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_2_6_labels

五、在線演示

六、資源下載

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM