highcharts 中文API

阿新 • • 發佈：2019-01-17

highcharts 是一個用純JavaScript編寫的一個圖表庫，能夠很簡單便捷的在web網站或是web應用程式新增有互動性的圖表，並且免費提供給個人學習。

它可以幫您完成複雜的表格類圖形（線性，矩形，餅狀，以及它們的組合型別），動態圖，它甚至還能幫你繪製出一個構造精細的掛鐘，車速表，電平表等等

而您只需要去官網下載免費的highCharts.js 然後複製到您工程的相關路徑

附上官網地址：http://www.highcharts.com/

官網中有很多相關demo 和最新版API

選擇物件

名稱型別說明

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: 顏色選項用於設定圖表的顏色方案

自定義顏色方案的方法:

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

[ '#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

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(圖列說明)
- alight :String 水平對齊樣式預設:"center".
- backgroundColor :String 填充顏色預設: null.
- borderColor 邊框顏色預設：“#909090”
- borderRadius :Number 邊框圓角化程度數值越大邊框越圓預設： 5px
- borderWidth :Number 邊線粗細程度
- enabled :boolean 是否顯示legend box
- floating :boolean 是否懸浮預設：FALSE
- itemHiddenStyle color 圖形隱藏後的樣式
- itemHoverStyle color 滑鼠覆蓋事件樣式
- itemMarginBottom number 邊框內間距
- itemMarginTop
- itemStyle CSSObject CSS設定
- itemWidth number legend item 寬度
- labelFormatter Function 如果你想在series標籤前後加點什麼
- layout String 標籤的佈局預設 horizontal（水平）
- lineHeight number
- margin number 與圖表的距離
- padding number 與內邊框的距離
- reversed boolean 是否將 legend item 倒序排列預設 false
- rtl boolean legend 是否互換中小圖示和文字的位置
- shadow boolean 陰影
- style CSSObject
- symbolPadding Number symbol（小圖示）與文字的距離
- symbolWidth Number symbol（小圖示）的寬度
- verticalAlign String 可以是 "top", "middle" or "bottom"中的一個大體確定legend垂直位置然後可以根據 ‘y’ 屬性調節。
- width number legend box的寬度
- x number 微調legend box的相對位置
- y
loading 設定載入事件樣式
pane 嵌入設定（用於比較複雜圖形繪製具體參見： highcharts 官方API ）
plotOptions 細節選擇器（如果想對所有繪製圖形（series）生效可以在plotOptions. series下設定否則請在具體的型別下設定如： plotOptions.line）
- area
- bar
- series
  - allowPointSelect boolean 滑鼠點選時允許選擇series' points
  - animation 動畫效果可以選擇duration easing 等（有點像PowerPoint的動畫效果）
  - borderColor color 設定矩形橫矩形邊框的顏色
  - borderRadius number 矩形邊角圓滑度數值越大越圓滑
  - borderWidth
  - color
  - colorByPoint boolean 從options.colors獲取顏色（能讓您的圖形的顏色很華麗：）
  - enableMouseTracking boolean 是否支援滑鼠覆蓋顯示預設 true
  - groupPadding number 矩形的粗細預設 0.2
  - id event 通過chart.get（id）拿到對應series的name
  - minPointLength number 如果您資料差太大很可能最小的資料矩形會被忽略該屬性可以設定一個原始高度使最小矩形不至於看不到
  - pointStart Number 設定 “點” 開始位置
  - pointInterval number 點間距
  - pointWidth number column or bar.的寬度
  - showCheckbox Boolean 是否在legend box上顯示覆選框
- gauge
- line
- pie
- column
series
- zIndex number 同CSS中的zIndex 在相互疊加的區域值高的覆蓋值低的
- data 顯示在圖表中的資料列，可以為陣列或者JSON格式的資料。如：data:[0, 5, 3, 5]，或data: [{name: 'Point 1',y: 0}, {name: 'Point 2',y: 5}]
  - color 可以為某個矩形圖或某條線形圖單獨設定你想要的顏色
  - dataLabels CSSObject 單獨為某個點制定樣式
- mark (對線形圖有效)
  - enabled Boolean 是否顯示線形圖中的點
  - fillColor Color 線形圖中點的顏色
  - lineWidth number 線形圖中點邊線的寬度預設 0
  - radius number 線形圖中點的半徑預設 0
  - symbol 用圖片代替線形圖中點的位置
```
 marker: {
                symbol: 'url(http://highcharts.com/demo/gfx/sun.png)'
            }
```
- name String 顯示資料列的名稱
- stack number 當 stacking:'normal'時為柱狀圖分組
```
series: [
        // first stack
        {
            data: [29.9, 71.5, 106.4, 129.2, 144.0],
            stack: 0
        }, {
            data: [30, 176.0, 135.6, 148.5, 216.4],
            stack: 0},
        // second stack
        {
            data: [106.4, 129.2, 144.0, 29.9, 71.5],
            stack: 1
        }, {
            data: [148.5, 216.4, 30, 176.0, 135.6],
            stack: 1
        }]
```
  （4組資料 stack相同的疊加到同一柱形不同顏色顯示有特殊需求的可參見這裡）
- type 資料列型別，支援 area, areaspline, bar, column, line, pie, scatter or splin
title 主標題樣式
- text String 標題文字內容預設 Char ttitle
- enable Boolean 是否顯示標題預設 true
- align String 水平對齊方式預設 center
- verticalAlign String 垂直對齊方式預設 top
- margin Number 標題與副標題之間或者主圖表區間的間距預設 15
- floating Boolean 是否浮動，如果為true，則標題可以偏離主圖表區，可配合x,y屬性使用預設false
- style CSSObject 設定CSS樣式如： {color:'#3E576F',fontSize: '16px'}
subtitle 副標題樣式屬性同上
（副標題的text選項預設為''，即空的，所以預設情況下副標題不顯示。）
tooltip 提示框設定
- enabled Boolean 是否顯示提示框
- backgroundColor String 設定提示框的背景色
- borderColor String 提示框邊框顏色，預設自動匹配資料列的顏色
- borderRadius Number 提示框圓角度
- shadow Boolean 是否顯示提示框陰影預設 true
- style CSSObject 設定提示框內容樣式，如字型顏色等
- formatter 回撥函式，用於格式化輸出提示框的顯示內容。返回的內容支援html標籤如：, ,, , , 
- valuePrefix String 為你的value值加上字首（有特殊要求時有用如在數字前加‘$’ 等）
- valueSuffix String 為你的value值加上字尾

xAxis
- categories String[] 設定X軸分類名稱，陣列，例如：categories: ['Apples', 'Bananas', 'Oranges']
- title X軸名稱，支援text、enabled、align、rotation、style等屬性
- labels Array 設定X軸各分類名稱的樣式style，格式formatter，角度rotation等
- max Number X軸最大值(categories為空時)，如果為null，則最大值會根據X軸資料自動匹配一個最大值.
- min number X軸最小值(categories為空時)，如果為null，則最小值會根據X軸資料自動匹配一個最小值。
- gridLineColor color 網格（豎線）顏色
- gridLineWidth number 網格(豎線)寬度預設 1
- lineColor color 基線顏色
- lineWidth Number 基線寬度預設 0

yAxis 屬性基本與xAxis相同

formatter 格式化Y軸值（在value後面加“%”）

yAxis: {
                        min: 0,
                        max:60,
                        labels: {
                            formatter: function() {
                                return this.value +'%';
                            },
                            style: {
                                color: '#89A54E'
                            }
                        },

navigation 列印與匯出小圖示樣式設定
});

以上這些是本人在實際應用中用到的或者覺得將來可能會用到的屬性更多屬性可以查詢官方API 。

希望對大家有幫助

參考文獻：http://api.highcharts.com/highcharts
http://www.cnblogs.com/chenzhongzheng/archive/2012/02/28/2371589.html

highcharts 中文API

highcharts 中文API

Highcharts中文API

iScroll 4.2.5 中文API

Moodle 中文 API 之文件管理API

AudioEffect中文API

nodejs之cheerio中文API 說明

GLES2.0中文API-glGetUniformLocation

GLES2.0中文API-glGetAttribLocation

GLES2.0中文API-glDeleteProgram

GLES2.0中文API-glGetProgramInfoLog

GLES2.0中文API-glGetProgramiv

GLES2.0中文API-glLinkProgram

GLES2.0中文API-glIsShader

GLES2.0中文API-glIsProgram

GLES2.0中文API-glAttachShader

GLES2.0中文API-glCreateProgram

GLES2.0中文API-glDeleteShader

GLES2.0中文API-glGetShaderInfoLog

GLES2.0中文API-glGetShaderiv

GLES2.0中文API-glCompileShader

highcharts 中文API

相關推薦