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

highcharts图表的图例legend的更多相关文章
- highcharts图表的图例legend怎么改变显示位置
		
一.将图例Legend放于图表右侧1.设置chart的marginRight属性值:chart: { marginRight: 120}2.设置legend图例属性值如下 legend: { alig ...
 - jQuery HighchartsTableHTML表格转Highcharts图表插件
		
版权申明jQuery HighchartsTable 由 PMSIpilot 创建,中文使用文档由Highcharts中文网发布本文由Theo.红烧鸡翅膀.Mr.Zhang 翻译整理,版权归Highc ...
 - highCharts图表入门简介
		
一.Highcharts简介 Highcharts:功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库 Highcharts是一款纯javascript编写的图表库,能够很简单便捷的在W ...
 - 关于Highcharts图表组件动态修改属性的方法(API)总结之Series
		
Highcharts图表组件内的Series很重要,如果说Categries是其大脑,那么Series就是其心脏.这两者才是Highcharts图表组件的重中之重啊.接下来就为大家介绍关于设置Seri ...
 - highCharts图表应用-实现多种图表的显示
		
在数据统计和分析业务中,有时需要在一个图表中将柱状图.饼状图.曲线图的都体现出来,即可以从柱状图中看出具体数据.又能从曲线图中看出变化趋势,还能从饼状图中看出各部分数据比重.highCharts可以轻 ...
 - 在asp.net中如何自己编写highcharts图表导出到自己的服务器上来
		
1.准备工作:网上下载highcharts导出的关键dll. 1).Svg.dll:因为highcharts的格式其实就是一个xml,采用svg的方式画图: 2).itextsha ...
 - HighCharts 图表高度动态调整
		
HighCharts 图表高度动态调整 前言 在使用HighCharts控件过程中,发现图表可以自适应div的高度,无法根据图表x.y轴的数量动态调整div高度,否则图标挤在一起,看起来非常不美观,也 ...
 - highCharts图表应用-模拟心电图
		
通过前两章的学习,相信大家对highcharts已经有了初步的了解.这一章将通过一个例子来模拟Highcharts如何实现经常变化的数据显示. 比如说股票的涨停.实时篮球比分以及A选手和B选手的支持率 ...
 - HighCharts 图表插件 自定义绑定 时间轴数据
		
HighCharts 图表插件 自定义绑定 时间轴数据,解决时间轴自动显示数据与实际绑定数据时间不对应问题! 可能要用到的源码片段:http://code.662p.com/list/14_1.htm ...
 
随机推荐
- tomcat 日志禁用
			
1.禁用catalina.out日志通过修改catalina.sh配置可以控制tomcat不生成该文件只要将if [ -z "$CATALINA_OUT" ] ; then CAT ...
 - EntityFramework 学习 一   Multiple Diagrams in Entity Framework 5.0
			
Visual Studio 2012 provides a facility to split the design time visual representation of the Entity ...
 - MapReduce-读取HBase
			
MapReduce读取HBase数据 代码如下 package com.hbase.mapreduce; import java.io.IOException; import org.apache.h ...
 - 字符在内存中最终的表示形式是什么?是某种字符编码还是码位(Code Point)?
			
字符在内存中最终的表示形式是什么?是某种字符编码还是码位(Code Point)? 根据我的了解,编码中有三个核心概念:1. 字符集(Character Set),可以说是一个抽象概念,字符的合集2. ...
 - spring boot 基础学习
			
构建微服务:Spring boot 入门篇 http://www.cnblogs.com/ityouknow/p/5662753.html SpringBoot入门系列:第一篇 Hello World ...
 - Git---之上传远程仓库
			
一:在GitHub上注册账号 官网 : https://github.com/ 二:与远程仓库关联 在本地生成ssh key 运行命令 ssh-keygen -t rsa -C "50 ...
 - iphone动态下拉菜单
			
介绍:实现带动画效果的下拉菜单.用户按下菜单按钮,出现下拉按钮,用户松开菜单按钮,下拉按钮收回. 测试环境:Xcode 4.3, iOS 5.0. 效果图: jQuery特效:http://www.h ...
 - js获取当前url的参数
			
可以用正则表达式获取当前url参数,例如: var t={ getQueryString:function(name){ var reg = new RegExp("(^|&)&qu ...
 - Swift 3.0 on Ubuntu 15.10
			
一.安装swift 3.0 1. 下载 https://swift.org/download/ 找到swift-3.0 ubuntu 15.10版本下载: https://swift.org/buil ...
 - Oracle删除步骤
			
1.Oracle卸载要求比较严格,不能简单的卸载就完事了:当然Oracle卸载也没有那么难,只是步骤比较多.Oracle10g还是Oracle11g卸载步骤都是一样的.下边详细介绍一下. 找到Orac ...