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:添加数列 ...
随机推荐
- The 11th Zhejiang Provincial Collegiate Programming Contest->Problem A:A - Pokemon Master
http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3776 题意:比较两组数据的总和大小. #include <iostr ...
- jquery mobile validation
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content ...
- 眼见为实(1):C++基本概念在编译器中的实现
眼见为实(1):C++基本概念在编译器中的实现 对于C++对象模型,相信很多程序员都耳熟能详. 本文试图通过一个简单的例子演示一些C++基本概念在编译器中的实现,以期达到眼见为实的效果. 本文的演示程 ...
- 1988-B. 有序集合
描述 在C++里,有一个神奇的东西,叫做STL,这里提供了很多简单好用的容器,用来实现常用又很难书写的数据结构,如栈(stack)等.其中,有一个容器叫set,译作“有序集合”.首先,这是一个集合,所 ...
- 1962-Fibonacci
描述 This is an easy problem.I think Fibonacci sequence is familiar to you.Now there is another one. H ...
- hdu 1730 Northcott Game 博弈论
很简单的博弈论问题,可以转化为Nim 代码如下: #include<iostream> #include<stdio.h> #include<algorithm> ...
- Redis hash数据类型操作
Redis hash是一个string类型的field和value的映射表.一个key可对应多个field,一个field对应一个value.将一个对象存储 为hash类型,较于每个字段都存储成str ...
- jquery的ajax向后台servlet传递json类型的多维数组
后台运行结果: 前台运行结果: ...
- CenOS7.1安装VNC——让win7远程桌面linux
参考:http://wic.xingning.gov.cn/blog/29 https://linux.cn/article-5335-1.html 1.检查是否安装VNC, rpm -q tiger ...
- ORACLE-修改当前会话的语言环境
修改当前会话的语言环境变量参数:ALTER SESSION SET =将语言改为英语: SQL> ALTER SESSION SET NLS_LANGUAGE='AMERICAN';SESSIO ...