码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2015-01-27 17:53:25      阅读:245      评论:0      收藏:0      [点我收藏+]

标签:

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

四、在线演示

五、资源下载

 

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

标签:

原文地址:http://www.cnblogs.com/henuyuxiang/p/4253352.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!