zoukankan      html  css  js  c++  java
  • 【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>

    四、在线演示

    五、资源下载

  • 相关阅读:
    EventBus (四) Sticky事件
    EventBus (三) 源码解析 带你深入理解EventBus
    EventBus (二) 使用详解——EventBus使用进阶
    EventBus (一) 使用详解——初步使用EventBus
    Android布局优化之ViewStub、include、merge使用与源码分析
    Android API 中文(14) —— ViewStub
    ViewStub用法
    FaceBook推出的Android图片加载库-Fresco
    WinForm打印之页边距
    带参数的多线程的方式
  • 原文地址:https://www.cnblogs.com/henuyuxiang/p/4253352.html
Copyright © 2011-2022 走看看