chart:
renderTo 图表的页面显示容器
defaultSeriesType 图表的显示类型(line,spline, scatter, splinearea bar,pie,area,column)
margin 上下左右空隙
events 事件
click function(e) {}
load function(e) {}
exporting 是否可以导出图片
xAxis:yAxis:
属性:
gridLineColor 网格颜色
reversed 是否反向 true ,false
gridLineWidth 网格粗细
startOnTick 是否从坐标线开始画图区域
endOnTick 是否从坐标线结束画图区域
tickmarkPlacement 坐标值与坐标线标记的对齐方式on,between
tickPosition 坐标线标记的样式 向内延伸还是向外延伸(insidel,outside)
tickPixelInterval 决定着横坐标的密度
tickColor 坐标线标记的颜色
tickWidth 坐标线标记的宽度
lineColor 基线颜色
lineWidth 基线宽度
max 固定坐标最大值
min 固定坐标最小值
plotlines 标线属性
maxZoom
minorGridLineColor
minorGridLineWidth
/minorTickColor
title:
enabled: 是否显示
text: 坐标名称
Labels 坐标轴值显示类 默认:defaultLabelOptions
formatter 格式化函数
enabled 是否显示坐标轴的坐标值
rotation 倾斜角度
align 与坐标线的水平相对位置
x 水平偏移量
y 垂直偏移量
style
font 字体样式 默认defaultFont
color 颜色
Tooltip 数据点的提示框
enabled 鼠标经过时是否可动态呈现true,false
formatter 格式化提示框的内容样式
crosschairs 便于观察的定位线
plotOptions 画各种图表的数据点的设置
defaultOptions 默认设置
属性
Area类:
lineWidth 线宽度
fillColor area的填充颜色组
marker{} 设置动态属性
shadow 是否阴影 true,false
states 设置状态?
Line类
dataLabels: 数据显示类
enabled 是否直接显示点的数据true,false
series
name 该条曲线名称
data[] 该条曲线的数据项
addPoint([x,y],redraw,cover) 添加描点,redraw 是否重画,cover是否左移
setData:function(data, redraw) 重新设置Data数组,redraw是否重画
remove:function(redraw) 删除曲线
redraw:function() 重画曲线
marker:
enabled 是否显示描点
credits设置右下方的链接
dateFormat(options.dateTimeLabelFormats[unit[0]],this.value, 1)
highcharts以其强大的功能,美观的界面,吸引了众多程序员的使用。highcharts的功能也在不断的完善中。highcharts插件官网:http://www.highcharts.com/。demo网址:http://www.highcharts.com/demo/。参考手册网址:http://api.highcharts.com/highcharts。
这个javascript图标控件的使用需要两个js类库,一个是highcharts.js,另一个是exporting.js
现将一些基本功能的使用列出如下:
chart:
renderTo 图表的页面显示容器
defaultSeriesType 图表的显示类型(line,spline, scatter, splinearea bar,pie,area,column)
margin 上下左右空隙
events 事件
click function(e) {}
load function(e) {}
xAxis:yAxis:
属性:
gridLineColor 网格颜色
reversed 是否反向 true ,false
gridLineWidth 网格粗细
startOnTick 是否从坐标线开始画图区域
endOnTick 是否从坐标线结束画图区域
tickmarkPlacement 坐标值与坐标线标记的对齐方式on,between
tickPosition 坐标线标记的样式 向内延伸还是向外延伸(insidel,outside)
tickPixelInterval 决定着横坐标的密度
tickColor 坐标线标记的颜色
tickWidth 坐标线标记的宽度
lineColor 基线颜色
lineWidth 基线宽度
max 固定坐标最大值
min 固定坐标最小值
plotlines 标线属性
maxZoom
minorGridLineColor
minorGridLineWidth
/minorTickColor
title:
enabled: 是否显示
text: 坐标名称
Labels 坐标轴值显示类默认:defaultLabelOptions
formatter 格式化函数
enabled 是否显示坐标轴的坐标值
rotation 倾斜角度
align 与坐标线的水平相对位置
x 水平偏移量
y 垂直偏移量
style
font 字体样式 默认defaultFont
color 颜色
Tooltip 数据点的提示框
enabled 鼠标经过时是否可动态呈现true,false
formatter 格式化提示框的内容样式
plotOptions 画各种图表的数据点的设置
defaultOptions 默认设置
属性
Area类:
lineWidth 线宽度
fillColor area的填充颜色组
marker{} 设置动态属性
shadow 是否阴影 true,false
states 设置状态?
Line类
dataLabels: 数据显示类
enabled 是否直接显示点的数据true,false
series
name 该条曲线名称
data[] 该条曲线的数据项
addPoint([x,y],redraw,cover) 添加描点,redraw 是否重画,cover是否左移
setData: function(data, redraw) 重新设置Data数组,redraw是否重画
remove: function(redraw) 删除曲线
redraw: function() 重画曲线
marker :
enabled 是否显示描点
。。。。。。
dateFormat(options.dateTimeLabelFormats[unit[0]], this.value, 1)
选择对象
var chart = new Highcharts.Chart({
alignTicks :true Boolean 多个y轴时对他们公共轴心的选取,ture为自动选取较适宜的公共轴心
animation :true BooleanObject 动画更新效果
backgroundColor :Color 绘图区背景色
borderColor :Color 绘图边框颜色
borderRadius :Number 绘图边角的弧度设置
borderWidth :Number 边框宽度设置
className :String 确定绘图区容器的类区范围
defaultSeriesType :Sting 默认绘图类型的设置
events :chart.events 绘图触发事件
addSeries :Function 添加series数据
click :Function 单击事件
load :Function 加载事件
redraw :Function 重画事件
selection :Function 选着区域事件
height :Number 高度
ignoreHiddenSeries :True Boolean 多个数据时,隐藏一个数据是否更改轴心,true为可更改,false为不可更改
inverted :False Boolean 数轴的转换
margin :Numberr 内边距设置
marginTop
marginBottom
marginRight
marginLeft
plotBackgroundColor :Color 部分颜色的变化
plotBackgroundImage :String 加载图片
plotBorderColor
plotBorderWidth
plotBorderShadow
reflow :True :Boolean 是否跟谁容器大小改变
renderTo :String 引用容器
resetZoonButton 区域选择与重置图片与event事件中的selection事件相似
selectionMarkerFill 悬着区域的颜色
shadow 阴影
showAxes 加载前轴的显示
spacingTop 外边距 :Number
spacingBottom
spacingLeft
style :CSSObject
type 绘图类型 默认:line
width 绘图宽度的设置
zoomType 区域选择范围 可与event.selection和resetZoomButton参考,他们是区域选择的功能接口
colors: [
'#4572A7',
'#AA4643',
'#89A54E',
'#80699B',
'#3D96AE',
'#DB843D',
'#92A8CD',
'#A47D7C',
'#B5CA92'
]
enabled :Boolean 默认值:True 是否显示名片
position :Object 位置的确定
href :String 名片连接地址 默认值:www.highcharts.com
style :CSSObject 名片CSS模式
text :String 名片显示名字 默认值:highcharts.com
- global Highcharts.SetOptions方法调用
canvasToolsURL :String 画布工具连接,例如:Andrio的 2.0不支持SVG
- labels HTML标签,可以放置在绘图的任何位置
item :Array
html :String
style :CSSObject
style :CSSObject
decimalPoint :String 小数点 默认值"."
downloadPNG :String 导出图片PNG 默认值:"Download PNG image".
downloadJPEG :String 导出图片JPEG 默认值: "Download JPEG image"
downloadPDF
downloadSVG
exportButtonTitle :String 导出图片按钮 默认值: "Export to raster or vector image".
loading :String 加载显示 默认值: Loading....
months :Array<String> 月的数组 Highcharts.dateFormat() 默认值:['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'].
shortMonths 上边月的缩写数组
printButtonTitle :String 打印按钮 默认值: "Print the chart".
resetZoom :String 重置焦距 默认值: Reset zoom.
resetZoomTitle :String 重置焦距设置 默认值: Reset zoom level 1:1.
thousandsSep :String 前分为 默认值:",".例如:1,000,000
weekdays :Array<String> 星期数组 默认值: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'].
- legend
- loading
- plotOptions
- point
- series
- subtitle
- symbols
- title
- tooltip
- xAxis
- yAxis
- exporting
- navigation
});
出处http://cangqiong.blog.51cto.com/3151131/982074