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:添加数列 ...
随机推荐
- [cc150] check palindrome of a singly linked list
Problem: Implement a function to check if a singly linked list is a palindrome. 思路: 最简单的方法是 Reverse ...
- select框的text与value值的获取(实用版)
function def(){ var key = document.getElementById ('selectarea'); //select list var value = docum ...
- POJ2031Building a Space Station
http://poj.org/problem?id=2031 题意:你是空间站的一员,太空里有很多球形且体积不一的“小房间”,房间可能相距不近,也可能是接触或者甚至是重叠关系,所有的房间都必须相连,这 ...
- [codility]Min-abs-sum
https://codility.com/demo/take-sample-test/delta2011/ 0-1背包问题的应用.我自己一开始没想出来.“首先对数组做处理,负数转换成对应正数,零去掉, ...
- nginx静态资源分离部署
修改nginx.conf文件,用于nginx处理静态资源. 主要配置如下(在server配置中加入location配置即可): server { listen 80; server_name 123. ...
- update多表陷阱
今天同学发了个sql题目 A1表 B1表 id num id snum 1 10 1 90 2 2000 3 4000 3 30 B表的数据插入A表当中 最后的结果 A表 1 90 2 2000 3 ...
- SGU111 Very simple problem
多少个平方数小于等于X,二分. PS:java BigInteger. import java.util.*; import java.math.*; public class Solution { ...
- node.js 模块和包
Node.js 的模块和包机制的实现参照了 CommonJS 的标准,但并未完全遵循.不过两者的区别并不大,一般来说你大可不必担心,只有当你试图制作一个除了支持 Node.js之外还要支持其他平台的模 ...
- Android init进程概述
init进程,其程序位于根文件系统中,在kernle自行启动后,其中的 start_kernel 函数把根文件系统挂载到/目录后,在 rest_init 函数中通过 kernel_thread(ker ...
- WinAPI—— CallNextHookEx调用下一个钩子
CallNextHookEx( hhk: HHOOK; {当前钩子的句柄} nCode: Integer; {钩子代码; 就是给下一个钩子要交待的} wParam: WPARAM; ...