一、将图例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. 免费素材:25套免费的 Web UI 设计的界面元素(转)

    Web 元素是任何网站相关项目都需要的,质量和良好设计的元素对于设计师来说就像宝贝一样.如果您正在为您的网站,博客,Web 应用程序或移动应用程序寻找完美设计的网页元素,那么下面这个列表会是你需要的. ...

  2. 转Spring+Hibernate+EHcache配置(三)

    配置每一项的详细作用不再详细解释,有兴趣的请google下 ,这里需要注意一点defaultCache标签定义了一个默认的Cache,这个Cache是不能删除的,否则会抛出No default cac ...

  3. Akka的fault tolerant

    要想容错,该怎么办? 父actor首先要获知子actor的失败状态,然后确定该怎么办, “怎么办”这回事叫做“supervisorStrategy".   // Restart the st ...

  4. 从零开始运维之旅:如何监控你的 Windows?

    小弟乃刚刚踏入运维圈的资深小白一枚,正所谓完事开头难,公司里怕我把生产系统搞坏就让我先在测试环境上先练练手.巧的是测试环境又是我熟悉的 Windows 环境,心中窃喜啊.但问题随之而来,运维从何下手呢 ...

  5. Oracle sql查询

    http://blog.csdn.net/jlds123/article/details/6572559

  6. [Ruby on Rails系列]2、开发环境准备:Ruby on Rails开发环境配置

    前情回顾 上次讲到Vmware虚拟机的安装配置以及Scientific Linux 6.X系统的安装.这回我们的主要任务是在Linux操作系统上完成Ruby on Rails开发环境的配置. 在配置环 ...

  7. 微软在 .NET 3.5 新增了一个 HashSet 类,在 .NET 4 新增了一个 SortedSet 类,本文介绍他们的特性,并比较他们的异同。

    微软在 .NET 3.5 新增了一个 HashSet 类,在 .NET 4 新增了一个 SortedSet 类,本文介绍他们的特性,并比较他们的异同. .NET Collection 函数库的 Has ...

  8. 影响pogo pin连接器使用寿命的因素

    精细化.安装简易化及使用寿命长是现在数码电子产品的趋势发展,pogo pin连接器体积小而且弹簧伸缩式设计,可以更好的缩小数码电子产品的尺寸并且连接安装更加的简单方便,因此pogo pin连接器得到了 ...

  9. *IntelliJ idea创建创建Maven管理的Java Web项目

    配置IntelliJ在IntelliJ的设置中,可以设置maven的安装目录,settings.xml文件的位置,和本地仓库的位置等信息.

  10. R语言学习笔记:查看函数的R源代码

    getAnywhere 该函数可以返回一些函数的R源代码,如: getAnywhere(kmeans) 该函数具体用法,请参看官方说明. Retrieve an R Object, Including ...