【HighCharts系列教程】十、圖例屬性——legend


一、legend屬性說明

Legend是HighCharts圖表的圖例屬性,如圖

highcharts_2_8_legend

默認情況下,HighCharts都會有圖例,無特殊情況,默認即可滿足需求,所以一般不用配置Legend屬性。

二、lang屬性詳解

參數 說明 默認值
labelFormatter 顯示函數,主要是調用該數據列的名字 labelFormatter: function() {
return this.name;
}
backgroundColor 圖例的背景顏色 null
floating 是否隨x,y軸浮動 false
shadow 是否顯示陰影 false
layout 布局,有垂直(vertical)和水平(horizontal) horizontal
width 圖例的寬度 null
reversed 數據列顯示的順序,為false時,從第一個數據列開始,否則倒序 false
symbolWidth 顏色條的寬度 30
borderRadius 圖例邊框圓角角度 5
borderColor 圖例邊框顏色 #909090
borderWidth 圖例邊框寬度 1
align 水平對齊,有left(左),centerr(中),右(right) center
verticalAlign 垂直對齊,有top(上),middle(中),下(bottom) bottom

x

y

圖例位置

x:15

y:0

三、實例說明

 

<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: 'bar', }, credits : { enabled:false//不顯示highCharts版權信息 }, legend:{ labelFormatter: function() { return this.name+"xx"; }, backgroundColor :'#6DBFBB', floating:true, shadow :true, layout :'vertical', width :150, reversed :true, symbolWidth :40, borderRadius :10, //borderColor :'red', borderWidth :2, align:'right', verticalAlign :'top', x:-20, y:50 }, xAxis: { type:'datetime', categories: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] }, series: [{ name: 'series1', data: [2,4,5,9,2,7] },{ name:'series2', data:[3,5,7,2,1,4] }] }); }); }); </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>

四、在線演示

五、資源下載

 


免責聲明!

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



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