highcharts以其強大的功能，美觀的界面，吸引了眾多程序員的使用。highcharts的功能也在不斷的完善中。highcharts插件官網：http://www.highcharts.com/。demo網址：http://www.highcharts.com/demo/。參考手冊網址：http://api.highcharts.com/highcharts。

這個javascript圖標控件的使用需要兩個js類庫，一個是highcharts.js，另一個是exporting.js

現將一些基本功能的使用列出如下：

?

chart： renderTo圖表的頁面顯示容器 defaultSeriesType圖表的顯示類型（line,spline, scatter, splinearea bar,pie,area,column） margin上下左右空隙 events????????????? 事件 click?????????????? ?function(e) {} load????????????????function(e) {} xAxis：yAxis: ?屬性： gridLineColor?????????? 網格顏色 reversed是否反向 true ,false gridLineWidth網格粗細 startOnTick是否從坐標線開始畫圖區域 endOnTick ?是否從坐標線結束畫圖區域 tickmarkPlacement????????? 坐標值與坐標線標記的對齊方式on,between tickPosition坐標線標記的樣式 向內延伸還是向外延伸(insidel,outside) tickPixelInterval決定著橫坐標的密度 tickColor坐標線標記的顏色 tickWidth坐標線標記的寬度 lineColor??????? ?????? 基線顏色 lineWidth基線寬度 max固定坐標最大值 min固定坐標最小值 plotlines標線屬性 maxZoom minorGridLineColor minorGridLineWidth /minorTickColor title： enabled：是否顯示 text：坐標名稱 Labels??????????? 坐標軸值顯示類默認：defaultLabelOptions ??? formatter格式化函數 ?? enabled是否顯示坐標軸的坐標值 ?????? rotation?????????? 傾斜角度 align??????????? ???? 與坐標線的水平相對位置 x????????????????????? 水平偏移量 y????????????????????? 垂直偏移量 style????????????? ? font???? 字體樣式?默認defaultFont color?????? 顏色 Tooltip??????? 數據點的提示框 ?? enabled鼠標經過時是否可動態呈現true,false formatter????????????????? 格式化提示框的內容樣式 ? plotOptions?? 畫各種圖表的數據點的設置 ??? defaultOptions??????? 默認設置 屬性 ??? Area類: lineWidth線寬度 fillColorarea的填充顏色組 marker{}設置動態屬性 shadow是否陰影?true,false states設置狀態？ ?? Line類 dataLabels:?? ???? 數據顯示類 enabled?????????? 是否直接顯示點的數據true,false series ?name?????????????????? 該條曲線名稱 ?data[]???????????????????? 該條曲線的數據項 addPoint([x,y],redraw,cover)?添加描點，redraw 是否重畫，cover是否左移 setData: function(data, redraw)?重新設置Data數組，redraw是否重畫 remove: function(redraw)???????? 刪除曲線 redraw: function()???????????????????? 重畫曲線 marker ： enabled是否顯示描點 。。。。。。 dateFormat(options.dateTimeLabelFormats[unit[0]], this.value, 1) highcharts 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: [ '#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 useUTC　　　　:Boolean　　UTC time　　　　http://jsfiddle.net/X3jPh/

• labels　　HTML標簽，可以放置在繪圖的任何位置

item　　:Array html　　:String style　　:CSSObject style　　　　：CSSObject

• lang

decimalPoint　　　　:String　　　　小數點?默認值"." downloadPNG　　　　:String　　　　導出圖片PNG ?默認值："Download PNG p_w_picpath". downloadJPEG　　　　:String?　　　導出圖片JPEG ?默認值：?"Download JPEG p_w_picpath" downloadPDF downloadSVG exportButtonTitle　　:String　　　　導出圖片按鈕　　默認值：?"Export to raster or vector p_w_picpath". 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
• loading
• plotOptions
• point
• series
• subtitle
• symbols
• title
• tooltip
• xAxis
• yAxis
• exporting
• navigation

});

轉載于:https://blog.51cto.com/cangqiong/982074

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的highcharts图标插件详解一的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。