highcharts图表的图例legend怎么改变显示位置
一、将图例Legend放于图表右侧
1、设置chart的marginRight属性值:
chart: {
marginRight: 120
}
2、设置legend图例属性值如下
legend: {
align: 'right', //水平方向位置
verticalAlign: 'top', //垂直方向位置
x: 0, //距离x轴的距离
y: 100 //距离Y轴的距离
}
3、效果图:

二、将图例放于图表左上角
1、设置legend的属性
legend: {
align: 'left', //水平方向位置
verticalAlign: 'top', //垂直方向位置
x: 0, //距离x轴的距离
y: 0 //距离Y轴的距离
}
2、效果图:

三、将图例放于图表上方中央
1、设置legend属性如下
legend: {
align: 'center', //水平方向位置
verticalAlign: 'top', //垂直方向位置
x: 0, //距离x轴的距离
y: 20 //距离Y轴的距离
}
2、效果图如下:

四、将图例放于下方中央
1、设置legend属性如下
legend: {
align: 'center', //水平方向位置
verticalAlign: 'bottom', //垂直方向位置
x: 0, //距离x轴的距离
y: 0 //距离Y轴的距离
},
2、效果图如下:

参考网址:http://www.stepday.com/topic/?446
highcharts图表的图例legend怎么改变显示位置的更多相关文章
- highcharts图表的图例legend
一.将图例Legend放于图表右侧1.设置chart的marginRight属性值:chart: { marginRight: 120}2.设置legend图例属性值如下 legend: { alig ...
- 重写TextField Rect 改变显示位置
很简单很常用的一些东西,希望给需要的人帮助. 效果图如下: 自定义textField init() { super.init(frame: CGRect(x: , y: , width: yourWi ...
- highcharts图表组件入门教程:如何监听柱状图柱子点击事件动态更新当前数据点数值和所对应X轴刻度
highcharts图表组件入门教程:如何监听柱状图柱子点击事件动态更新当前数据点数值和所对应X轴刻度 作者:highcharts | 时间:2014-6-11 14:07:05 | [小 大] | ...
- highCharts图表应用-实现多种图表的显示
在数据统计和分析业务中,有时需要在一个图表中将柱状图.饼状图.曲线图的都体现出来,即可以从柱状图中看出具体数据.又能从曲线图中看出变化趋势,还能从饼状图中看出各部分数据比重.highCharts可以轻 ...
- highcharts图表中级入门之xAxis label:X(横)坐标刻度值过长截断多行(换行)显示问题说明
在使用highcharts图表的过程中,总会碰到这样一个很是棘手的问题,横坐标刻度值太长,在不换行显示的情况下显得格外拥挤.虽然针对这一问题是可以对其刻度值进行旋转以此来避开显示拥挤问题[如何让hig ...
- python 2: 解决python中的plot函数的图例legend不能显示中文问题
问题: 图像标题.横纵坐标轴的标签都能显示中文名字,但是图例就是不能显示中文,怎么解决呢? 解决: plt.figure() plt.title(u'训练性能', fontproperties=f ...
- jQuery HighchartsTableHTML表格转Highcharts图表插件
版权申明jQuery HighchartsTable 由 PMSIpilot 创建,中文使用文档由Highcharts中文网发布本文由Theo.红烧鸡翅膀.Mr.Zhang 翻译整理,版权归Highc ...
- highCharts图表入门简介
一.Highcharts简介 Highcharts:功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库 Highcharts是一款纯javascript编写的图表库,能够很简单便捷的在W ...
- highcharts图表配置参数汇总
一.chart的部分相关属性说明 renderTo: 'container', //图表的页面显示容器(也就是要显示到的div) chart.events.addSeries:添加数列 ...
随机推荐
- bzoj 3637: Query on a tree VI 树链剖分 && AC600
3637: Query on a tree VI Time Limit: 8 Sec Memory Limit: 1024 MBSubmit: 206 Solved: 38[Submit][Sta ...
- SQL手工注入
site:xx.cn inurl:asp?id= //找文章 xx.cn/pth/onews.asp?id=243' //试注入 xx.cn/pth/onews.asp?id=243 order b ...
- (转)基于即时通信和LBS技术的位置感知服务(三):搭建Openfire服务器+测试2款IM客户端
主要包含4个章节: 1. Java 领域的即时通信的解决方案 2. 搭建 Openfire 服务器 3. 使用客户端测试我们搭建的 Openfire 服务器 4. Smack 和 ASmack 一.J ...
- eclipse连接远程Hadoop报错,Caused by: java.io.IOException: 远程主机强迫关闭了一个现有的连接。
eclipse连接远程Hadoop报错,Caused by: java.io.IOException: 远程主机强迫关闭了一个现有的连接.全部报错信息如下: Exception in thread & ...
- linux的定时任务crontab
每隔一分钟执行以下语句: #打印当前时间: date "+%Y-%m-%d %T" 保存为/usr/test/test.sh 查看系统中当前用户有多少个定时任务: crontab ...
- codeforces #310 div1 C
操作无论是U还是L,都会使原图形分裂成两个图形,且两个图形的操作互不影响 我们又发现由于操作点只可能在下斜线上,如果将操作按x排序 那么无论是U还是L,都会将操作序列完整分割成两半,且两个操作序列互不 ...
- Android:安卓资源引用符号的含义
@代表引用资源 @*代表引用系统的非public资源,如: @*android:color/white @[package:]type/name引用自定义资源,如: android:text=&quo ...
- MyBatis的动态SQL操作--更新
更新条件不确定,需要根据具体的情况生成sql语句. id是主键,一般不会去更新. 1.只更新name的值 update student set name = ? where id = ? 2.只更新s ...
- 安装Hadoop系列 — 安装Hadoop
安装步骤如下: 1)下载hadoop:hadoop-1.0.3 http://archive.apache.org/dist/hadoop/core/hadoop-1.0.3/ 2)解压文 ...
- 【开源推荐】AllJoyn:打造全球物联网的通用开源框架
摘要:随着智能设备的发展,物联网逐渐进入了人们的生活.据预测,未来几乎一切东西(超过500亿台设备)都可以互联.高通公司发布了开源项目AllJoyn,这是一个能够使连接设备间进行互操作的通用软件框架和 ...