原創(chuàng)|使用教程|編輯:龔雪|2014-05-08 09:29:01.000|閱讀 20667 次
概述:作為一款出色的交互圖表制作工具,HighCharts有著全面的選項(xiàng)、參數(shù)等配置信息。為了幫助大家進(jìn)一步掌握HighCharts,今天我們?yōu)榇?家整理了HighCharts的所有配置信息和說明,將其制作成表,供大家查詢。
# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
文章主要包括Highcharts的18個選項(xiàng)、參數(shù)設(shè)置信息,具體有:chart、colors、credits、exporting、global、lang 、legend、loading、navigation 、pane、plotOptions、series 、subtitle、title 、tooltip 、xAxis、yAxis。你還可以進(jìn)一步了解Highcharts的功能,查看HIghcharts 4深度解析。
主要設(shè)置圖表的類型,圖表裝載容器名,背景,高度,寬度等圖表的整體屬性。
| 參數(shù) | 描述 | 默認(rèn)值 |
| backgroundColor | 設(shè)置圖表區(qū)背景色 | #FFFFFF |
| borderWidth | 設(shè)置圖表邊框?qū)挾?/td> | 0 |
| borderRadius | 設(shè)置圖表邊框圓角角度 | 5 |
| renderTo | 圖表放置的容器,一般在html中放置一個DIV,獲取DIV的id屬性值 | null |
| defaultSeriesType | 默認(rèn)圖表類型line, spline, area, areaspline, column, bar, pie , scatter |
0 |
| width | 圖表寬度,默認(rèn)根據(jù)圖表容器自適應(yīng)寬度 | null |
| height | 圖表高度,默認(rèn)根據(jù)圖表容器自適應(yīng)高度 | null |
| margin | 設(shè)置圖表與其他元素之間的間距,數(shù)組,如[0,0,0,0] | [null] |
| plotBackgroundColor | 主圖表區(qū)背景色,即X軸與Y軸圍成的區(qū)域的背景色 | null |
| plotBorderColor | 主圖表區(qū)邊框的顏色,即X軸與Y軸圍成的區(qū)域的邊框顏色 | null |
| plotBorderWidth | 主圖表區(qū)邊框的寬度 | 0 |
| shadow | 是否設(shè)置陰影,需要設(shè)置背景色backgroundColor | false |
| reflow | 是否自使用圖表區(qū)域高度和寬度,如果沒有設(shè)置width和height時,會自適應(yīng)大小 | true |
| zoomType | 拖動鼠標(biāo)進(jìn)行縮放,沿x軸或y軸進(jìn)行縮放,可以設(shè)置為:‘x’,'y’,'xy’ | ” |
| events | 事件回調(diào),支持addSeries方法,click方法,load方法,selection方法等的回調(diào)函數(shù) | ? |
主要是數(shù)據(jù)列顏色設(shè)置,比如多條線條中的每個線條顏色。
| 參數(shù) | 描述 | 默認(rèn) |
| color | 用于展示圖表,折線/柱狀/餅狀等圖的顏色,數(shù)組形式。 | 一組html顏色代碼 |
| colors: [ '#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5',? '#64E572', '#FF9655', '#FFF263', '#6AF9C4' ] |
說明:1、顏色代碼為html標(biāo)準(zhǔn),可通過DW等復(fù)制想要的代碼 2、默認(rèn)是從第一個數(shù)據(jù)列起調(diào)用第一個顏色代碼,有多少個數(shù) 據(jù)列調(diào)用相應(yīng)數(shù)量的顏色 3、當(dāng)數(shù)據(jù)列大于默認(rèn)顏色數(shù)量時,重復(fù)從第一個顏色看是調(diào)用 |
| 參數(shù) | 描述 | 默認(rèn)值 |
| enabled | 是否顯示版權(quán)及鏈接,布爾型,默認(rèn)為顯示 | true |
| position | 位置。可用align調(diào)整對齊方式,x,y設(shè)置距離。 | position: { align: ‘right’,x: -10, verticalAlign: ‘bottom’,y: -5?} |
| href | 鏈接地址。String型,默認(rèn)是highCharts官網(wǎng) | www.highcharts.com |
| style | 名片CSS模式 | itemStyle?: { cursor: ‘pointer’,color: ‘#909090′, fontSize: ’10px’?} |
| text | 顯示名字。 | highcharts.com |
| 參數(shù) | 描述 | 默認(rèn)值 |
| buttons | 打印和導(dǎo)出按鈕設(shè)置。其中兩個按鈕中又有很多樣式等設(shè)置,如有需要可詳細(xì)查看API文檔 | 默認(rèn)按鈕樣式 |
| enableImages | 在導(dǎo)出的圖片中添加logo水印。布爾型,默認(rèn)是false | false |
| enabled | 是否顯示按鈕(也就是啟用打印導(dǎo)出功能),布爾型,默認(rèn)顯示 | true |
| filename | 導(dǎo)出圖片文件名,String型 | chart |
| type | 導(dǎo)出圖片的格式,有jpg和png可選,String型 | jpg/png |
| url | 轉(zhuǎn)換圖片的服務(wù)器url,默認(rèn)是用highcharts服務(wù)器 | //export.highcharts.com |
| width | 圖片大小,數(shù)字型 | 800 |
全局選項(xiàng),并不適用于每一個圖表。這些選項(xiàng),如lang選項(xiàng),必須設(shè)置使用Highcharts.setOptions方法。一般用不到,詳情請查看API文檔。
| 參數(shù) | 描述 | 默認(rèn)值 |
| items | 包含兩個選項(xiàng)html和style,分別代表html語句及樣式 | iteml :{
? ? ? ? ????html : “”, ????style { ??} |
| style | css樣式 | style:{ color : ‘#3E576F’} |
主要配置符號、導(dǎo)出時顯示的語句、時間顯示語言等。和上面的global參數(shù)有關(guān),即調(diào)用Highcharts.SetOptions方法。下表列舉常用的選項(xiàng)注意:lang選項(xiàng)其實(shí)就是配置一些顯示語言,API中都有詳細(xì)說明。
| 參數(shù) | 描述 | 默認(rèn)值 |
| decimalPoint | 小數(shù)點(diǎn) | . |
| downloadJPEG | 導(dǎo)出顯示的文字,下面還有downloadPDF等,都一樣 | Download JPEG image等 |
| months | 月份,字符串?dāng)?shù)組形式 | ['January' 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] |
| numericSymbols | 數(shù)值單位,比如1000為1k | ['k', 'M', 'G', 'T', 'P', 'E'] |
| 參數(shù) | 描述 | 默認(rèn)值 |
| layout | 顯示形式,支持水平horizontal和垂直vertical | horizontal |
| align | 對齊方式 | center |
| backgroundColor | 背景顏色 | nulll |
| borderColor | 圖例邊框顏色 | #909090 |
| borderRadius | 圖例邊框角度 | 5 |
| enabled | 是否顯示圖例 | true |
| floating | 是否可以浮動,配合x,y屬性 | false |
| shadow | 是否顯示陰影 | false |
| style | 圖例樣式 | 詳見API文檔 |
| 參數(shù) | 描述 | 默認(rèn)值 |
| hideDuration | 淡出效果持續(xù)時間,以毫秒為單位 | 100 |
| labelStyle | 標(biāo)簽樣式,css形式 | 詳見API文檔 |
| showDuration | 淡入效果持續(xù)時間,以毫秒為單位 | 100 |
| style | 圖表加載樣式 | 詳見API文檔 |
| 參數(shù) | 描述 | 默認(rèn)值 |
| enable | 是否在數(shù)據(jù)點(diǎn)上直接顯示數(shù)據(jù) | false |
| allowPointSelect | 是否允許使用鼠標(biāo)選中數(shù)據(jù)點(diǎn) | false |
| formatter | 回調(diào)函數(shù),格式化數(shù)據(jù)顯示內(nèi)容 | formatter: function()? {?return this.y;?} |
| marker | 對某個點(diǎn)標(biāo)記,多種樣式可選 | ? |
| 參數(shù) | 描述 | 默認(rèn)值 |
| data | 顯示在圖表中的數(shù)據(jù)列,可以為數(shù)組或者JSON格式的數(shù)據(jù)。如:data:[0, 5, 3, 5],或 data: [{name: 'Point 1',y: 0}, {name: 'Point 2',y: 5}] |
‘’ |
| name | 數(shù)據(jù)列名稱 | ‘’ |
| type | 數(shù)據(jù)列類型,支持 area, areaspline, bar, column, line, pie, scatter、spline | line |
| 參數(shù) | 描述 | 默認(rèn)值 |
| text | 標(biāo)題文本內(nèi)容 | Chart title |
| align | 水平對齊方式 | center |
| verticalAlign | 垂直對齊方式 | top |
| margin | 標(biāo)題與副標(biāo)題之間或者主圖表區(qū)間的間距 | 15 |
| floating | 是否浮動,如果為true,則標(biāo)題可以偏離主圖表區(qū),可配合x,y屬性使用 | false |
| style | css樣式 | { color: ‘#3E576F’,? |
| x | 按照水平對齊方式的距離 | 0 |
| y | 按照垂直對齊方式的距離 | 15 |
| 參數(shù) | 描述 | 默認(rèn)值 |
| enable | 是否顯示提示框 | true |
| backgroundColor | 設(shè)置提示框的背景色 | rgba(255, 255, 255, .85) |
| borderColor | 提示框邊框顏色,默認(rèn)自動匹配數(shù)據(jù)列的 | auto |
| borderRadius | 提示框圓角度 | 5 |
| shadow | 設(shè)置提示框內(nèi)容樣式,如字體顏色等 | color:’#333′ |
| formatter | 回調(diào)函數(shù),用于格式化輸出提示框的顯示內(nèi)容。 返回的內(nèi)容支持html標(biāo)簽如:<b>, <strong>,<br/> |
? |
| 參數(shù) | 描述 | 默認(rèn) |
| categories | 設(shè)置X軸分類名稱,數(shù)組,例如: categories: ['Apples', 'Bananas', 'Oranges'] |
[] |
| title | X軸名稱,支持text、enabled、align、rotation、style等屬性 ? |
? |
| labels | 設(shè)置X軸各分類名稱的樣式style,格式formatter,角度rotation等 |
? |
| max | X軸最大值(categories為空時),如果為null, 則最大值會根據(jù)X軸數(shù)據(jù)自動匹配一個最大值 ? |
null |
| min | X軸最小值(categories為空時),如果為null, 則最小值會根據(jù)X軸數(shù)據(jù)自動匹配一個最小值 ? |
null |
| gridLineColor | 網(wǎng)格(豎線)顏色 ? |
#C0C0C0 |
| gridLineWidth | 網(wǎng)格(豎線)寬度 |
1 |
| lineColor | 基線顏色 |
#C0D0E0 |
| lineWidth | 基線寬度 |
0 |
??????和x軸配置相同或類似。
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請郵件反饋至chenjj@ke049m.cn