highcharts的中文api以及用法。

本文轉載自查看原文 2013-08-15 10:50 3596

Highcharts 中文 API
一、Highcharts 結構及 API 文檔 .................................................................................................. 3
1-1：准備工作 ......................................................................................................................... 3
1-2、HighCharts 結構 ............................................................................................................ 3
二：chart 圖表選項 ....................................................................................................................... 4
2-1.概覽 ............................................................................................................................... .... 4
2-1-1：alignTicks 多軸時最小刻度是否自動計算 .................................................... 6
2-1-2：renderTo 圖表可以被渲染的 HTML 元素 .......................................................... 6
2-1-3：type 圖表的默認樣式 ......................................................................................... 6
2 ‐ 2 ：效果截圖 ......................................................................................................................... 6
2 ‐ 3 ：實例說明 ......................................................................................................................... 6
三：colors 顏色 ............................................................................................................................... . 8
3-1：Colors 選項 .................................................................................................................... 8
四：credits 名片選項 ...................................................................................................................... 8
五：exporting 導出和打印選項 ...................................................................................................... 9
5-1：exporting 導出和打印選項 ......................................................................................... 9
5-2：exportButton 導出按鈕 ................................................................................................ 9
5-3：printButton 打印按鈕 ................................................................................................ 10
六：global 全局選項 ...................................................................................................................... 11
6-1.global 選項 .................................................................................................................... 11
七.labels 標簽選項 ...................................................................................................................... 12
7-1：屬性 ............................................................................................................................... 12
7-1-1：items 單個項目 ................................................................................................ 12
7 ‐ 2 ：效果圖 ........................................................................................................................... 13
7 ‐ 3 ：代碼 ............................................................................................................................... 13
八：Lang 語言選項 ........................................................................................................................ 14
8-1.說明 ............................................................................................................................... .. 14
8-2.概覽 ............................................................................................................................... .. 15
九：legend 圖例選項 ................................................................................................................... 16
十：loading 加載選項 .................................................................................................................. 17
十一.navigation 打印和導出選項 .............................................................................................. 18
十二:Pane 窗格選項 ...................................................................................................................... 18
十三.PlotOptions 繪圖 ................................................................................................................ 19
13-1：選項概覽 ..................................................................................................................... 19
13-2：area 區域圖 ................................................................................................................ 19
13-2-1：dataLabels 數據標簽 ................................................................................... 21
13-2-2：events 事件 .................................................................................................. 23
13-2-3：marker 標記 ................................................................................................. 23
13-2-4：point 單獨的點 .............................................................................................. 25
13-3.arearange 區域排列圖 ................................................................................................ 25
13-4.areaspline 區域曲線圖 ................................................................................................ 26
13-5.areasplinerange ........................................................................................................... 26
13-6.bar 條狀圖 .................................................................................................................... 26
13-7：column 柱狀圖 ............................................................................................................ 28
13-8 ：columnrange 柱狀排列圖 ......................................................................................... 28
13-9:gauge 測量圖 ................................................................................................................ 28
13-9-1:說明 ................................................................................................................... 28
13-9-2: 屬性 ................................................................................................................. 28
13-10: 餅圖 ............................................................................................................................. 32
13-10-1:屬性 ................................................................................................................. 32
13-10-2:dataLable 數據標簽 ..................................................................................... 33
13-11 其他圖形 ...................................................................................................................... 35
13-11-1：Highcharts Stock 中 dataGrouping ......................................................... 35

一、Highcharts 結構及 API 文檔
1-1：准備工作
1、首先，HighCharts 是基於 Jquery 框架開發的，所以需要在頁面引入 Jquery。
2、其次，需要引入 HighCharts js 文件
3、如果你想使用導出功能，必須引入導出相關的 js 文件，該文件存在於
/Highcharts-X.X.X/js/modules/目錄下
1-2、HighCharts 結構
通過閱讀 highCharts API文檔，我們知道 highCharts 的基本結構是：
var chart = new Highcharts.Chart({
chart: {…}         // 配置chart圖表區
    colors: [{...} ]       // 配置主體顯示顏色（多個線條和柱體的顏色順序的）
    credits: {…}           // 配置右下角版權鏈接
    exporting: {…}      // 配置導出及打印
    global: {…}             / / HighCharts 國際化方法調用
    labels: {…}            // HTML 標簽，可以放置在繪圖的任何位置
lang: {…}         // 語言對象屬性配
legend: {…}        // 配置圖例選項
    loading: {…}          // 配置圖表加載選項
    navigation: {…}     // 配置導出按鈕屬性
pane: {…}         // 僅適用於極性圖表和角儀表
    plotOptions: { …}   // 配置數據點選項
series: [{...}]      // 配置數據列選項
    subtitle: {…}         // 配置副標題
title: {…}         // 配置標題
tooltip: {…}       // 配置數據點提示框
xAxis: {…}         // 配置x軸選項
yAxis: {…}         // 配置y軸選項
})

紅色部分表示為了圖表的完整性或美觀性必須配置的屬性。，其他無特殊要求默認即可。所
以，HighCharts 開發，只需要了解每個屬性的含義，並有選擇的配置需要的效果既可。

二：chart 圖表選項
2-1.概覽
參數描述默認值
alignTicks   多軸時最小刻度是否自動計算 true
animation 是否啟用動畫效果 true
backgroundColor   圖表外部的背景色或漸變色 #FFFFFF
borderColor   圖表外邊框的顏色 #4572A7
borderRadius 圖表外邊框的圓角半徑 5.0
borderWidth 外邊框的像素寬度 0.0
className 圖表容器div使用的一個css 類名 null
defaultSeriesType type 的別名 null
events   addSeries 、click 、load 、redraw 、selection   null
height   一個顯式的圖表高度 null
ignoreHiddenSeries
如果true, 一旦一個系列被隱藏，軸將會擴展剩余
的可見系列
true
inverted   是否倒置軸，使得x 軸時垂直的 y 軸是水平的 false
margin   圖表的外邊框和繪圖區域的邊距 null
marginBottom   下邊距 null
marginLeft 左邊距 null
marginRight   右邊距 null
marginTop 上邊距 null
plotBackgroundColor   繪圖區域的背景色或漸變 null
plotBackgroundImage 繪圖區背景圖片的URL null
plotBorderColor   繪圖區的邊框顏色 #C0C0C0
plotBorderWidth   繪圖區的邊框寬度 0.0
plotShadow   繪圖區是否使用陰影效果 false
polar 極坐標 false
reflow   當窗口大小改變的時候，自適應div大小 true
renderTo   圖表可以被渲染的HTML 元素 null
resetZoomButton
出現在縮放后面的一個按鈕，允許用戶重置縮放
position，relativeTo，theme
null
selectionMarkerFill   選中的圖表區域的背景顏色 rgba(69,114,167,0.25)
shadow 是否對外部圖表應用下降陰影 false
showAxes 是否顯示最初的坐標軸 false
spacingBottom 圖表底部和內容的距離空間 15
spacingLeft   圖表左邊和內容的距離空間 10.0
spacingRight 圖表右邊和內容的距離空間 10.0
spacingTop   圖表上邊和內容的距離空間 10.0
style   額外的CSS 樣式可以給內部div容器 null
type   圖表的默認樣式 line
width 圖表的顯式寬度 null
zoomType 縮放，可以為x,y,xy 之一 null
2-1-1：alignTicks 多軸時最小刻度是否自動計算
當使用多個軸時，刻度的間隔會根據最小刻度自動的添加到兩個或多個軸上。可以通過設置
alignTicks 為false 來禁止自動划分刻度。如果表格線看起來比較雜亂，通過設置第二個軸
的gridLineWidth為0 來隱藏該刻度線是一個好的做法。alignTicks 的默認值為 true
2-1-2：renderTo 圖表可以被渲染的 HTML 元素
    renderTo: 'contai ner' 要和你 div 中的 id 號對應，這樣圖表就能顯示在瀏覽器中了。
如 2-3 實例中 renderTo: 'container',//div 標簽和<div id="container"
style="min-width: 400px; height: 400px; margin: 0 auto"></div>
2-1-3： type 圖表的默認樣式
默認一系列的圖表類型。可以是 line, spline, area, areaspline, c olumn, scatter,
ohlc and candlestick. 從 1.1.7 開始可以是 arearange, areasplinerange ,c olumnrange.
2‐ 2：效果截圖

2‐ 3：實例說明
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript">
      $(function () {
      var chart;
      $(document).ready(function() {
        chart = new Highcharts.Chart({
          //HighCharts中chart屬性配置
          chart: {
            renderTo: 'container',//div 標簽
            type: 'line',//圖表類型

          /******************以下chart配置可選******************/
            backgroundColor:"#EAF7FF",//圖表背景色
            borderWidth:5,//圖表邊框寬度
            borderRadius:15,//圖表邊框圓角角度
            plotBackgroundColor:"#6DBFBB",//主圖表區背景顏色
            plotBorderColor:'red',//主圖表邊框顏色
            plotBorderWidth:2,//主圖表邊框寬度
            shadow:true,//是否設置陰影
            zoomType:'xy'//拖動鼠標放大圖表的方向
          },
          credits : {
            href:'http://www.52wulian.org',
            position: {
              x:-30,
              y:-30
            },
style:{
              color:'red',
              fontWeight:'bold'
            },
            text:'我愛物聯網'
          },
           xAxis: {
            categories: ['1','2','3','4','5']
           },
           series: [{
            name: 'series1',
            data: [2,4,5,9,2]
           }]
        });
    });
});
</script>
</head>
<body>
<script src="js/highcharts.js"></script>
    <script src="js/exporting.js"></script>
    <div id="container" style="min-width: 400px; height: 400px; margin: 0
auto"></div>
</body>
</html>

三：colors 顏色
3-1：Colors 選項
圖表的顏色順序。
參數描述默認值
colors
一個數組包含圖表系列的默認顏色，當所有顏色都
用完的時候，新的顏色將從最初的顏色從新開始。
colors: [
'#4572A7',
'#AA4643',
'#89A54E',
'#80699B',
'#3D96AE',
'#DB843D',
'#92A8CD',
'#A47D7C',
'#B5CA92'
]
四：credits名片選項
credits 是默認圖標右下方的 highchart.com 的名片標簽。
參數描述默認值
enabled 是否顯示 credits 的文本 true
href credits 標簽的 href http://www.highcharts.com
positioncredits 標簽的位置。alig n, verticalAlign,x 和 y null
style credits 標簽的 CSS 樣式 null
text credits 標簽的文本   Highcharts.com

五：exporting 導出和打印選項
5-1：exporting 導出和打印選項
參數描述默認值
buttons exportBut ton、printButton 導出和打印的默認值
chartOptions 給導出圖表添加圖表選項 null
enabled 導出模塊是否可用 true
filename 導出圖表的文件名稱，不帶擴展名 chart
type
chart.exportChart()被調用時，如果沒有特
殊的 type 選項，就使用默認的 MIME 類型導
出
image/png
url
轉化 SVG 字符串為圖片格式的服務器模塊的
URL
http://export.highcharts.com
width
圖表導出為 png 或 jpg 類型的時候的像素寬
度
800.0
5-2：exportButton 導出按鈕
參數描述默認值
align 按鈕的對齊方式 right
backgroundColor 按鈕的背景色或漸變色 null
borderColor 按鈕的邊框顏色 #B0B0B0
borderRadius   按鈕邊框的圓角半徑 3.0
borderWidth 按鈕的邊框寬度 1.0
enabled 按鈕是否可用 true
height 按鈕的像素高度 20.0
hoverBorderColor   鼠標經過時按鈕的邊框顏色 #909090
hoverSymbolFill 參見 navigation.buttonOptions=>hoverSymbolFill#768F3E
hoverSymbolStroke 鼠標經過按鈕，按鈕內部標志的邊框線顏色 #4572A5
menuItems 菜單項 null
onclick 按鈕的點擊事件 chart.print()
symbol 按鈕的標志 exportIcon
symbolFill 參照 navigation.buttonOptions=>symbolFill #A8BF77
symbolSize 按鈕內標志的像素大小 12.0
symbolStroke   標志的邊框或線的顏色 #A0A0A0
symbolStrokeWidth 按鈕內標志的邊框寬度 1.0
symbolX 標志在按鈕中間的 x 軸偏移量 11.5
symbolY 標志在按鈕中間的 y 軸偏移量 10.5
verticalAlign 按鈕的垂直位置 top
width 按鈕的寬度。 24.0
x 按鈕相對於 align 選項的水平位置 -36.0
y 按鈕相對於 verticalAlign 選項的垂直偏移量 10.0
5-3：printButton 打印按鈕
參數描述默認值
align 按鈕的對齊方式 right
backgroundColor 按鈕的背景色或漸變色 null
borderColor   按鈕的邊框顏色 #B0B0B0
borderRadius 按鈕邊框的圓角半徑 3.0
borderWidth 按鈕的邊框寬度 1.0
enabled   按鈕是否可用 true
height 按鈕的像素高度 20.0
hoverBorderColor 鼠標經過時按鈕的邊框顏色 #909090
hoverSymbolFill   參見 navigation.buttonOptions=>hoverSymbolFill#768F3E
hoverSymbolStroke 鼠標經過按鈕，按鈕內部標志的邊框線顏色 #4572A5
menuItems 菜單項 null
onclick 按鈕的點擊事件 chart.print()
symbol   按鈕的標志 exportIcon
symbolFill   參照 navigation.buttonOptions=>symbolFill #A8BF77
symbolSize 按鈕內標志的像素大小 12.0
symbolStroke   標志的邊框或線的顏色 #A0A0A0
symbolStrokeWidth 按鈕內標志的邊框寬度 1.0
symbolX 標志在按鈕中間的 x 軸偏移量 11.5
symbolY 標志在按鈕中間的 y 軸偏移量 10.5
verticalAlign   按鈕的垂直位置 top
width 按鈕的寬度。 24.0
x   按鈕相對於 align 選項的水平位置 -36.0
y 按鈕相對於 verticalAlign 選項的垂直偏移量 10.0

六：global 全局選項
6-1.global 選項
說明：global選項不用於么一個圖表。像lang一類的選項，必須使用Highcharts.setOptions
方法來設置。
Highcharts.setOptions({
global:{
useUTC:false
}});
參數描述默認值
VMLRadialGradient
URL
為了畫徑向漸變圖片，VML
瀏覽器必須的路徑
http://code.highcharts.com/{version}/gfx/vml-radi
al-gradient.png
canvasToolsURL   Android2.x 設備上的延遲 http://www.highcharts.com/js/canvas-tools.js
加載的附加文件的 URL
useUTC
Highcharts.dataFormat 中
的坐標軸擴展，標尺刻度的
位置和時間顯示是否使用
UTC 時間。
true
七.labels 標簽選項
Labels 屬性允許在 HighCharts 圖表的任意位置添加任意的 html 代碼。可以實現許多
自定義內容。
7-1：屬性
參數描述默認值
items Html，style
style 所有標簽的共享 CSS 樣式 style: {color: '#3E576F'}

7-1-1：items 單個項目

參數描述默認值
Html label 的內部 html 或者文本 text
style
每一個 label 的 CSS 樣式。設置 label 的位
置
null

7‐ 2：效果圖

7‐ 3：代碼
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
       var chart;
     $(document).ready(function() {
       chart = new Highcharts.Chart({
         chart: {
            renderTo: 'container',
            type: 'areaspline',
          },
          credits : {
              enabled:false //不顯示 highCharts 版權信息
          },
         labels:{
            items:[{
                 //標簽代碼（html 代碼）
                html:'<p style="font-size:20">Copyright © 2012-2013 </p><a
href="http://www.52wulian.org" style="font-size:20;text-decoration: underline;">我愛物聯網
</a>',
             style:{ //設置標簽位置
                left:'100px',
                top:'50px',
                }
                }],
             style:{    //設置標簽顏色
             color:'rgb(0,0,255)'
                }
             },
          xAxis: {
            categories: ['2011-11','2011-12','2012-01','2012-02','2012-03']
                  },
            series: [{
              name: 'series1',
              data: [2,4,5,9,2]
             },{
               name:'series2',
                data:[3,5,7,2,1]
              }]
            });
          });
       });
    </script>
    </head>
    <body>
    <script src="js/highcharts.js"></script>
    <script src="js/exporting.js"></script>
    <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
      </body>
</html>

八：Lang 語言選項
8-1.說明
語言對象。語言對象是全局的，而且不能在圖表初始化的時候設置。它必須使用
Highcharts.setOptions 在圖表初始化之間設置。
Highcharts.setOptions({
lang:
months:[' January', ' February', March, ' April', ' May', ' June', ' July', '
August','Septembre', 'Octobre','Novembre', ' December'],
weekdays:[' Sunday', ' Monday', ' Tuesday', ' Wednesday', ' Thursday ', ' Friday ',
' Saturday ']
}
});
8-2.概覽
參數描述默認值
decimalPoint
在 Highcharts.numberFormat 方法中除
了特定的函數參數外使用的默認的小數
點
.
downloadJPEG   JPEG 下載菜單的文本 Download JPEG image
downloadPDF PDF 下載菜單的文本 Download PDF document
downloadPNG PNG 下載菜單的文本。 Download PNG image
downloadSVG SVG 下載菜單的文本 Download SVG vector image
exportButtonTitle SVG 下載菜單的文本
Export to raster or vector
image
loading
當圖表設置下載狀態后，調用
chart.showLoading 時顯示的 loading
文本
Loading...
months 包含月份名稱的數組
numericSymbols
在坐標軸的標簽中為了縮短大數據使用
的公有制前綴
printButtonTitle   打印按鈕的提示文本 Print the chart
resetZoom 當圖表縮放時顯示的標簽文本 Reset zoom
shortMonths 包含月份縮寫的數組
thousandsSep
Highcharts.numberFormat 方法的千分
隔符，除非特殊參數說明
","
weekdays 包含個星期的名字的數組
['Sunday', 'Monday',
'Tuesday', 'Wednesday',
'Thursday', 'Friday',
'Saturday']

九：legend 圖例選項
參數描述默認值
align 圖例的水平位置 center
backgroundColor 圖例的背景色 null
borderColor 圖例的邊框顏色 #909090
borderRadius   圖例的圓角半徑 5.0
borderWidth 圖例的邊框寬度 1.0
enabled 啟用或禁用圖例 true
floating
當圖例是浮動的，繪圖區將會忽略它，且繪圖區會放在圖例
的后邊
false
itemHiddenStyle 圖例的每個系列項目或點項目隱藏時的 CSS 樣式 null
itemHoverStyle   圖例的每個系列項目或點項目鼠標滑過時的 CSS 樣式 null
itemMarginBottom   每個圖例項目的下邊距。 0.0
itemMarginTop 每個圖例項目的上邊距 0.0
itemStyle 每個圖例項目的 CSS 樣式 null
itemWidth
每個圖例項目的寬度。當一個包含多個圖例項目的水平圖例
需要垂直對齊時，這是非常有用的
null
labelFormatter   系列的格式化標簽 null
layout 圖例項目的布局。可以是’horizontal’或’vertical’ horizontal
lineHeight 圖例項目的行高。V2.1 版本后過期 16.0
margin
如果繪圖區是自動計算且圖例是不浮動的，圖例的邊距就是
圖例和坐標軸標簽或繪圖區的空間。
15.0
maxHeight 圖例的最大高度 null
navigation 當圖例溢出時，分頁導航的選項
padding 圖例盒子的內邊距 8.0
reversed 圖例項目的順序相對於系列或點定義的順序是否要逆序 false
rtl 是否把標志放在文本的右邊 false
shadow 圖例的陰影 false
style 圖例的 CSS 樣式。 null
symbolPadding 圖例內標志和文本的距離 5.0
symbolWidth 圖例內標志的寬度 30.0
useHTML 是否使用 HTML 渲染圖例項目的文本 false
verticalAlign 圖例框的垂直對齊方式 bottom
width 圖例的寬度 null
x
相對於水平對齊方式 align 的 chart.spacingLeft 和
chart.spacingRight 的 x 的偏移量
0.0
y
相對於垂直對齊方式 verticalAlign 的 chart.spacingTop 和
chart.spacingBottom 的垂直偏移量
0.0

十：loading 加載選項
參數描述默認值
hideDuration   淡出效果的持續時間（以毫秒為單位）100.0
labelStyle 加載標簽的 span 的 CSS 樣式
labelStyle: {
fontWeight: 'bold',
position: 'relative',
top: '1em'}
showDuration   淡入效果的持續時間（以毫秒為單位）100.0
style 覆蓋在繪圖區的加載頁面的樣式
style: {position: 'absolute',
backgroundColor: 'white',
opacity: 0.5,
textAlign: 'center'}
說明：加載選項通過圖表的操作控制着覆蓋在繪圖區域的加載頁面是否顯示。這個頁面僅在
顯示調用 chart.showLoading()時，顯示。對於開發者着和終端用戶交互有些事情正在進行
的情況，非常實用。比如通過 XHR 更新數據。“Loading…”文本內容本身不是這個可配置
對象的一部分，是 lang 對象的一部分。

十一.navigation 打印和導出選項
參數描述默認值
buttonOptions 打印按鈕和導出按鈕
menuItemHoverStyle
當導出圖表被點擊時彈出的菜單的單獨選
項的鼠標滑過的 CSS 樣式
menuItemHoverStyle: {
background: '#4572A5',
color: '#FFFFFF'}
menuItemStyle
當導出圖表被點擊時彈出的菜單的單獨選
項的 CSS 樣式
menuItemStyle: {
padding: '0 5px',
background: NONE,
color: '#303030'}
menuStyle
當導出按鈕被點擊時，彈出菜單的 CSS 樣
式
menuStyle: {
border: '1px solid
#A0A0A0',
background: '#FFFFFF'}
buttonOption 屬性參考：翻譯三：exporting打印和導出選項。

十二:Pane 窗格選項
參數描述默認值
background
背景的一個對象或一組對象。子選項包括 backgroundColor、
innerWidth, ourterWidth, borderWidth, borderColor
null
center
極坐標圖或角度測量儀的中心點，像數組[x,y]一樣定位。
位置可以是以像素為單位的整數或者是繪圖區域的百分比
[‘50%’,’50%’]
endAngle
x 軸極坐標或角度軸的最終度數，以度數的方式給出。0 是
北
startAngle+360
startAnglex 軸或測量軸的開始度數，以度數的方式給出。0 是北 0
說明：只適用在極坐標圖和角度測量儀。此可配置對象持有組合 x 軸和 y 周的常規選項。每
個 x 軸和 y 軸都可以通過索引關聯到窗格中。

十三.PlotOptions 繪圖
13-1：選項概覽
參數描述默認值
area   區域圖
arearange 區域圖范圍
areaspline 區域圖曲線圖
areasplinerange   區域圖曲線圖范圍
bar 條狀圖
column 列圖（柱狀圖）
columnrange 列的區域圖
gauge 測量圖
line   直線圖
pie 餅圖
scatter   散點圖
series 序列圖
spline   曲線圖
13-2：area 區域圖
參數描述默認值
allowPointSelect   是否允許通過點擊標簽而選中標簽 false
animation   當一個序列不顯示時，是否顯示動畫 true
color 主要顏色或序列的顏色 null
connectEnds 只用在極坐標圖表中。是否要跨越極端連接序列線的終端 true
connectNulls 是否跨過空的點鏈接圖像線 false
cropThreshold   處理閾值 300.0
cursor   光標 null
dashStyle 圖表段划線樣式的名字 null
dataGrouping 數據分組功能（Highstock 專有屬性）

dataLabels 數據標簽。參見三級標題 datalabels

enableMouseTracking 啟用或禁用鼠標跟蹤一個特定的序列 true
events 事件，參見三級標題 events

fillColor   區域圖的填充顏色 null
fillOpacity   填充區域圖的透明度 0.75
id   序列的 id null
lineColor   圖表基線的獨特顏色 null
lineWidth   圖表基線條的寬度 2.0
marker 標記，參照三級標題 marker

point 單獨點，參見 point

pointInterval
如果序列中沒有給出各點的 x 值，pointInterval 定義了一
個 x 值的時間間隔。
1.0
pointPlacement 可能值:null,”on”,”between” null
pointStart
如果序列沒有給各個點 x 值，pointStart 定義了從哪一個
值開
0.0
selected   在序列初始化時是否選中 false
shadow   圖表線的陰影 true
showCheckbox 如果是 true，將會在圖例項中出現復選框允許選擇序列 false
showInLegend   是否顯示部分序列或全部序列的類型在圖例中 true
stacking   在每個序列頂端是否疊加各個序列的值 null
states   參見 states

stickyTracking
鼠標事件的黏連追蹤。為 true 時顯示提示文本框，false 不
顯示。
true
threshold
Y 軸的值，作為區域圖的基本值，以區分高於閾值或低於閾
值
0.0
tooltip
一個可配置對象，對於可選渲染的各個序列的提示的配置對
象。屬性繼承自 tooltip
{}
trackByArea
是否用整個區域或者是僅僅是先來相應 mouseover 的提
示或者其他鼠標事件
false
turboThreshold
當序列包含一個數據數組的長度超過了 turboThreshold，
只有一維數組中的數據或者二維數組中的 x 和 y 的值被允
許
1000.0
visible   設置序列初始化的可見性 true
zIndex 定義序列的 Z 指數 null
13-2-1：dataLabels 數據標簽
參數描述默認值
align 數據標簽的水平對齊方式 center
backgroundColor數據標簽的背景色 null
borderColor   數據標簽的邊框色 null
borderRadius 數據標簽的邊框圓角半徑 0.0
borderWidth 數據標簽的邊框寬度 0.0
color 數據標簽內文本的顏色 null
crop 是否隱藏超出繪圖區域外的數據標簽 true
enabled   是否啟用數據標簽 false
formatter   回調 Javascript 函數格式化數據標簽 null
overflow 如何處理橫坐標上的溢出的標簽 null
padding
當 borderWidth 或 backgroundColor 被設置的時候，這是框
內的邊距
2.0
rotation   文本旋轉角度 0.0
shadow   標簽框的陰影。 false
style 標簽的樣式 null
useHTML 是否用 HTML 渲染標簽 false
verticalAlign   標簽的垂直排列 null
x   相對於點的 x 偏移量 0.0
y   相對於點的 y 偏移量 -6.0
zIndex 數據標簽的 Z 索引 6
13-2-2：events 事件
參數描述默認值
checkboxClick   當圖例中序列名稱后的復選框被點擊時觸發 null
click 單擊事件，序列被單擊時觸發 null
hide
序列在圖表生成后隱藏時觸發，無論是點擊圖例項隱藏還是
調用.hide()
null
legendItemClick
當序列所屬圖例項目被單擊時觸發。默認動作是切換序列的
可見性
null
mouseOut 當鼠標離開圖表時觸發 null
mouseOver 當鼠標放在圖表上時觸發 null
show
當圖表生成時間以后當序列顯示的時候觸發，無論是點擊圖
例中的項或者調用.show()
null
13-2-3：marker 標記
屬性描述默認值
enabled   啟用或禁用點標記 true
fillColor   點標記的填充顏色 null
lineColor   點標記的外邊框線的顏色 #FFFFFF
lineWidth 點標記的外邊框線的寬度 0.0
radius   點標記的半徑 0.0
states   狀態，參加四級標題 states

symbol   為標記預先定義的形狀或標志

13-2-3-1：states 狀態:
參數描述默認值
hover   參見 hover

Select   參見 select

13-2-3-1-1：hover 鼠標覆蓋狀態
參數描述默認值
enabled   啟用或禁用點標記的鼠標滑過狀態 true
fillColor   點標記的填充顏色 null
lineColor   點標記的外邊框線的顏色 #FFFFFF
lineWidth 點標記的外邊框線的寬度 0.0
radius   點標記的半徑 null
13-2-3-1-2：select 選中狀態
參數描述默認值
enabled   啟用或禁用點標記的選中狀態 true
fillColor   點標記的填充顏色 null
lineColor   點標記的外邊框線的顏色 #FFFFFF
lineWidth 點標記的外邊框線的寬度 0.0
radius   點標記的半徑 null
13-2-4：point 單獨的點
參數描述默認值
events 單個點的事件，參見 events
13-2-4-1 ：單個點的events事件:
參數描述默認值
click 當點被單擊時觸發 null
mouseOut 當鼠標離開區域去接近點的時候觸發 null
mouseOver當鼠標進入區域圖接近點的時候觸發 null
remove   當鼠標進入區域圖接近點的時候觸發 null
select   當點被通過編程選中或者是單擊點選中時觸發 null
unselect   當點被通過編程不被選中或者是單擊點不被選中時觸發。 null
update 當點被通過.update()方法被程序更新時觸發 null
13-3.arearange 區域排列圖
各屬性參照area 區域圖，新增屬性如下
dataLabels 中新增的屬性：
參數描述默認值
xHigh 最高的數據標簽相對於點值的 x 偏移量0.0
xLow 最低的數據標簽相對於點值的 x 偏移量0.0
yHigh 最高的數據標簽相對於點值的 y 偏移量-6.0
yLow 最低的數據標簽相對於點值的 y 偏移量16.0
13-4.areaspline區域曲線圖
各屬性參照area 區域圖
13-5.areasplinerange
參照區域排列圖 arearange
13-6.bar 條狀圖
未詳細描述的，參照區域圖
參數描述默認值
allowPointSelect   是否允許通過點擊標簽而選中標簽 false
animation   當一個序列不顯示時，是否顯示動畫 true
borderColor   每個柱狀和條狀的邊框顏色 #FFFFFF
borderRadius 每個柱狀和條狀的邊框圓角半徑 0.0
borderWidth 每個柱狀或條狀的邊框的寬度 1.0
color 主要顏色或者是序列顏色 null
colorByPoint
自動從 options.colors 數組中計算點顏色時，這個選項決
定圖表應該接受每一個序列的顏色還是接受每一個點的
顏色
false
cropThreshold   處理閾值 50.0
cursor   光標 null
dataLabels 數據標簽。參見區域圖二級標題 datalabels

enableMouseTracking 啟用或禁用鼠標跟蹤一個特定的序列 true
events 事件，參見區域圖二級標題 events

groupPadding   每一個組之間的間隔 padding，以 x 軸為單位 0.2
grouping 是否分組無堆棧的列讓他們獨立渲染 true
id   序列的 id null
minPointLength 柱狀圖的最小高度或者條狀圖的最小寬度。 0.0
events 事件，參見區域圖二級標題 events

pointInterval
如果序列中沒有給出各點的 x 值，pointInterval 定義了一
個 x 值的時間間隔。
1.0
pointPadding 每個柱狀或條狀之間的間隔 0.1
pointPlacement 可能值:null,”on”,”between” null
pointRange 每一個點 X 軸有效量程 null
pointStart
如果序列沒有給各個點 x 值，pointStart 定義了從哪一個
值開
0.0
pointWidth 每個列或條狀的像素寬度 null
selected   在序列初始化時是否選中 false
shadow   圖表線的陰影 true
showCheckbox 如果是 true，將會在圖例項中出現復選框允許選擇序列 false
showInLegend   是否顯示部分序列或全部序列的類型在圖例中 true
stacking   在每個序列頂端是否疊加各個序列的值 null
states   參見區域圖 states

stickyTracking
鼠標事件的黏連追蹤。為 true 時顯示提示文本框，false
不顯示。
true
tooltip
一個可配置對象，對於可選渲染的各個序列的提示的配置
對象。屬性繼承自 tooltip
{}
turboThreshold
當序列包含一個數據數組的長度超過了
turboThreshold，只有一維數組中的數據或者二維數組
中的 x 和 y 的值被允許
1000.0
visible   設置序列初始化的可見性 true
zIndex 定義序列的 Z 指數 null
13-7：column 柱狀圖
參照bar 條狀圖
13-8 ：columnrange柱狀排列圖
參照bar 條狀圖
13-9:gauge 測量圖
13-9-1:說明
測量圖需要 highcharts-more.js 的支持
13-9-2: 屬性
參數描述默認值
animation   動畫 true
color 主要顏色或序列顏色 null
cursor   光標 null
dataLabels 同bar，參見二級標題 datalabels

dial   刻度盤，參見 dial

enableMouseTracking 啟用或禁用鼠標跟蹤一個特定的序列 true
events 事件，參見二級標題 events

id   序列的 id null
pivot 支點，參見 pivot

point 同area，參見 point

selected   在序列初始化時是否選中 false
showCheckbox 如果是 true，將會在圖例項中出現復選框允許選擇序列 false
showInLegend   是否顯示部分序列或全部序列的類型在圖例中 null
states   參見 states

stickyTracking
鼠標事件的黏連追蹤。為 true 時顯示提示文本框，false
不顯示。
true
tooltip
一個可配置對象，對於可選渲染的各個序列的提示的配
置對象。屬性繼承自 tooltip
{}
visible   設置序列初始化的可見性 true
zIndex 定義序列的 Z 指數 null
13-9-2-1:dial 撥號盤選項
參數描述默認值
backgroundColor測量圖刻度盤的背景色或填充色 black
baseLength 刻度盤基座的長度，相對於整個刻度盤的半徑或長度 70%
baseWidth 測量刻度盤基座的寬度 3.0
borderColor   刻度盤邊框線的顏色。 silver
borderWidth 刻度盤的邊框寬度 0.0
radius   刻度盤的半徑 80%
rearLength 號盤后側的長度，支點另一側的延伸部分。相對於刻度盤的長度 10%
topWidth   刻度盤上部的寬度 1.0

13-9-2-2:pivot 支點選項
參數描述默認值
backgroundColor樞軸的背景色或填充色 black
borderColor   樞軸邊框的顏色 silver
borderWidth 樞軸邊框的寬度 0.0
radius   樞軸的半徑 5.0

13-10: 餅圖
13-10-1:屬性
參數描述默認值
allowPointSelect   點擊標簽時允許序列的點被選擇 false
animation 動畫 true
borderColor 邊框顏色 #FFFFFF
borderWidth 邊框寬度 1.0
center 餅圖的中心相對於繪圖區。可以是百分比或者是像素值
color 主要顏色或序列的顏色 null
cursor 光標 null
dataLabels 參見 dataLabels
enableMouseTracking 用或禁用鼠標跟蹤一個特定的序列 true
events 事件，參見二級標題 events
id 序列的 id null
ignoreHiddenPoint 是否忽略隱藏的點 false
innerSize 餅圖內部的直徑大小。如果是一個大於 0 的尺寸，會渲染出 0.0
一個圓環。
lineWidth 圖表基線條的寬度 2.0
marker 標記，參照二級標題 marker
point 單獨點，參見 point
pointPlacement   可能值:null,”on”,”between” null
selected 在序列初始化時是否選中 false
shadow 圖表線的陰影 true
showInLegend   是否顯示部分序列或全部序列的類型在圖例中 false
size 餅圖的直徑，相對於繪圖區。可以是百分比或者像素值。 75%
slicedOffset   當餅圖的一塊移出餅圖中心時，應該移動多少像素 10.0
startAngle 餅圖塊開始的角度，0 是上邊，90 是右邊。 0
states 參見 states
stickyTracking
鼠標事件的黏連追蹤。為 true 時顯示提示文本框，false 不
顯示。
true
tooltip
一個可配置對象，對於可選渲染的各個序列的提示的配置對
象。屬性繼承自 tooltip
{}
visible 設置序列初始化的可見性 true
zIndex 定義序列的 Z 指數 null
13-10-2:dataLable 數據標簽
參數描述默認值
backgroundColor 數據標簽的背景色 null
borderColor   數據標簽的邊框色 null
borderRadius 數據標簽的邊框圓角半徑 0.0
borderWidth 數據標簽的邊框寬度 0.0
color 數據標簽內文本的顏色 null
connectorColor 數據標簽和餅圖各塊的連接線的顏色 {point.color}
connectorPadding 數據標簽到連接線的距離 5.0
connectorWidth   數據標簽和餅圖塊之間的連接線的寬度 1.0
crop 是否隱藏落在繪圖區域外的數據標簽 true
distance   數據標簽到餅圖邊緣的距離 30.0
enabled   是否啟用數據標簽 true
formatter   回調 Javascript 函數格式化數據標簽 null
overflow 如何處理橫坐標上的溢出的標簽 null
padding
當 borderWidth 或 backgroundColor 被設置的時候，
這是框內的邊距
2.0
rotation   文本旋轉角度 0.0
shadow   標簽框的陰影。 false
softConnector   是否把連接線作為一個軟弧線或者銳利的線來渲染 true
style 標簽的樣式 null
useHTML 是否用 HTML 渲染標簽 false
verticalAlign   標簽的垂直排列 null
x   相對於點的 x 偏移量 0.0
y   相對於點的 y 偏移量 -6.0
zIndex 數據標簽的 Z 索引 6
13-11 其他圖形
其他圖形，如直線圖 line，曲線圖 spline，散點圖 scatter，序列圖 series 等圖形參照區域
圖area
13-11-1：Highcharts Stock 中 dataGrouping

屬性描述默認值
approximation average
dateTimeLabelFormats
enabled 啟用或禁用數據分組。 true
forced
groupPixelWidth
smoothed
units

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 highcharts API 中文 highcharts x軸中文刻度太長換行 IScroll5中文API整理,用法與參考 jquery.Inputmask 插件用法（中文API文檔） Javascript圖表插件HighCharts用法案例 highcharts HighCharts/Highstock使用小結,使用漢化及中文幫助文檔 java 8 中文API Selenium 中文API 中文Appium API 文檔