一、将图例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怎么改变显示位置的更多相关文章

  1. highcharts图表的图例legend

    一.将图例Legend放于图表右侧1.设置chart的marginRight属性值:chart: { marginRight: 120}2.设置legend图例属性值如下 legend: { alig ...

  2. 重写TextField Rect 改变显示位置

    很简单很常用的一些东西,希望给需要的人帮助. 效果图如下: 自定义textField init() { super.init(frame: CGRect(x: , y: , width: yourWi ...

  3. highcharts图表组件入门教程:如何监听柱状图柱子点击事件动态更新当前数据点数值和所对应X轴刻度

    highcharts图表组件入门教程:如何监听柱状图柱子点击事件动态更新当前数据点数值和所对应X轴刻度 作者:highcharts | 时间:2014-6-11 14:07:05 | [小  大] | ...

  4. highCharts图表应用-实现多种图表的显示

    在数据统计和分析业务中,有时需要在一个图表中将柱状图.饼状图.曲线图的都体现出来,即可以从柱状图中看出具体数据.又能从曲线图中看出变化趋势,还能从饼状图中看出各部分数据比重.highCharts可以轻 ...

  5. highcharts图表中级入门之xAxis label:X(横)坐标刻度值过长截断多行(换行)显示问题说明

    在使用highcharts图表的过程中,总会碰到这样一个很是棘手的问题,横坐标刻度值太长,在不换行显示的情况下显得格外拥挤.虽然针对这一问题是可以对其刻度值进行旋转以此来避开显示拥挤问题[如何让hig ...

  6. python 2: 解决python中的plot函数的图例legend不能显示中文问题

     问题: 图像标题.横纵坐标轴的标签都能显示中文名字,但是图例就是不能显示中文,怎么解决呢?  解决: plt.figure() plt.title(u'训练性能', fontproperties=f ...

  7. jQuery HighchartsTableHTML表格转Highcharts图表插件

    版权申明jQuery HighchartsTable 由 PMSIpilot 创建,中文使用文档由Highcharts中文网发布本文由Theo.红烧鸡翅膀.Mr.Zhang 翻译整理,版权归Highc ...

  8. highCharts图表入门简介

    一.Highcharts简介 Highcharts:功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库 Highcharts是一款纯javascript编写的图表库,能够很简单便捷的在W ...

  9. highcharts图表配置参数汇总

    一.chart的部分相关属性说明    renderTo: 'container',      //图表的页面显示容器(也就是要显示到的div) chart.events.addSeries:添加数列 ...

随机推荐

  1. jquery捕捉文本域输入事件

    <input type='text' /> change事件是在文本域光标失去焦点时才会触发,要监听正在输入内容事件用键盘事件监听如果想要捕捉文本域输入事件,可以使用$("inp ...

  2. PAT-乙级-1041. 考试座位号(15)

    1041. 考试座位号(15) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 每个PAT考生在参加考试时都会被分 ...

  3. asp 文件上传(ASPUpload组件上传)

    要实现该功能,就要利用一些特制的文件上传组件.文件上传组件网页非常多,这里介绍国际上非常有名的ASPUpload组件 1 下载和安装ASPUpload   要实现该功能,就要利用一些特制的文件上传组件 ...

  4. linux grep和正则表达式

    虽然正则表达式经常都在用,但是很少能够静下心来仔细的总结一下.最近看了一个台湾人的网站叫做鸟哥Linux私房菜,关于正则表达式的描述挺详细的.在此,我进行一下总结,如果想仔细的学习正则表达式,请访问鸟 ...

  5. 【BZOJ 3190】 3190: [JLOI2013]赛车 (半平面交)

    3190: [JLOI2013]赛车 Description 这里有一辆赛车比赛正在进行,赛场上一共有N辆车,分别称为个g1,g2--gn.赛道是一条无限长的直线.最初,gi位于距离起跑线前进ki的位 ...

  6. c++ 基础学习: 左值 概念cocos2d-x3.0的实际应用

    左值:概念baidu 1.2.6.2 与Cocos2d-x内存管理的结合 在2.x的使用场景中,CCArray和CCDictionary通常被分配在堆上,我们不得不需要考虑在适当的地方释放其内存.新的 ...

  7. PHP开发工具介绍之zendStudio

    1.PHP开发工具介绍之zendStudio 下载:进入官网:http://www.zend.com/en/products/studio 选择下载安装 注意这里的工作空间要和你Apache的工作目录 ...

  8. redis的key过期时间

    public void set(String key,String value,int liveTime){ this.set(key, value); this.getJedis().expire( ...

  9. HeadFirst设计模式之RMI介绍

    一.使用步骤 1.generate stubs and skeletons:Run rmic on the remote implementation class 如:D:\Workspaces\My ...

  10. vs2015 打不开了 提示"CSharpPackage",未能正确加载xx包

    原文:vs2015 打不开了 提示"CSharpPackage" 最近发现vs2015 在新建项目和加载现有项目的时候会报错 提示 开始我以为是系统的问题导致vs 配置除了问题,重 ...