【HighCharts系列教程】十、图例属性——legend

一、legend属性说明

Legend是HighCharts图表的图例属性，如图

默认情况下，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]
                    }]