HighChars基本概述

Highcharts是一个纯js写成的插件库,很好的外观表现可以满足任何图标需求。

开始使用chart之前进行配置

全局配置:

Highcharts.setOptions({
global: {
useUTC: false
}
});

主配置中参数含义:

$("#container").highcharts({

accessibility:无障碍的设计{

enabled: true
 
keyboardNavigation: {…}
onTableAnchorClick: undefined
pointDateFormat: undefined
pointDateFormatter: undefined
pointDescriptionFormatter: undefined
pointDescriptionThreshold: 30
screenReaderSectionFormatter: undefined
seriesDescriptionFormatter

}

chart

关于图表区和图形区的参数及一般图表通用参数。

alignTicks

: Boolean

  翻译人:webkong

当使用多轴时,两个或更多个相对轴(opposite axes)的刻度,将通过向具有最小刻度的轴添加刻度进行自动对齐,效果和指定了tickAmount参数一样。

该项可以通过设置 alignTicks 为 false来禁用。如果网格线显得零乱,可以直接将网格线隐藏,即设置 gridLineWidth 为 0。

默认是:true.

在线实例:

默认为true

animation

: Boolean|Object

  翻译人:webkong

设置所有图表更新的整体动画。若设置为false,可以在整个更新过程中禁用动画,它可以作为函数参数覆盖每个单独的API方法。 唯一不受此选项影响的动画是初始系列动画,参照 plotOptions.series.animation.

动画可以设置为布尔值或一个配置对象。如果为true,它将默认使用jQuery easing的'swing'效果,持续500毫秒。 如果用作配置对象,支持如下属性:

持续时间
动画的持续时间(以毫秒为单位)。
动画效果
 Math 对象设置的缓动函数(动画效果函数)的引用[注:要使用的动画效果的名称]。参照 缓动函数Demo.

默认是:true.

backgroundColor

: Color

  翻译人:webkong
图表区的背景颜色或渐变色。 默认是:#FFFFFF.

在线实例:

渐变色背景颜色

相关的属性:

在 CSS 样式模式 中,图表背景颜色由 .highcharts-background 类来控制。

borderColor

: Color

  翻译人:webkong
图表边框的颜色。 默认是:#335cad.

在线实例:

棕色边框

相关的属性:

在 CSS 样式模式 中,边框线条样式由 .highcharts-background 样式类来控制。

borderRadius

: Number

  翻译人:webkong
图表边框的圆角半径。 默认是:0.

在线实例:

20像素的圆角边框

borderWidth

: Number

  翻译人:webkong
图表边框的宽度。(单位:像素px) 默认是:0.

在线实例:

5像素边框

相关的属性:

In styled mode, the stroke is set with the .highcharts-background class.

className

: String

  翻译人:webkong
应用于图表容器 div 的CSS类名称,允许每个图表使用单独的CSS样式。

colorCount

: Number

Since 5.0.0
In styled mode, this sets how many colors the class names should rotate between. With ten colors, series (or points) are given class names like highcharts-color-0highcharts-color-0 [...] highcharts-color-9. The equivalent in non-styled mode is to set colors using the colors setting. 默认是:10.

defaultSeriesType

: String

已废弃

  翻译人:webkong
chart.type的别名。注:已废弃 默认是:line.

在线实例:

Bar

description

: String

Since 5.0.0

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.

在线实例:

Accessible line chart

相关的属性:

typeDescription

events

  翻译人:群大大
图表相关的事件。

height

: Number

  翻译人:webkong
图表的高度。默认高度(当值为null)是根据容器元素的高度计算出来的,如果容器的高度为0,则图表高度为400px。 默认是:null.

在线实例:

200像素高

ignoreHiddenSeries

: Boolean

  翻译人:webkong
Since 1.2.0
如果为true,则一旦隐藏一个数据列,坐标轴将根据剩余的可见数据列进行缩放显示。 如果为false,隐藏和显示一个系列不会影响轴或其他系列。 对于堆叠图表,一旦其中的一个系列被隐藏,即使轴不受影响,堆叠图表的其余部分也将会显示在隐藏的刻度上。 默认是:true.

inverted

: Boolean

  翻译人:webkong

设置是否反转坐标轴,使X轴垂直,Y轴水平。 如果值为 true,则 x 轴默认是 倒置 的。 如果图表中出现条形图系列,则会自动反转。

如果图表中没有笛卡尔数列,或者图表为 雷达图,则反转图表没有效果。 默认是:false.

在线实例:

Inverted line

margin

: Array

  翻译人:webkong

图表外边缘和绘图区域之间的边距。 数组中的数字分别表示顶部,右侧,底部和左侧。 也可以使用marginTopmarginRightmarginBottom 和 marginLeft 来设置某一个方向的边距。

从版本2.1起,默认边距为0。实际距离由轴标签,轴标题,标题,子标题和图例的偏移量动态计算,此外还有 spacingTop,spacingRightspacingBottom 和 spacingLeft 等参数影响。

默认值为[null]

在线实例:

零边距

marginBottom

: Number

  翻译人:webkong
Since 2.0
图表底部外边缘和绘图区域之间的边距。另请参见spacingBottom 

在线实例:

100像素底边距

marginLeft

: Number

  翻译人:webkong
Since 2.0
图表左侧外边缘和绘图区域之间的边距。另请参见spacingLeft 

在线实例:

150像素左边距

marginRight

: Number

  翻译人:webkong
Since 2.0
图表右侧外边缘和绘图区域之间的边距。通过此参数可以指定固定的右边距(默认是自动计算)。另请参见spacingRight

在线实例:

100像素右边距

marginTop

: Number

  翻译人:webkong
Since 2.0
图表顶部外边缘和绘图区域之间的边距。另请参见spacingTop

在线实例:

100像素上边距

options3d

  翻译人:群大大
Since 4.0
3D 图表相关的配置。该功能需要额外的引入 3D 相关的功能模块:http://cdn.hcharts.cn/highcharts/highcharts-3d.js

panKey

: String

  翻译人:webkong
Since 4.0.3
设定平移按键。按住设定的按键时鼠标滑动是对图表进行平移操作。(默认是缩放操作,通过此按键可以实现在缩放和平移之间的切换)

在线实例:

Hold down shift to p

panning

: Boolean

  翻译人:webkong
Since 4.0.3

允许在图表中平移。 最好使用panKey来组合使用缩放和平移。

在触摸设备上,tooltip.followTouchMove选项为true(默认)时,平移需要两根手指。若要允许用一根手指平移,请将followTouchMove设置为false

默认是:false.

在线实例:

Zooming and panning

pinchType

: String

Since 3.0
Equivalent to zoomType, but for multitouch gestures only. By default, the 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

  翻译人:webkong
绘图区域的背景颜色或渐变色。

在线实例:

Colorgradient

相关的属性:

在 样式模式中, 绘图区的背景颜色是通过 .highcharts-plot-background 类设置的.

plotBackgroundImage

: String

  翻译人:webkong
指定绘图区背景图片的地址。如果需要设置整个图表的背景,请通过 CSS 来给容器元素(div)设置背景图。另外如果需要在导出图片中包含这个背景图,要求这个地址是公网可以访问的地址(包含可以访问且是绝对路径)。

在线实例:

Skies

相关的属性:

在 样式模式 中,绘图区的背景图可以通过 .highcharts-plot-background 类 和 自定义模式 设置。

plotBorderColor

: Color

  翻译人:webkong
绘图区边框颜色 默认是:#cccccc.

在线实例:

蓝色边框

相关的属性:

在 样式模式中,绘图区边框可以通过 .highcharts-plot-border 类来设置。

plotBorderWidth

: Number

  翻译人:webkong
绘图区边框宽度。单位:px 默认是:0.

在线实例:

1px border

plotShadow

: Boolean|Object

  翻译人:webkong
是否给绘图区增加阴影效果,如果开启阴影效果,需要设置 plotBackgroundColor。 从2.3开始,投影可以配置成包含 coloroffsetX,offsetYopacity 和 width 属性的对象。 默认是:false.

在线实例:

Plot shadowplot shadow

polar

: Boolean

  翻译人:webkong
Since 2.3.0
当设置为 true 时,直线图、曲线图、面积图、柱状图等笛卡尔图会转成极地图。极地图需要额外的引入 highcharts-more.js才 能使用。 默认是:false.

reflow

: Boolean

Since 2.1
Whether to reflow the chart to fit the width of the container div on resizing the window. 默认是:true.

在线实例:

Move the bar between the JavaScript frame and the Preview frame to see the effect: True by defaultfalse.

renderTo

: String|Object

  翻译人:群大大

图表渲染容器的 HTML 元素的 id 或对象引用

当使用构造函数 Highcharts.chart 时,renderTo将作为第一个参数传递,所以在配置中不需要再配置该参数。.

resetZoomButton

  翻译人:webkong
选择缩放后出现的按钮,允许用户重置缩放比例。

selectionMarkerFill

: Color

  翻译人:webkong
Since 2.1.7
选中(放大时会被选中)图表区域时选中部分的背景颜色。 默认是:rgba(51,92,173,0.25).

相关的属性:

在 CSS 样式模式中,选中背景色用 .highcharts-selection-marker 类设置。

shadow

: Boolean|Object

  翻译人:webkong
整个图表的阴影。设置阴影效果需要设置背景颜色,从 2.3 之后,可以设置成包含 coloroffsetXoffsetYopacity 和 width 属性的对象形式。 默认是:false.

在线实例:

Shadow

showAxes

: Boolean

  翻译人:webkong
Since 1.2.5
是否在初始化的时候显示坐标轴, 仅适用于初始化时数据列为空的(动态添加数据列)图表,因为在笛卡尔数据列中,坐标轴会自动添加到图表中(无论有没有数据)。 默认是:false.

在线实例:

False by defaulttrue

spacing

: Array<Number>

  翻译人:webkong
Since 3.0.6
图表的内边距,指图表外边缘和绘图区之间的距离,数组中的数字分别表示顶部,右侧,底部和左侧。可以使用选项 spacingTop,spacingRight,spacingBottom 和 spacingLeft 来指定某一个内边距。 默认是:[10, 10, 15, 10].

相关的属性:

chart.margin

spacingBottom

: Number

  翻译人:webkong
Since 2.1

图表的底部内边距(图表底部边缘与内容的距离)。

默认是:15.

在线实例:

Spacing bottom set t

spacingLeft

: Number

  翻译人:webkong
Since 2.1

图表的左内边距

默认是:10.

在线实例:

Spacing left set to

spacingRight

: Number

  翻译人:webkong
Since 2.1
图表与绘图区的右内边距 默认是:10.

spacingTop

: Number

  翻译人:webkong
Since 2.1

图表与绘图区的上内边距

默认是:10.

在线实例:

A top spacing of 10

style

: CSSObject

Additional CSS styles to apply inline to the container 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.

type

: String

  翻译人:webkong
Since 2.1.0
图表的默认类型。 可以是 plotOptions 下列出的任何图表类型。 默认是:line.

在线实例:

bar

typeDescription

: String

Since 5.0.0

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.

在线实例:

Accessible complex chart

width

: Number

  翻译人:webkong
图表的宽度。 默认情况下(当 null 时),宽度根据容器元素的宽度计算而来。 默认是:null.

在线实例:

800px wide

zoomType

: String

  翻译人:webkong
决定用户可以用鼠标缩放的维度。可以是 xy 或 xy其中之一,分别表示可以沿水平、竖直、平面缩放

在线实例:

None by defaultxyxy

相关的属性:

panKey

HighCharts学习笔记(一)的更多相关文章

  1. HighCharts学习笔记(一)HighCharts入门

    一.HighCharts简介 Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站 ...

  2. Echarts和Highcharts学习笔记01——入门了解

      Echarts是国内百度团队开发的(开源),基于Canvas,适合数据量较大的情况: Highcharts是国外的(商用需授权),基于SVG,方便自己定制,但能使用的图表类型有限: Echarts ...

  3. HighCharts学习笔记(二)HighCharts结构及详细配置

    HighCharts结构及详细配置: 一.HighCharts整体结构: 通过查看API文档我们知道HighCharts结构如下:(API文档在文章后面提供下载) var chart = new Hi ...

  4. HighCharts学习笔记

    目录 xAxis自定义时间刻度的显示 xAxis自定义时间刻度 我们先来看下HighCharts图表的xAxis对象有哪些属性(红色标记重要属性): allowDecimals: Booleancat ...

  5. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  6. PHP-自定义模板-学习笔记

    1.  开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2.  整体架构图 ...

  7. PHP-会员登录与注册例子解析-学习笔记

    1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...

  8. 2014年暑假c#学习笔记目录

    2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...

  9. JAVA GUI编程学习笔记目录

    2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...

随机推荐

  1. dp单调性优化

    跟着书上的思路学习dp的单调性优化觉得还是很容易想的. 数据范围: dp,数据范围是百万,这应该是O(n)的算法了. 首先不难想到设f[i]表示到第i个百米所能达到的最大能量,那么f[n]即为所求. ...

  2. 抽屉之Tornado实战(3)--注册

    知识点应用:标签绑定事件,jQuery获取用户值-->AJAX发送数据-->后台路由系统-->业务逻辑处理-->ORM数据操作-->write返回-->AJAX回调 ...

  3. LeetCode 883 Projection Area of 3D Shapes 解题报告

    题目要求 On a N * N grid, we place some 1 * 1 * 1 cubes that are axis-aligned with the x, y, and z axes. ...

  4. java 线程(七)等待与唤醒

    package cn.sasa.demo5; public class Resources { private String name; private boolean gender; //标记 pu ...

  5. 使用docker部署Asp.net core web应用程序

    拉取aspnetcore最新docker镜像 aspnetcore的docker镜像在docker官网是有的,是由微软提供的.它的依赖镜像是microsoft/dotnet.通过访问网址:https: ...

  6. OC通讯录选择封装

    ContactsService.h代码 #import <Foundation/Foundation.h> #import <UIKit/UIKit.h> //block返回选 ...

  7. centos下搭建sockets5代理

    #安装依赖及ss5 yum -y install gcc openldap-devel pam-devel openssl-devel wget https://nchc.dl.sourceforge ...

  8. mysql开发总结

    一.理解MySQL基本概念 1.MySQL软件:MySQL实际上就是一软件,是一工具,是关系型数据库管理系统软件 2.MySQL数据库:就是按照数据结构来组织.存储和管理数据的仓库 3.MySQL数据 ...

  9. Linux-eth0 eth0:1 ifcfg-lo ifcfg-lo:0 和eth0.1关系、ifconfig以及虚拟IP实现介绍

    eth0 eth0:1 和eth0.1三者的关系对应于物理网卡.子网卡.虚拟VLAN网卡的关系:物理网卡:物理网卡这里指的是服务器上实际的网络接口设备,这里我服务器上双网卡,在系统中看到的2个物理网卡 ...

  10. 爬虫请求库——requests

    请求库,即可以模仿浏览器对网站发起请求的模块(库). requests模块 使用requests可以模拟浏览器的请求,requests模块的本质是封装了urllib3模块的功能,比起之前用到的urll ...