[转载]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) {}
xAxisyAxis:
 属性:
     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    http://jsfiddle.net/X3jPh/
  • 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
});

本文出自 “苍穹断雪” 博客,请务必保留此出处http://cangqiong.blog.51cto.com/3151131/982074

参考:http://www.highcharts.com/ref/#chart

posted @ 2012-12-04 20:55  one light  阅读(404)  评论(0编辑  收藏  举报