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

四、在线演示

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

五、资源下载

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

 

posted @ 2015-01-27 16:39  岁月淡忘了谁  阅读(12089)  评论(0)  编辑  收藏  举报