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插件官网：。demo网址：。参考手册网址：。

这个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({

• 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　　　　

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

　　　　 item　　:Array

　　　　　　 html　　:String

　　　　　　 style　　:CSSObject

　　　　 style　　　　：CSSObject

• lang

　　　　 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

});

出处