Highcharts中文幫助文檔

Highcharts中文幫助文檔
Highcharts 簡介：

Highcharts 是一個製做圖表的 Javascript 類庫，能夠製做的圖表有：直線圖，曲線圖、區域圖、區域曲線圖、柱狀圖、餅裝圖、散狀圖等等。主要特性：

一、 提示功能：鼠標移動到圖表的某一點上有提示信息

二、 放大功能：選中圖表部分放大，近距離觀察圖表

三、 對我的用戶徹底免費，這一點很重要的

四、 兼容性：兼容當今全部的瀏覽器，包括 iPhone 、 IE 和火狐等等

五、 跨語言：不論是 PHP 、 Asp.net 仍是 Java 均可以使用，它只須要三個文件：一個是 Highcharts 的核心文件 highcharts.js ， 還有 a canvas emulator for IE 和 Jquery 類庫或者 MooTools 類庫

六、 支持大部分的圖表類型： 直線圖，曲線圖、區域圖、區域曲線圖、柱狀圖、餅裝圖、散佈圖

七、 易用性：無須要特殊的開發技能，只須要設置一下選項就能夠製做適合本身的圖表

八、 時間軸：能夠精確到毫秒

九、 Ajax 支持：使用數組接受 Ajax 傳值

官方網站：
http://www.highcharts.com/demo/

http://api.highcharts.com/highcharts

 

爲了你們更好的學習highcharts，特意整理了highcharts的中文幫助文檔。
文檔主要翻譯經常使用的選項配置，若是想看詳細配置請看官網API:http://api.highcharts.com/highcharts
部份內容來源於網絡，感謝月光光整理http://www.helloweba.com/view-blog-156.html
因爲我的能力有限，若有翻譯錯誤的地方還請不吝賜教.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Chart 圖標區選項
Chart圖表區選項用於設置圖表區相關屬性。
參數 描述 默認值
backgroundColor 設置圖表區背景色 #FFFFFF
borderWidth 設置圖表邊框寬度 0
borderRadius 設置圖表邊框圓角角度 5
renderTo 圖表放置的容器，通常在html中放置一個DIV，獲取DIV的id屬性值 null
defaultSeriesType 默認圖表類型line, spline, area, areaspline, column, bar, pie , scatter 0
width 圖表寬度，默認根據圖表容器自適應寬度 null
height 圖表高度，默認根據圖表容器自適應高度 null
margin 設置圖表與其餘元素之間的間距，數組，如[0,0,0,0] [null]
plotBackgroundColor 主圖表區背景色，即X軸與Y軸圍成的區域的背景色 null
plotBorderColor 主圖表區邊框的顏色，即X軸與Y軸圍成的區域的邊框顏色 null
plotBorderWidth 主圖表區邊框的寬度 0
shadow 是否設置陰影，須要設置背景色backgroundColor。 false
reflow 是否自使用圖表區域高度和寬度，若是沒有設置width和height時，會自適應大小。 true
zoomType 拖動鼠標進行縮放，沿x軸或y軸進行縮放，能夠設置爲：'x','y','xy' ''
events 事件回調，支持addSeries方法，click方法，load方法，selection方法等的回調函數。

 

Color 顏色選項
Color顏色選項用於設置圖表的顏色方案。
參數 描述 默認值
color 用於展現圖表，折線/柱狀/餅狀等圖的顏色，數組形式。 array
Highcharts已經默認提供了多種顏色方案，當要顯示的圖形多於顏色種類時，多出的圖形會自動從第一種顏色方案開始選取。自定義顏色方案的方法：

Highcharts.setOptions({
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655',
'#FFF263', '#6AF9C4']
});

 

 

Credits 名片

參數 描述 默認值
enabled 是否啓用名片 True
href 點擊名片跳轉的連接 http://www.highchart.com
position 設置名片的位置 position: {
align: 'right',
x: -10,
verticalAlign: 'bottom',
y: -5
}
style 設置名片的樣式
text 設置名片顯示的值 "Highcharts.com"

 

exporting 導出

參數 描述 默認值
enabled 是否顯示導出打印的按鈕 true
url 設置點擊導出按鈕鏈接的地址，默認是官網的地址，可本身定義
filename 保存的文件名 chart
type 保存的文件類型 Image/png
buttons 設置導出或打印按鈕的樣式、事件等具體配置請看官網
width 寬度 800
enableImages 是否啓用圖像的出口。包括圖像的點標記，背景圖片等，默認爲false。應該是是否添加背景圖http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/exporting/enableimages/
false

Global 全局設置
（Google翻譯的）
全球設置並不適用於每一個圖表的選項。像lang選項，這些選項，必須設置使用Highcharts.setOptions方法。
參數 描述 默認值
canvasToolsURL 設置延遲加載的Android2.x設備的附加文件的URL。這些設備不支持SVG，因此須要下載一個幫助文件，其中包含canvg，的依賴關係rbcolor，和CanVG Renderer類。能夠本身安裝canvas-tools.js到本身的服務器上，相應地更改此選項。默認值的「http://www.highcharts.com/js/canvas-tools.js」。
useUTC 是否使用UTC時間，爲軸縮放，刻度標記的位置和時間在Highcharts.dateFormat顯示。

 

 

 

Title：標題選項
Title標題選項用於設置圖表的標題相關屬性。
參數 描述 默認值
text 標題文本內容。 Chart title
align 水平對齊方式。 center
verticalAlign 垂直對齊方式。 top
margin 標題與副標題之間或者主圖表區間的間距。 15
floating 是否浮動，若是爲true，則標題能夠偏離主圖表區，可配合x,y屬性使用。 false
style 設置CSS樣式。 {color: '#3E576F',
fontSize: '16px'}
Subtitle：副標題選項
副標題提供的屬性選項與標題title大體相同，可參照上述標題選項，值得一提的是副標題的text選項默認爲''，即空的，因此默認狀況下副標題不顯示。

 

xAxis：X軸選項
X軸選項用於設置圖表X軸相關屬性。
參數 描述 默認值
categories 設置X軸分類名稱，數組，例如：categories: ['Apples', 'Bananas', 'Oranges'] []
title X軸名稱，支持text、enabled、align、rotation、style等屬性
labels 設置X軸各分類名稱的樣式style，格式formatter，角度rotation等。 array
max X軸最大值(categories爲空時)，若是爲null，則最大值會根據X軸數據自動匹配一個最大值。 null
min X軸最小值(categories爲空時)，若是爲null，則最小值會根據X軸數據自動匹配一個最小值。 array
gridLineColor 網格（豎線）顏色 #C0C0C0
gridLineWidth 網格(豎線)寬度 1
lineColor 基線顏色 #C0D0E0
lineWidth 基線寬度 0

yAxis：Y軸選項
Y軸選項與上述xAxis選項基本一致，請參照上表中的參數設置，再也不單獨列出。

Series：數據列選項
數據列選項用於設置圖表中要展現的數據相關的屬性。
參數 描述 默認值
data 顯示在圖表中的數據列，能夠爲數組或者JSON格式的數據。如：data:[0, 5, 3, 5]，或
data: [{name: 'Point 1',y: 0}, {name: 'Point 2',y: 5}]
若是想對不一樣的列顯示不一樣的顏色請對該列使用color屬性,如data: [148.5, { y: 216.4,color: '#BF0B23'},54.4] ''
name 顯示數據列的名稱。 ''
type 數據列類型，支持 area, areaspline, bar, column, line, pie, scatter or spline line

 

 

plotOptions：數據點選項
plotOptions用於設置圖表中的數據點相關屬性。plotOptions根據各類圖表類型，其屬性設置略微有些差別，如下是部分選項。
參數 描述 默認值
enableMouseTracking 啓用或禁用鼠標跟蹤一個特定的列。這包括點提示和圖上點的單擊事件。對於大型數據集，它能夠提升性能。若是這個禁用了event事件將沒法執行 true
events 能夠設置對整個圖形的click事件、單擊圖例顯示和隱藏圖形,還有mouseOut、mouseOver等。具體詳細信息請看官網
point 每一個單點的屬性,該屬性下面能夠這個單個點的click、mouseOut、mouseOver、remove、select(選中是觸發)、unselect(失去選中時觸發),update(對某個點更新時觸發)
zIndex 設置圖形的zIndex值，值相對大的顯示在頂層
pointPadding 設置每列之間填充的大小，只對column和bar有效。
pointWidth 設置每列之間一個固定的寬度，只對column和bar有效。

 

 

 

 

Tooltip：數據點提示框
Tooltip用於設置當鼠標滑向數據點時顯示的提示框信息。
參數 描述 默認值
enabled 是否顯示提示框 true
backgroundColor 設置提示框的背景色 rgba(255, 255, 255, .85)
borderColor 提示框邊框顏色，默認自動匹配數據列的顏色 auto
borderRadius 提示框圓角度 5
shadow 是否顯示提示框陰影 true
style 設置提示框內容樣式，如字體顏色等 color:'#333'
formatter 回調函數，用於格式化輸出提示框的顯示內容。返回的內容支持html標籤如：<b>, <strong>, <i>, <em>, <br/>, <span> 2

 

 

Legend：圖例選項
legend用於設置圖例相關屬性。
參數 描述 默認值
layout 顯示形式，支持水平horizontal和垂直vertical horizontal
align 對齊方式。 center
backgroundColor 圖例背景色。 null
borderColor 圖例邊框顏色。 #909090
borderRadius 圖例邊框角度 5
enabled 是否顯示圖例 true
floating 是否能夠浮動，配合x，y屬性。 false
shadow 是否顯示陰影 false
style 設置圖例內容樣式 ''

 

 

 

Navigation按鈕和圖例選項
參數 描述 默認值
buttonOptions 設置導出,打印按鈕的選項，如顯示的位置，樣式，是否啓用等
menuItemHoverStyle 懸停在圖例上面的樣式
menuItemStyle
mentStyle

Loading在圖形上顯示一個loading文字,多是用於增長用戶體驗參數 描述 默認值hideDuration 設置loading標籤淡出的時間 100showDuration 設置loading標籤淡入的時間 100labelStyle Loading標籤樣式 style loading標籤的樣式，涵蓋了繪圖區