【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]
                    }]
              });
            });
            });
        </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

时间: 2024-10-10 06:16:25

【HighCharts系列教程】十、图例属性——legend的相关文章

CRL快速开发框架系列教程十(导出对象结构)

本系列目录 CRL快速开发框架系列教程一(Code First数据表不需再关心) CRL快速开发框架系列教程二(基于Lambda表达式查询) CRL快速开发框架系列教程三(更新数据) CRL快速开发框架系列教程四(删除数据) CRL快速开发框架系列教程五(使用缓存) CRL快速开发框架系列教程六(分布式缓存解决方案) CRL快速开发框架系列教程七(使用事务) CRL快速开发框架系列教程八(使用CRL.Package) CRL快速开发框架系列教程九(导入/导出数据) CRL快速开发框架系列教程十(

Unity3D脚本中文系列教程(十六)

Unity3D脚本中文系列教程(十五) ◆ function OnPostprocessAudio (clip:AudioClip):void 描述:◆  function OnPostprocessGameObjectWithUserProperties (root : GameObject, propNames : string[], values : object[]) : void 描述:在导入文件时,为每个至少附加了一个用户属性的游戏物体调用propNames是一个string[ ],

【HighCharts系列教程】一、认识Highcharts

一.什么是HighCharts HighCharts是网页报表工具,开发语言是Javascript HighCharts是一个简单易用.美观.跨平台.跨浏览器的图表工具 HighCharts支持图表的类型有:曲线图.柱状图.饼状图.区域图.散点图.综合图的各种图表需求.最新版2.3.5(截止2013/1/10)增加了各种仪表.时钟等类型图表 说了这么多,总之就是一句话,如果你有图表需求,选择HighCharts吧! 二.如何学习HighCharts 修改HighCharts自带的例子 了解Hig

ComicEnhancerPro 系列教程十九:用JpegQuality看JPG文件的压缩参数

作者:马健邮箱:[email protected] 主页:http://www.comicer.com/stronghorse/ 发布:2017.07.23 教程十九:用JpegQuality看JPG文件的压缩参数 事先声明: 严格说来这篇教程是讲JpegQuality的,其实与CEP本身关系不大,但因为我自己经常从CEP启动JpegQuality查看JPG压缩参数, 我觉得其他人可能也有类似的需求,所以就在CEP系列教程里加了这么一篇,并不是有意给JpegQuality打广告. JpegQua

ComicEnhancerPro 系列教程十八:JPG文件长度与质量

作者:马健邮箱:[email protected] 主页:http://www.comicer.com/stronghorse/ 发布:2017.07.23 教程十八:JPG文件长度与质量 众所周知,JPG是一种"有损"压缩格式,与PNG等无损压缩格式相比,最大的问题是:如果反复压缩,会造成图像质量逐渐退化.所以在对JPG文件进行处理,并且输出仍然选择JPG格式的情况下,很多人都会问同样的一个问题:如何才能在尽情享受有损压缩带来的较小文件长度的便利前提下,尽量避免图像质量退化? 为了解

kubernetes系列教程(十八)TKE中实现ingress服务暴露

写在前面 上一篇文章中介绍了基于Nginx实现Ingress Controller的实现,介绍了Nginx Ingress Controller安装.相关功能,TLS,高级特性等介绍,本章开始介绍基于腾讯云TKE实现ingress服务暴露. 1. TKE ingress 1.1 TKE ingress架构 TKE是Tencent Kubernetes Engine即腾讯云基于kubernetes提供的公有云上容器云服务,TKE提供了两种暴露服务的方式:service和ingress. 内网CLB

【HighCharts系列教程】四、颜色属性——colors

一.Colors属性说明 配置Colors,可以自定义数据列的颜色. 默认下colors就包含一系列颜色,在个性化或需要调整颜色的顺序下,我们可以配置该属性. 二.colors属性详解 Colors属性中包含的是一个十六进制颜色代码数组. 参数 默认值 说明 一组颜色代码,如 colors:['#4572A7','#89A54E',...] colors:[ '#4572A7',   '#AA4643',   '#89A54E',   '#80699B',   '#3D96AE',   '#DB

【HighCharts系列教程】三、图表属性——chart

一.chart属性说明 Chart是HighCharts图表中主要属性,包括了图表区域的颜色.线条.高度.宽度.对齐.图表类型等诸多属性,也是HighCharts图表中必须配置的属性之一. 配置chart属性,你可以轻松改变你的图表的样式.外观. 二.chart属性详解 Chart常用属性如下表 参数 描述 默认值 backgroundColor 设置图表区背景色 #FFFFFF borderWidth 设置图表边框宽度 0 borderRadius 设置图表边框圆角角度 5 renderTo

【HighCharts系列教程】八、Html标签属性——Labels

一.labels属性说明 Labels属性允许在HighCharts图表的任意位置添加任意的html代码.可以实现许多自定义内容. 二.labels属性详解 参数 子参数 说明 默认值 items —- 一个html标签 —- —- html html代码 “” —- style 标签位置(只能是位置,其他css不行) style: {left: ’100px’,top: ’100px’} style —- 标签的颜色(这里的style和items中的style不同) style: {color