`
qieyi28
  • 浏览: 159128 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

highsChars的相关选择器

 
阅读更多
选择对象

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         ajax获得数据放到数据里面
subtitle :text   最顶端的子标题
symbols
title
style: { //title休班文字大小样式字体
         color: '#000',
         font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
      }
tooltip       提示信息
xAxis         X轴,数据以数组的形式组装
yAxis         Y轴,数据以数组的形式组装
exporting
navigation
});

给个例子

var chart; 
$(function() { 
    chart = new Highcharts.Chart({ 
        chart: { 
            renderTo: 'chart_pie',  //饼状图关联html元素id值 
            defaultSeriesType: 'pie', //默认图表类型为饼状图 
            plotBackgroundColor: '#ffc',  //设置图表区背景色 
            plotShadow: true   //设置阴影 
        }, 
        title: { 
            text: '搜索引擎统计分析'  //图表标题 
        }, 
        credits: { 
            text: 'helloweba.com' 
        }, 
        tooltip: { 
            formatter: function() { //鼠标滑向图像提示框的格式化提示信息 
                return '<b>' + this.point.name + '</b>: ' +  
                twoDecimal(this.percentage) + ' %'; 
            } 
        }, 
        plotOptions: { 
            pie: { 
                allowPointSelect: true, //允许选中,点击选中的扇形区可以分离出来显示 
                cursor: 'pointer',  //当鼠标指向扇形区时变为手型(可点击) 
                //showInLegend: true,  //如果要显示图例,可将该项设置为true 
                dataLabels: { 
                    enabled: true,  //设置数据标签可见,即显示每个扇形区对应的数据 
                    color: '#000000',  //数据显示颜色 
                    connectorColor: '#999',  //设置数据域扇形区的连接线的颜色 
                    style:{ 
                        fontSize: '12px'  //数据显示的大小 
                    }, 
                    formatter: function() { //格式化数据 
                        return '<b>' + this.point.name + '</b>: ' +  
                        twoDecimal(this.percentage) + ' %'; 
                    } 
                } 
            } 
        }, 
        series: [{ //数据列 
            name: 'search engine', 
            data: <?php echo $data;?> //核心数据列来源于php读取的数据并解析成JSON 
        }] 
    }); 
}); 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics