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

一、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]

                    }]

              });

            });

            });

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

巴特西

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

一、legend属性说明

二、lang属性详解

三、实例说明

四、在线演示

五、资源下载

最新文章

热门文章