首页 > 代码库 > HighCharts学习笔记(一)
HighCharts学习笔记(一)
HighChars基本概述
Highcharts是一个纯js写成的插件库,很好的外观表现可以满足任何图标需求。
开始使用chart之前进行配置
全局配置:
Highcharts.setOptions({
global: {
useUTC: false
}
});
主配置中参数含义:
$("#container").highcharts({
accessibility:无障碍的设计{
}
chart
alignTicks
: Boolean当使用多轴时,两个或更多个相对轴(opposite axes)的刻度,将通过向具有最小刻度的轴添加刻度进行自动对齐,效果和指定了tickAmount
参数一样。
该项可以通过设置 alignTicks
为 false来禁用。如果网格线显得零乱,可以直接将网格线隐藏,即设置 gridLineWidth
为 0。
true
.在线实例:
默认为trueanimation
: Boolean|Object设置所有图表更新的整体动画。若设置为false,可以在整个更新过程中禁用动画,它可以作为函数参数覆盖每个单独的API方法。 唯一不受此选项影响的动画是初始系列动画,参照 plotOptions.series.animation.
动画可以设置为布尔值或一个配置对象。如果为true
,它将默认使用jQuery easing的‘swing‘效果,持续500毫秒。 如果用作配置对象,支持如下属性:
- 持续时间
- 动画的持续时间(以毫秒为单位)。
- 动画效果
- 在
Math
对象设置的缓动函数(动画效果函数)的引用[注:要使用的动画效果的名称]。参照 缓动函数Demo.
true
.在线实例:
with a jQuery UI ea,较长的动画渲染时间,无动画效果的更新backgroundColor
: Color#FFFFFF
.在线实例:
渐变色,背景颜色相关的属性:
在 CSS 样式模式 中,图表背景颜色由.highcharts-background
类来控制。borderColor
: Color#335cad
.在线实例:
棕色边框相关的属性:
在 CSS 样式模式 中,边框线条样式由.highcharts-background
样式类来控制。borderRadius
: Number0
.在线实例:
20像素的圆角边框borderWidth
: Number0
.在线实例:
5像素边框相关的属性:
In styled mode, the stroke is set with the.highcharts-background
class.className
: String div
的CSS类名称,允许每个图表使用单独的CSS样式。colorCount
: Numberhighcharts-color-0
, highcharts-color-0
[...] highcharts-color-9
. The equivalent in non-styled mode is to set colors using the colors setting. 默认是:10
.defaultSeriesType
: String已废弃
chart.type
的别名。注:已废弃 默认是:line
.在线实例:
Bardescription
: StringA 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相关的属性:
typeDescriptionevents
height
: Numbernull
)是根据容器元素的高度计算出来的,如果容器的高度为0,则图表高度为400px。 默认是:null
.在线实例:
200像素高ignoreHiddenSeries
: Booleantrue
.在线实例:
true with stack,false, True by defaultinverted
: Boolean设置是否反转坐标轴,使X轴垂直,Y轴水平。 如果值为 true,则 x 轴默认是 倒置 的。 如果图表中出现条形图系列,则会自动反转。
如果图表中没有笛卡尔数列,或者图表为 雷达图,则反转图表没有效果。 默认是:false
.
在线实例:
Inverted linemargin
: Array图表外边缘和绘图区域之间的边距。 数组中的数字分别表示顶部,右侧,底部和左侧。 也可以使用marginTop
,marginRight
,marginBottom
和 marginLeft
来设置某一个方向的边距。
从版本2.1起,默认边距为0。实际距离由轴标签,轴标题,标题,子标题和图例的偏移量动态计算,此外还有 spacingTop
,spacingRight
, spacingBottom
和 spacingLeft
等参数影响。
[null]
。在线实例:
零边距marginBottom
: NumberspacingBottom
。在线实例:
100像素底边距marginLeft
: NumberspacingLeft
。在线实例:
150像素左边距marginRight
: NumberspacingRight
。在线实例:
100像素右边距marginTop
: NumberspacingTop
。在线实例:
100像素上边距options3d
http://cdn.hcharts.cn/highcharts/highcharts-3d.js
在线实例:
基本的3D柱状图,3D 散点图,3D piepanKey
: String在线实例:
Hold down shift to ppanning
: Boolean允许在图表中平移。 最好使用 panKey 来组合使用缩放和平移。
在触摸设备上,tooltip.followTouchMove选项为true
(默认)时,平移需要两根手指。若要允许用一根手指平移,请将followTouchMove
设置为false
。
false
.在线实例:
Zooming and panningpinchType
: StringpinchType
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在线实例:
Color,gradient相关的属性:
在 样式模式中, 绘图区的背景颜色是通过.highcharts-plot-background
类设置的.plotBackgroundImage
: String在线实例:
Skies相关的属性:
在 样式模式 中,绘图区的背景图可以通过.highcharts-plot-background
类 和 自定义模式 设置。plotBorderColor
: Color#cccccc
.在线实例:
蓝色边框相关的属性:
在 样式模式中,绘图区边框可以通过.highcharts-plot-border
类来设置。plotBorderWidth
: Number0
.在线实例:
1px borderplotShadow
: Boolean|Objectcolor
, offsetX
,offsetY
, opacity
和 width
属性的对象。 默认是:false
.在线实例:
Plot shadow,plot shadowpolar
: Booleanhighcharts-more.js
才 能使用。 默认是:false
.在线实例:
Polar line, Polar area,polar column,combined series types, spider chart, wind rosereflow
: Booleantrue
.在线实例:
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
将作为第一个参数传递,所以在配置中不需要再配置该参数。.
在线实例:
String,object reference,object reference thrresetZoomButton
selectionMarkerFill
: Colorrgba(51,92,173,0.25)
.相关的属性:
在 CSS 样式模式中,选中背景色用.highcharts-selection-marker
类设置。shadow
: Boolean|Objectcolor
,offsetX
,offsetY
,opacity
和 width
属性的对象形式。 默认是:false
.在线实例:
ShadowshowAxes
: Booleanfalse
.在线实例:
False by default,truespacing
: Array<Number>[10, 10, 15, 10]
.相关的属性:
chart.marginspacingBottom
: Number图表的底部内边距(图表底部边缘与内容的距离)。
默认是:15
.在线实例:
Spacing bottom set tspacingLeft
: Number图表的左内边距
默认是:10
.在线实例:
Spacing left set tospacingRight
: Number10
.在线实例:
Spacing left set to , legend in right posspacingTop
: Number图表与绘图区的上内边距
默认是:10
.在线实例:
A top spacing of 10style
: CSSObjectdiv
. 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"}
.在线实例:
Using a serif type font. Styled mode with relative font sizes.相关的属性:
In styled mode, general chart styles can be set with the.highcharts-root
class.type
: Stringline
.在线实例:
bartypeDescription
: StringA 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 chartwidth
: Number null
时),宽度根据容器元素的宽度计算而来。 默认是:null
.在线实例:
800px widezoomType
: Stringx
, y
或 xy
其中之一,分别表示可以沿水平、竖直、平面缩放在线实例:
None by default,x,y,xy相关的属性:
panKey
HighCharts学习笔记(一)