Highcharts的一些基本設定
簡介
Highcharts 是一個用純JavaScript編寫的一個圖表庫, 能夠很簡單便捷的在web網站或是web應用程式新增有互動性的圖表，並且免費提供給個人學習、個人網站和非商業用途使用。目前HighCharts支援的圖表型別有曲線圖、區域圖、柱狀圖、餅狀圖、散狀點圖和綜合圖表
demo
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title></title> <meta name="author" content="@my_coder"> </head> <body> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js" ></script> <script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/modules/exporting.js"></script> <div id="container"style="min-width: 400px; height: 400px; margin: 0 auto"></div> <script type="text/javascript"> <!-- $(function () { $('#container').highcharts({ //圖表區選項 chart: { plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false}, //標題選項 title: { text: 'Browser market shares at a specific website, 2010' }, //資料點提示框 tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }, //資料點選項 plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, color: '#000000', connectorColor: '#000000', format: '<b>{point.name}</b>: {point.percentage:.1f} %' } } }, //資料列選項 series: [{ type: 'pie', name: 'Browser share', data: [ ['Firefox', 45.0], ['IE', 26.8], { name: 'Chrome', y: 12.8, sliced: true, selected: true }, ['Safari', 8.5], ['Opera', 6.2], ['Others', 0.7] ] }] }); }); //--> </script> </body> </html>
Highcharts提供大量的選項配置引數，您可以輕鬆定製符合使用者要求的圖表，目前官網只提供英文版的開發配置說明文件，而中文版的文件網上甚少，且零散不全。這裡，我把Highcharts常用的最核心的引數選項配置整理成文件，與大家分享。
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']
});
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}] |
'' |
| name | 顯示資料列的名稱。 | '' |
| type | 資料列型別，支援 area, areaspline, bar, column, line, pie, scatter or spline | line |
plotOptions：資料點選項
plotOptions用於設定圖表中的資料點相關屬性。plotOptions根據各種圖表型別，其屬性設定略微有些差異，現將常用選項列出來。
| 引數 | 描述 | 預設值 |
| enabled | 是否在資料點上直接顯示資料 | false |
| allowPointSelect | 是否允許使用滑鼠選中資料點 | false |
| formatter | 回撥函式，格式化資料顯示內容 | formatter: function() {return this.y;} |
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 | 設定圖例內容樣式 |
'' |
HIGHCHARTS圖表史上最全的引數配置(屬性+事件)
chart.events.addSeries：新增數列到圖表中。
chart.events.click：整個圖表的繪圖區上所發生的點選事件。
chart.events.load：圖表載入事件。
chart.events.redraw：圖表重畫事件，當點選圖注顯示和隱藏繪圖時可以觸發。
chart.events.selection：當圖表曲線可選擇放大時，當選擇圖表操作時，可以觸發該事件。
chart.height：所繪製圖表的高度值。
chart.inverted：圖表中的x，y軸對換。
chart.polar：是否為極性圖表。
chart.reflow：當視窗大小改變時，圖表寬度自適應視窗大小改變。
chart.renderTo：圖表載入的位置，是頁面上的一個DOM物件。
chart.showAxes：在空白圖表中，是否顯示座標軸。
chart.type：圖表的型別，預設為line，還有bar/column/pie……
chart.width：圖表繪圖區的寬度，預設為自適應。
chart.zoomType：圖表中資料報表的放大型別，可以以X軸放大，或是以Y軸放大，還可以以XY軸同時放大。
colors：圖表中多數列時，各數列之間的顏色。是一個數組，一般不動。
credits.enabled：是否允許顯示版權資訊。
credits.href：版權所有的連結。
credits.text：版權資訊顯示文字。
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：預設匯出圖片的寬度。
labels：標籤，可以載入到圖表的任何位置，裡面有items，style。
lang：語言引數配置，與匯出按鈕選單有關的配置，時間名稱的配置等。
legend.enabled：是否允許圖注。
navigation.buttonOptions.enabled：圖表中所有導航中的按鈕是否可被點選。
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配置。
series：是一個數組。
series.data.color：某一個數據的顏色。
series.data.dataLabels：序列中某一個數據的資料標籤。
series.data.events類同於plotOptions.area.point.events的相關配置。
series.data.marker類同於plotOptions.area.marker的相關配置。
series.data.name：配置資料點的名稱。
series.data.sliced：配置在餅圖中，扇區的分離距離大小。
series.data.x：點的x值。
series.data.y：點的y值。
相關推薦
Highcharts的一些基本設定
簡介 Highcharts 是一個用純JavaScript編寫的一個圖表庫, 能夠很簡單便捷的在web網站或是web應用程式新增有互動性的圖表，並且免費提供給個人學習、個人網站和非商業用途使用。目前HighCharts支援的圖表型別有曲線圖、區域圖、柱狀圖、餅狀圖
PHPExcel一些基本設定總結
//例項化PHPExcel類庫，相當於新建一個Excel表 $objPHPExcel = new PHPExcel(); //獲取當前活動sheet $objSheet = $objPHPExcel->getActiveSheet(); //給當前的活動sheet起個名稱 $objShee
用WordPress程式做博的一些基本設定讓你的部落格飛起來
大家做自媒體部落格一般網站上線後，像網站模板，欄目，LOGO等基本設定後，就製作運營相關的工作就行了，因為WordPress程式，簡單快捷，模板多，操作簡單，所以WP程式成為很多網友的首選建站程式，但是用WordPress建站的話需要注意設定一些細節，這樣你的部落格會有一個
關於CentOS安裝完成的一些基本設定技巧
一.自動登入功能 學習期間不同於實際工作環境，不需要較於嚴格的系統安全管理，為了方便學習操作，大多數學員都選擇採取對於Linux系統的自動登入。 [[email protected] ~]#nano /etc/gdm/custom.conf 這
AndroidStudio基本設定，以及一些使用小技巧
如果本文幫助到你，本人不勝榮幸，如果浪費了你的時間，本人深感抱歉。 希望用最簡單的大白話來幫助那些像我一樣的人。如果有什麼錯誤，請一定指出，以免誤導大家、也誤導我。 本文來自：www.jianshu.com/users/320f9… 感謝您的關注。 本文是另一篇文章的衍生。 點選進入另一篇： 記錄
窗體設定的一些基本屬性(一部分)
this.Location = new System.Drawing.Point(100, 100); // 定義在窗體上，游標顯示為手形 this.Cursor = System.Windows.Forms.Cursor
泛型的一些基本認知
bject jdk1 認知 左右 list 多態 arr object 數據 泛型是jdk1.5使用的新特性。 泛型的好處： 1. 將運行時的異常提前至了編譯時。 2. 避免了無謂的強制類型轉換 。 泛型在集合中的常見應用： ArrayLis
html的一些基本內容
tar cte 簽名 其他 默認值 放置 結構 也有 共享 html基本語法 基本格式 <html> <head> <title></title> <meta /> </head> <b
一些基本數學方法
int col ret cout long sin blog div 輾轉相除法 快速冪取模運算 1 #include <iostream> 2 using namespace std; 3 4 int main() 5 { 6 int
C3P0連接池一些基本配置
ont lsi 過程 stc state 參數 一個 initial 進程 1 C3P0連接池配置 2 數據庫連接是一個耗費大量資源且相當慢的操作，所以為了提高性能和連接速度，誕生了連接池這樣的概念。 3 在多用戶並發操作過程中，連接池尤為重要
Mysql數據庫的一些基本操作
-h 知識 刪除mysql init rst 建表 自動刪除 fault order 今天，終於把MySQL數據庫的知識系統的過了一遍，下面整理出一些常用的基本操作。 一、MySQL服務器的啟動與關閉 1、啟動MySQL服務器 開始 -> 運行 輸入“cmd”，然
c++運算符重載以及一些基本概念
不同類 col end 錯誤 pan [] () 無限 c++對象 c++primer第四版435 1.賦值( = )， 下標( [ ] ) ，調用 ( ( ) ), 成員訪問箭頭 （->）等操作符必須定義為成員，定義為非成員時，編譯器報錯 2. 像賦值一樣。
圖像處理的一些基本概念
基本概念 相似性 度量 relation ont spa n) mil 卷積 圖像相關(Image correlation)：圖像在不同相對位置上相似性程度和相關匹配程度的度量。圖像f(x,y)和g(x,Y)的相關兩幅圖像之間的相關稱為互相關；同一圖像的相關( f和g為同一
js 數組的一些基本操作
循環 負數 16px 抽取 .sh 自己 方法 多少 不包含 var arr1 = [1,2,3,4,5,6]; arr1[0]; arr1[1]; console.log("長度:"+arr1.length); 一、遍歷數組
bootstrap-table的一些基本使用及表內編輯的實現
視圖 time lis toggle ber true 請求 cache ng- 最近工作需要接觸了bootstrap-table 所以研究了一下，並做了筆記，紅色位置要特別註意 前端主要使用了 jquery bootstrap-table bootstrap-edit
git 的一些基本操作
str 一個 修改信息 rem 建倉 文件添加 nbsp init origin 獲取倉庫 git init：初始化一個倉庫，當前目錄下生成 .git 目錄，該目錄為倉庫。 git init --bare ：生成裸倉庫，不存在 .git 目錄。 git clone (
關於yum的一些基本的東西
信息 基本 處理 bsp 數據庫文件 服務器 操作 centos 歷史 1 sqlite數據庫的使用 第一，某個centos版本的包相關的信息都放在一個服務器端的sqlite數據庫文件中，yum會下載到本地，進行包安裝的時候用。 第二，安裝的歷史記錄放在sqlite數據庫中
shell腳本一些基本語句的用法
shell 語句一.for語句1.使用for語句批量添加用戶2.使用for語句檢查主機是否可以正常ping通二：while語句1.使用while語句按用戶名有規律添加用戶2.使用while語句編寫猜價格腳本三：case語句1.使用case語句編寫測試字符類型腳本2.使用case語句編寫服務狀態控制腳本本文出自
IOC和AOP的一些基本概念
們的 tpi instance 一點 男朋友 iou 我想 而不是 工作 IOC和AOP的一些基本概念介紹 IOC 介紹 IOC 一、什麽是IOC IoC就是Inversion of Control，控制反轉。在Java開發中，IoC意味著將你設計好的類交給系統去控制，
github+hexo搭建自己的博客網站（三）主題之外的一些基本配置(圖片位置，文章目錄功能)
100% setattr border color fff scale 進行 自己 num 使用的yilia主題之後，還需要進行自己的定制配置 1、圖片的位置 比如打賞的支付寶二維碼圖片，是在當前博客的source/assets/img/下 （不是當前主題） 配