一、将图例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、结果图如下:

highcharts图表的图例legend的更多相关文章

  1. highcharts图表的图例legend怎么改变显示位置

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

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

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

  3. highCharts图表入门简介

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

  4. 关于Highcharts图表组件动态修改属性的方法(API)总结之Series

    Highcharts图表组件内的Series很重要,如果说Categries是其大脑,那么Series就是其心脏.这两者才是Highcharts图表组件的重中之重啊.接下来就为大家介绍关于设置Seri ...

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

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

  6. 在asp.net中如何自己编写highcharts图表导出到自己的服务器上来

    1.准备工作:网上下载highcharts导出的关键dll.      1).Svg.dll:因为highcharts的格式其实就是一个xml,采用svg的方式画图:      2).itextsha ...

  7. HighCharts 图表高度动态调整

    HighCharts 图表高度动态调整 前言 在使用HighCharts控件过程中,发现图表可以自适应div的高度,无法根据图表x.y轴的数量动态调整div高度,否则图标挤在一起,看起来非常不美观,也 ...

  8. highCharts图表应用-模拟心电图

    通过前两章的学习,相信大家对highcharts已经有了初步的了解.这一章将通过一个例子来模拟Highcharts如何实现经常变化的数据显示. 比如说股票的涨停.实时篮球比分以及A选手和B选手的支持率 ...

  9. HighCharts 图表插件 自定义绑定 时间轴数据

    HighCharts 图表插件 自定义绑定 时间轴数据,解决时间轴自动显示数据与实际绑定数据时间不对应问题! 可能要用到的源码片段:http://code.662p.com/list/14_1.htm ...

随机推荐

  1. Java -- 数据库 多表操作,1对多,多对多,1对1。 基于dbutils框架

    1. 1对多,部门--员工 为例, 多的一方建外键. domain,建立bean对象 public class Department { private String id; private Stri ...

  2. 用createinstallmedia创建可恢复的OSX安装DMG

    准备 从App Store下载OS X安装程序,下载完成,会在应用程序目录 /Applications 下找到类似 Install OS X 10.xxxxxx.app(中文名如:安装 OS X 10 ...

  3. Android中播放DSD音乐

    Github上有个简单的Alsa DSD测试程序,可以播放DSD,地址位于:https://github.com/zonque/alsa-dsd-player 细看其代码,发现有ALSA_FORMAT ...

  4. element-ui树结构懒加载

    在实际项目中,往往树结构数据量较大,这时树节点必须懒加载 element-ui树的懒加载: <div style="width:100%;height:420px;overflow: ...

  5. shell编程-条件判断与流程控制

    1.条件判断式 按照文件类型进行判断: 两种判断格式: test -e /root/install.log [ -e /root/install.log ] 判断命令是否正确执行: [ -d /roo ...

  6. python主函数

    Python的人会很不习惯Python没有main主函数. 这里简单的介绍一下,在Python中使用main函数的方法 #hello.py def foo(): str="function& ...

  7. OpenCV 2.4.9 +VS2013 开发环境配置

    OpenCV 的全称是:Open Source Computer Vision Library.OpenCV是一个基于(开源)发行的跨平台计算机视觉库,可以运行在Linux.Windows和Mac O ...

  8. map的内存分配机制分析

    该程序演示了map在形成的时候对内存的操作和分配. 因为自己对平衡二叉树的创建细节理解不够,还不太明白程序所显示的日志.等我明白了,再来修改这个文档. /* 功能说明: map的内存分配机制分析. 代 ...

  9. 大鱼吃小鱼(运用stack的模拟)

    个人心得:这一题在暑假集训的周测里做到过,当时就死模拟,然后卡了很久很久才做对.现在发现运用stack其实非常方便, 将向左向右游动的鱼分开,则往后走只要往右移动的就放入stack,往左的时候就与st ...

  10. C++对C语言的拓展(4)—— 函数重载

    函数重载(Function Overload):用同一个函数名定义不同的函数,当函数名和不同的参数搭配时函数的含义不同. 1.重载规则 (1)函数名相同: (2)参数个数不同,参数的类型不同,参数顺序 ...