HighCharts学习笔记(一)
HighChars基本概述
Highcharts是一个纯js写成的插件库,很好的外观表现可以满足任何图标需求。
开始使用chart之前进行配置
全局配置:
Highcharts.setOptions({
global: {
useUTC: false
}
});
主配置中参数含义:
$("#container").highcharts({
accessibility:无障碍的设计{
}
chart
alignTicks
: Boolean
当使用多轴时,两个或更多个相对轴(opposite axes)的刻度,将通过向具有最小刻度的轴添加刻度进行自动对齐,效果和指定了tickAmount
参数一样。
该项可以通过设置 alignTicks
为 false来禁用。如果网格线显得零乱,可以直接将网格线隐藏,即设置 gridLineWidth
为 0。
默认是:true
.
在线实例:
animation
: Boolean|Object
设置所有图表更新的整体动画。若设置为false,可以在整个更新过程中禁用动画,它可以作为函数参数覆盖每个单独的API方法。 唯一不受此选项影响的动画是初始系列动画,参照 plotOptions.series.animation.
动画可以设置为布尔值或一个配置对象。如果为true
,它将默认使用jQuery easing的'swing'效果,持续500毫秒。 如果用作配置对象,支持如下属性:
- 持续时间
- 动画的持续时间(以毫秒为单位)。
- 动画效果
- 在
Math
对象设置的缓动函数(动画效果函数)的引用[注:要使用的动画效果的名称]。参照 缓动函数Demo.
默认是:true
.
backgroundColor
: Color
#FFFFFF
.相关的属性:
在 CSS 样式模式 中,图表背景颜色由 .highcharts-background
类来控制。
borderColor
: Color
#335cad
.在线实例:
相关的属性:
在 CSS 样式模式 中,边框线条样式由 .highcharts-background
样式类来控制。
borderWidth
: Number
0
.在线实例:
相关的属性:
In styled mode, the stroke is set with the .highcharts-background
class.
colorCount
: Number
highcharts-color-0
, highcharts-color-0
[...] highcharts-color-9
. The equivalent in non-styled mode is to set colors using the colors setting. 默认是:10
.description
: String
A text description of the chart.
If the Accessibility module is loaded, this is included by default as a long description of the chart and its contents in the hidden screen reader information region.
默认是:undefined
.
在线实例:
相关的属性:
height
: Number
null
)是根据容器元素的高度计算出来的,如果容器的高度为0,则图表高度为400px。 默认是:null
.在线实例:
ignoreHiddenSeries
: Boolean
true
.inverted
: Boolean
设置是否反转坐标轴,使X轴垂直,Y轴水平。 如果值为 true,则 x 轴默认是 倒置 的。 如果图表中出现条形图系列,则会自动反转。
如果图表中没有笛卡尔数列,或者图表为 雷达图,则反转图表没有效果。 默认是:false
.
在线实例:
margin
: Array
图表外边缘和绘图区域之间的边距。 数组中的数字分别表示顶部,右侧,底部和左侧。 也可以使用marginTop
,marginRight
,marginBottom
和 marginLeft
来设置某一个方向的边距。
从版本2.1起,默认边距为0。实际距离由轴标签,轴标题,标题,子标题和图例的偏移量动态计算,此外还有 spacingTop
,spacingRight
, spacingBottom
和 spacingLeft
等参数影响。
默认值为[null]
。
在线实例:
marginRight
: Number
spacingRight
。在线实例:
options3d
http://cdn.hcharts.cn/highcharts/highcharts-3d.js
panKey
: String
在线实例:
panning
: Boolean
允许在图表中平移。 最好使用panKey来组合使用缩放和平移。
在触摸设备上,tooltip.followTouchMove选项为true
(默认)时,平移需要两根手指。若要允许用一根手指平移,请将followTouchMove
设置为false
。
默认是:false
.
在线实例:
pinchType
: String
pinchType
is the same as the zoomType
setting. However, pinching can be enabled separately in some cases, for example in stock charts where a mouse drag pans the chart, while pinching is enabled. When tooltip.followTouchMove is true, pinchType only applies to two-finger touches. 默认是:null
.plotBackgroundColor
: Color
相关的属性:
在 样式模式中, 绘图区的背景颜色是通过 .highcharts-plot-background
类设置的.
plotBackgroundImage
: String
在线实例:
plotBorderColor
: Color
#cccccc
.在线实例:
相关的属性:
在 样式模式中,绘图区边框可以通过 .highcharts-plot-border
类来设置。
plotShadow
: Boolean|Object
color
, offsetX
,offsetY
, opacity
和 width
属性的对象。 默认是:false
.在线实例:
polar
: Boolean
highcharts-more.js
才 能使用。 默认是:false
.reflow
: Boolean
true
.在线实例:
Move the bar between the JavaScript frame and the Preview frame to see the effect: True by default, false.
renderTo
: String|Object
图表渲染容器的 HTML 元素的 id 或对象引用
当使用构造函数 Highcharts.chart 时,renderTo
将作为第一个参数传递,所以在配置中不需要再配置该参数。.
selectionMarkerFill
: Color
rgba(51,92,173,0.25)
.相关的属性:
在 CSS 样式模式中,选中背景色用 .highcharts-selection-marker
类设置。
shadow
: Boolean|Object
color
,offsetX
,offsetY
,opacity
和 width
属性的对象形式。 默认是:false
.在线实例:
showAxes
: Boolean
false
.在线实例:
spacing
: Array<Number>
[10, 10, 15, 10]
.相关的属性:
style
: CSSObject
div
. Note that since the default font styles are applied in the renderer, it is ignorant of the individual chart options and must be set globally. 默认是:{"fontFamily":"\"Lucida Grande\", \"Lucida Sans Unicode\", Verdana, Arial, Helvetica, sans-serif","fontSize":"12px"}
.相关的属性:
In styled mode, general chart styles can be set with the .highcharts-root
class.
typeDescription
: String
A text description of the chart type.
If the Accessibility module is loaded, this will be included in the description of the chart in the screen reader information region.
Highcharts will by default attempt to guess the chart type, but for more complex charts it is recommended to specify this property for clarity.
默认是:undefined
.
在线实例:
HighCharts学习笔记(一)的更多相关文章
- HighCharts学习笔记(一)HighCharts入门
一.HighCharts简介 Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站 ...
- Echarts和Highcharts学习笔记01——入门了解
Echarts是国内百度团队开发的(开源),基于Canvas,适合数据量较大的情况: Highcharts是国外的(商用需授权),基于SVG,方便自己定制,但能使用的图表类型有限: Echarts ...
- HighCharts学习笔记(二)HighCharts结构及详细配置
HighCharts结构及详细配置: 一.HighCharts整体结构: 通过查看API文档我们知道HighCharts结构如下:(API文档在文章后面提供下载) var chart = new Hi ...
- HighCharts学习笔记
目录 xAxis自定义时间刻度的显示 xAxis自定义时间刻度 我们先来看下HighCharts图表的xAxis对象有哪些属性(红色标记重要属性): allowDecimals: Booleancat ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- PHP-自定义模板-学习笔记
1. 开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2. 整体架构图 ...
- PHP-会员登录与注册例子解析-学习笔记
1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...
- 2014年暑假c#学习笔记目录
2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...
- JAVA GUI编程学习笔记目录
2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...
随机推荐
- Python操作Mysql数据库——多表组合查询
前面我们介绍了单张表的查询,包括模糊查询.分组.排序.各种筛选条件等等操作,在实际应用中,查询的数据往往不止局限在一张表里,通常需要多张表在一起进行组合查询,今天我们将会对Mysql当中的多张有关联的 ...
- pyqt5-day1
pyqt5做为Python的一个模块,它有620多个类和6000个函数和方法.这是一个跨平台的工具包,它可以运行在所有主要的操作系统,包括UNIX,Windows,Mac OS.pyqt5是双重许可. ...
- 【托业】【新托业TOEIC新题型真题】学习笔记4-题库一->P7
--------------------------------------单词-------------------------------------- reimbursement n. 报销:偿 ...
- (1.8)mysql中的trace
(1.8)mysql中的trace 以json格式存储
- (1.7)mysql profiles分析
mysql profiles分析 作用:记录会话查询SQL所用时间 1.开启 2.使用 [2.1]先使用一个查询 [2.2]然后再运行 show profiles; [2.3]查看执行过程中每个状态和 ...
- WebSocket 学习教程(一):理论
一.WebSocket简单介绍 随着互联网的发展,传统的HTTP协议已经很难满足Web应用日益复杂的需求了.近年来,随着HTML5的诞生,WebSocket协议被提出,它实现了浏览器与服务器的全双工通 ...
- MySQL分支Percona
MySQL分支Percona 转载自:http://www.cnblogs.com/cevin/archive/2012/05/12/2496859.html 官方网站:http://www.perc ...
- discuz论坛 模板修改
门户首页 template/rtj1009_007/portal/index.php 头部二级导航 template/rtj1009_007/common/toubu.php 底部内容文件 templ ...
- 爬虫mm131明星照片
''' 1. 爬取以下站点中各个明星图片,分别单独建文件夹存放. 起始URL地址:http://www.mm131.com/mingxing ''' import os import logging ...
- 万恶之源 - Python模块二
shelve 我们之前学了json和pickle模块 这些都是序列化的模块,咱们进行在讲一个序列化的东西 叫做shelve 你们肯定有个疑问,这个东西和那个类似为什么要讲.是因为这个模块比较简单的,并 ...