highcharts圖表配置參數彙總

一.chart的部分相關屬性說明
    renderTo: 'container',      //圖表的頁面顯示容器(也就是要顯示到的div)

chart.events.addSeries：添加數列到圖表中。

chart.events.click：整個圖表的繪圖區上所發生的點擊事件。

chart.events.load：圖表加載事件。

chart.polar：是否爲極性圖表。

chart.events.selection：當圖表曲線可選擇放大時，當選擇圖表操做時，能夠觸發該事件。

chart.type：圖表的類型，默認爲line，還有bar/column/pie……

    defaultSeriesType: 'line',  //圖表類型(line、spline、scatter、splinearea、bar、pie、area、column)
    marginRight: 50,            //上下左右空隙(圖表跟圖框之間)
    marginBottom: 60,           //下面空隙若是不夠大，圖例說明有可能看不到
    plotBackgroundImage: '../graphics/skies.jpg', //(圖表的)背景圖片
    plotBackgroundColor:        //背景顏色
    width: 1000,                //圖框（最外層）寬(默認800)
    height: 500,                //圖框高(默認500) 
    backgroundColor: "red"      //圖框的背景顏色
    borderColor: "red"          //圖框的邊框顏色
    borderRadius: 5,            //圖框的圓角大小
    borderWidth: 9,             //圖框的邊框大小
    inverted: false,            //(使圖)倒置(圖表中的x，y軸對換)
    plotBorderColor: "red",     //圖表的邊框顏色
    plotBorderWidth: 0,         //圖表的邊框大小
    plotShadow: false,          //圖表是否使用陰影效果
　reflow：false/ture         //當窗口大小改變時，圖表寬度自適應窗口大小改變。
    shadow:true                 //圖框是否使用陰影
    showAxes: false,            //是否最初顯示軸
    spacingTop: 100,            //圖表上方的空白
    spacingRight: 10,
    spacingBottom: 15,
    spacingLeft: 10,
    colors: [...]                 //圖上線的顏色

一.chart的部分相關屬性說明
    renderTo: 'container',      //圖表的頁面顯示容器(也就是要顯示到的div)
    defaultSeriesType: 'line',  //圖表類型(line、spline、scatter、splinearea、bar、pie、area、column)
    marginRight: 50,            //上下左右空隙(圖表跟圖框之間)
    marginBottom: 60,           //下面空隙若是不夠大，圖例說明有可能看不到
    plotBackgroundImage: '../graphics/skies.jpg', //(圖表的)背景圖片
    plotBackgroundColor:        //背景顏色
    width: 1000,                //圖框（最外層）寬(默認800)
    height: 500,                //圖框高(默認500) 
    backgroundColor: "red"      //圖框的背景顏色
    borderColor: "red"          //圖框的邊框顏色
    borderRadius: 5,            //圖框的圓角大小
    borderWidth: 9,             //圖框的邊框大小
    inverted: false,            //(使圖)倒置
    plotBorderColor: "red",     //圖表的邊框顏色
    plotBorderWidth: 0,         //圖表的邊框大小
    plotShadow: false,          //圖表是否使用陰影效果
    reflow: false,   
    shadow:true                 //圖框是否使用陰影
    showAxes: false,            //是否最初顯示軸
    spacingTop: 100,            //圖表上方的空白
    spacingRight: 10,
    spacingBottom: 15,
    spacingLeft: 10,
    colors: [...]                 //圖上線。。的顏色

二. credits的部分相關屬性說明
    credits:  //設置右下角的標記。highchart.com (這個也能夠在highcharts.js裏中修改)
    {    
        //enabled: true,      //是否顯示
        position: {           //顯示的位置                   
            align: 'left',       
            x: 10                           
        },
        text: "xoyo.com",           //顯示的文字
        style:{                     //樣式
            cursor: 'pointer',
            color: 'red',
            fontSize: '20px'
        },
        href: 'http://www.xoyo.com', //路徑
    },
三. title的部分相關屬性說明
    title: //標題
    { 
        text: '月份平均溫度',
        x: -20,                  //center //水平偏移量 
        y: 100                   //y:垂直偏移量
        align: 'right'         //水平方向（left, right, bottom, top）
        floating: true,          //是否浮動顯示
        margin: 15,
        style: ,                 //樣式
        verticalAlign: "left"    //垂直方向（left, right, bottom, top）
    },
四. xAxis或者YAxis的部分相關屬性說明
    categories: ['一月', '二月'],
    //allowDecimals: false
    //alternateGridColor: 'red'       //在圖表中相隔出現縱向的顏色格柵
    //dateTimeLabelFormats: ,
    //endOnTick: false,               //是否顯示控制軸末端的一個cagegories出來
    //events: {
    //setExtremes:
    //},
    //gridLineColor: "red",           //縱向格線的顏色
    //gridLineDashStyle: Solid        //縱向格柵線條的類型
    //gridLineWidth: 5,               //縱向格線的的大小
    //id: null,
    //labels: {  //X軸的標籤（下面的說明）
        //align: "center",              //位置
        //enabled: false,               //是否顯示
        //formatter: ,
        //rotation: 90,                 //旋轉,效果就是影響標籤的顯示方向
        //staggerLines: 4,              //標籤的交錯顯示（上、下）
        //step: 2,                      //標籤的相隔顯示的步長
        //style:{},
        //x: 100,                     //偏移量，默認兩個都是0，
        //y: 40
        
    //},
    //lineColor: "red",               //X軸的顏色
    //lineWidth: 5,                   //X軸的寬度
    //linkedTo:1,
    //opposite: true                  //是否把標籤顯示到對面
    //max: 12,                        //顯示的最大值
    //maxPadding: 6,
    //maxZoom: 1,
    //min: 10,                        //顯示的最小值
    //minorGridLineColor: 'red',        //副格線的顏色
    //minorGridLineDashStyle: 'blod', //副格線的的顏色
    //minorGridLineWidth: 50,         //副格線的寬度
    //minorTickColor: #A0A0A0,        //???沒有看出效果
    minorTickInterval:3,               //副標記的間隔
    //minorTickLength: 10,             //副標記的長度
    //minorTickPosition: 'inside',     //副標記的位置
    //minorTickWidth: 5,               //副標記的寬
    //minPadding: 0.01,
    //offset: 0,                       //座標軸跟圖的距離
    //plotBands: //使某數據塊顯示不一樣的效果    
    //plotLines: [{         //標線屬性
        //value: 0,      //值爲0的標線
    //}],        
    //tickmarkPlacement: "on",   //標記(文字)顯示的位置，on表示在正對位置上。
    //reversed: true,            //是否倒置
    //showFirstLabel: false,     //第一個標記的數值是否顯示
    //startOfWeek: 2,
    //tickColor: 'blue',         //標記(座標的記號)的顏色
    //tickInterval: 20,          //標記(座標的記號)的步長
    //tickLength: 5,
    //tickmarkPlacement: "on",
    //tickPixelInterval: 1000,   //兩座標之間的寬度
    //tickPosition: "inside",    //座標標記的方向
    //title: {                   //設置座標標題的相關屬性
        //margin: 40,
        //rotation: 90,
        //text: "Y-values",
        //align: "middle",
        //enabled: "middle",
        //style: {color: 'red'}
    //},
    //type: "linear"
五.tooltip的部分相關屬性說明

tooltip.valueDecimals：容許的小數點位數。

tooltip.percentageDecimals：容許百分比的小數點後位數。

    tooltip: //提示框設置
    {      
        formatter: function() {  //格式化提示框的內容樣式
        return '<b>'+ this.series.name +'</b><br/>'+
                this.x +': '+ this.y +'°C';
        },                       
        backgroundColor: '#CCCCCC',   //背景顏色
        //borderColor: '#FCFFC5'      //邊框顏色
        //borderRadius: 2             //邊框的圓角大小
        borderWidth: 3,               //邊框寬度(大小)
        //enabled: false,             //是否顯示提示框
        //shadow: false,              //提示框是否應用陰影
        //shared: true,               //當打開這個屬性，鼠標幾個某一區域的時候，若是有多條線，全部的線上的據點都會有響應(ipad)
        //snap: 0,                  
        crosshairs: {                 //交叉點是否顯示的一條縱線
            width: 2,
            color: 'gray',
           dashStyle: 'shortdot'
        }
        style: {  //提示框內容的樣式
            color: 'white',
            padding: '10px',    //內邊距 (這個會經常使用到)
            fontSize: '9pt',            
        }
    },
六.legend(圖例說明)的部分相關屬性說明
    legend: //圖例說明
    {   
        //layout: 'vertical',   //圖例說明佈局（垂直顯示,默認橫向顯示）
        align: 'center',        //圖例說明的顯示位置
        //verticalAlign: 'top', //縱向的位置
        //x: 250,                 //偏移量 
        //y: 0,               
        borderWidth: 1,            //邊框寬度
        //backgroundColor: 'red'   //背景顏色
        borderColor: 'red',
        //borderRadius             //邊框圓角
        //enabled: false          //是否顯示圖例說明
        //floating:true           //是否浮動顯示(效果就是會不會顯示到圖中)
        //itemHiddenStyle: {color: 'red'},
        //itemHoverStyle: {color: 'red'}   //鼠標放到某一圖例說明上，文字顏色的變化顏色
        //itemStyle:  {color: 'red'}   //圖例說明的樣式
        //itemWidth:                   //圖例說明的寬度
        //labelFormatter: function() { return this.value}       //?????????????默認(return this.name)
        //lineHeight: 1000             //沒看出明顯效果
        //margin: 20
        //reversed:true                //圖例說明的順序（是否反向）
        //shadow:true                  //陰影
        //style: {color:'black'}
        //symbolPadding: 100           //標誌（線）跟文字的距離
        //symbolWidth: 100             //標誌的寬
        //width:100
    },
七. plotOptions的部分修改屬性說明
    

plotOptions.area.allowPointSelect：是否容許數據點的點擊。

plotOptions.area.color：繪圖的顏色。

plotOptions.area.dataLabels.enabled：是否容許數據標籤。

plotOptions.area.enableMouseTracking：是否容許數據圖表中，數據點的鼠標跟蹤氣泡顯示。

plotOptions.area.events.checkboxClick：數據圖表中圖注中複選框的點擊事件。

plotOptions.area.events.click：數據圖表中，數據點的點擊事件。

plotOptions.area.events.hide：數據圖表中，某一數據序列隱藏時的事件。

plotOptions.area.events.show：數據圖表中，某一數據序列顯示時的事件。

plotOptions.area.events.legendItemClick：數據圖表中，圖注中的項目被點擊時的事件，直接賦值false，則不可點擊。

plotOptions.area.events.mouseOut：數據點的鼠標移出事件。

plotOptions.area.events.mouseOver：數據點的鼠標通過事件。

plotOptions.area.marker.enabled：圖表中繪圖中是否顯示點的標記符。

plotOptions.area.marker.states.hover.enabled：是否容許標記符的鼠標通過狀態。

plotOptions.area.marker.states.select.enabled：是否容許標記符的選擇狀態。

plotOptions.area.point.events.click：圖表中每個單獨的點點擊事件。

plotOptions.area.point.events.mouseOut

plotOptions.area.point.events..mouseOver

plotOptions.area.point.events.remove：刪除圖表中的點時的事件。

plotOptions.area.point.events.select：圖表中點選擇事件。

plotOptions.area.point.events.unselect：圖表中點取消選擇時的事件。

plotOptions.area.point.events.update：圖表中數據發生更新時的事件。

plotOptions.area.visible：加載時，數據序列默認是顯示仍是隱藏。

plotOptions.area.zIndex：在多序列的狀況下，調整每個序列的層疊順序。

以上的point.events一樣還適用於其餘面積類圖表（arearange、areaspline、areasplinerange），其餘的柱狀圖（bar、column）及全部圖表。

plotOptions.area.showInLegend：是否在圖注中顯示。

plotOptions.area.stacking：是以值堆疊，仍是以百分比堆疊。

plotOptions.area.states.hover.enabled：鼠標放上的狀態是否容許。

plotOptions.area.stickyTracking：鼠標粘性跟蹤數據點。

plotOptions.arearange，plotOptions.areaspline，plotOptions.areasplinerange類同於plotOptions.area

plotOptions.bar.groupPadding：對於柱狀圖分組，每一個分組之間的間隔。

plotOptions.bar.grouping：是否對數據進行分組。

plotOptions.bar.minPointLength:：定義當point值爲零時，點的最小長度爲多少

plotOptions.bar.showInLegend：是否在圖注中顯示。

plotOptions.bar.stacking：是以值堆疊，仍是以百分比堆疊（normal/percent）。

plotOptions.column，plotOptions.columnrange類同於plotOptions.bar

plotOptions.line的相關配置相似於plotOptions.area配置。

plotOptions.pie.ignoreHiddenPoint：在餅狀圖中，某一個序列經圖注點擊隱藏後，整個餅狀圖是從新以100%分配，仍是隻在原圖基礎上隱藏，呈現一個缺口。

plotOptions.pie.innerSize：繪製餅狀圖時，餅狀圖的圓心預留多大的空白。

plotOptions.pie.slicedOffset：與allowPointSelect結合使用，當點被點擊時，對應的扇區剝離，這個參數即配置離開的距離。

plotOptions.pie的其餘經常使用配置參數類同於plotOptions.area,plotOptions.scatter，plotOptions.series，plotOptions.spline的相關配置相似於plotOptions.area配置。

八.exporting導出數據相關屬性

exporting.buttons.exportButton.enabled：是否容許顯示導出按鈕。

exporting.buttons.exportButton.menuItems：導出按鈕的菜單選項。

exporting.buttons.exportButton.onclick：導出按鈕被點擊的事件，不是內部的菜單。

exporting.buttons.printButton.enabled：是否容許打印按鈕。

exporting.buttons.printButton.onclick：打印按鈕的點擊事件。

exporting.enabled：打印和導出按鈕是否被容許。

exporting.filename：被導出文件的文件名。

exporting.type：默認導出圖片的文件格式。

exporting.url：SVG圖表轉換並導出的接口處理地址。

exporing.width：默認導出圖片的寬度。