highcharts图标插件详解一

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线宽度 fillColorarea的填充颜色组 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) highcharts API 中文 选择对象 var chart = new Highcharts.Chart({

• 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

colors: [ '#4572A7', '#AA4643', '#89A54E', '#80699B', '#3D96AE', '#DB843D', '#92A8CD', '#A47D7C', '#B5CA92' ]

• credits　　　　右下角的名片说明

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 useUTC　　　　:Boolean　　UTC time　　　　http://jsfiddle.net/X3jPh/

• labels　　HTML标签，可以放置在绘图的任何位置

item　　:Array html　　:String style　　:CSSObject style　　　　：CSSObject

• lang

decimalPoint　　　　:String　　　　小数点 默认值"." downloadPNG　　　　:String　　　　导出图片PNG  默认值："Download PNG p_w_picpath". downloadJPEG　　　　:String 　　　导出图片JPEG  默认值： "Download JPEG p_w_picpath" downloadPDF downloadSVG exportButtonTitle　　:String　　　　导出图片按钮　　默认值： "Export to raster or vector p_w_picpath". 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

});

转载于:https://blog.51cto.com/cangqiong/982074

《新程序员》：云原生和全面数字化实践50位技术专家共同创作，文字、视频、音频交互阅读

总结

以上是生活随笔为你收集整理的highcharts图标插件详解一的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。