• Highcharts参见参数说明


    chart

    renderTo               表的示容器

    defaultSeriesType     表的型(line,spline, scatter, splinearea bar,pie,area,column)

    margin                            上下左右空隙

    events                       事件

             click           function(e) {}

             load                 function(e) {}

    exporting             是否可以导出图片    

    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                  格式化提示框的内容样式

          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) {}
    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

  • 相关阅读:
    使用uploadify上传图片时返回“Cannot read property 'queueData' of undefined”
    用户在网站注册,网站通过微信发送验证码,这个操作是怎么实现的?
    Javascript Array和String的互转换。
    JS判断一个数组中是否有重复值的三种方法
    监控聚币网行情 并实时发送到微信
    聚币网API使用教程 demo
    sourceTree安装与使用
    SourceTree 的初次使用的两个小问题
    解决oracle语句中 含数字的字符串按数字排序问题
    使用git pull文件时和本地文件冲突怎么办
  • 原文地址:https://www.cnblogs.com/blogsme/p/2871875.html
Copyright © 2020-2023  润新知