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

這個(gè)javascript圖標(biāo)控件的使用需要兩個(gè)js類庫，一個(gè)是highcharts.js，另一個(gè)是exporting.js

現(xiàn)將一些基本功能的使用列出如下：

?

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

• chart

alignTicks　　　　:true　　Boolean　　多個(gè)y軸時(shí)對他們公共軸心的選取，ture為自動選取較適宜的公共軸心 animation　　　　:true　　BooleanObject　　動畫更新效果 backgroundColor　　　　:Color　　繪圖區(qū)背景色 borderColor　　　　:Color　　繪圖邊框顏色　 borderRadius　　　　:Number　　繪圖邊角的弧度設(shè)置 borderWidth　　　　:Number　　　　邊框?qū)挾仍O(shè)置 className　　　　:String　　　　確定繪圖區(qū)容器的類區(qū)范圍 defaultSeriesType　　　　:Sting　　默認(rèn)繪圖類型的設(shè)置 events　　　　:chart.events　　繪圖觸發(fā)事件 addSeries　　　　:Function　　添加series數(shù)據(jù) click　　　　：Function　　單擊事件 load　　　　:Function　　加載事件 redraw　　　　：Function　　重畫事件 selection　　　　:Function　　選著區(qū)域事件 height　　　　:Number　　高度 ignoreHiddenSeries　　　　:True　　Boolean　　多個(gè)數(shù)據(jù)時(shí)，隱藏一個(gè)數(shù)據(jù)是否更改軸心，true為可更改，false為不可更改 inverted　　　　:False　　Boolean　　　數(shù)軸的轉(zhuǎn)換 margin　　　　:Numberr　　內(nèi)邊距設(shè)置 marginTop marginBottom marginRight marginLeft plotBackgroundColor　　　　:Color　　部分顏色的變化 plotBackgroundImage　　　　:String　　加載圖片 plotBorderColor plotBorderWidth plotBorderShadow reflow　　　　:True　　　　:Boolean　　是否跟誰容器大小改變 renderTo　　　　:String　　引用容器 resetZoonButton　　　　區(qū)域選擇與重置圖片與event事件中的selection事件相似 selectionMarkerFill　　　　懸著區(qū)域的顏色 shadow　　　　陰影 showAxes　　　　加載前軸的顯示 spacingTop　　外邊距　　：Number spacingBottom spacingLeft style　　　　：CSSObject type　　　　繪圖類型 默認(rèn)：line width　　　　繪圖寬度的設(shè)置 zoomType　　　　區(qū)域選擇范圍?可與event.selection和resetZoomButton參考，他們是區(qū)域選擇的功能接口

• colors

colors: [ '#4572A7', '#AA4643', '#89A54E', '#80699B', '#3D96AE', '#DB843D', '#92A8CD', '#A47D7C', '#B5CA92' ]

• credits　　　　右下角的名片說明

enabled　　　　:Boolean　　默認(rèn)值：True　　是否顯示名片 position　　　　:Object　　位置的確定 href　　　　　　:String　　名片連接地址?默認(rèn)值：www.highcharts.com style　　　　　　:CSSObject　　名片CSS模式 text　　　　　　:String　　名片顯示名字　　默認(rèn)值：highcharts.com

• global　　Highcharts.SetOptions方法調(diào)用

canvasToolsURL　　　　:String　　　　畫布工具連接，例如：Andrio的 2.0不支持SVG useUTC　　　　:Boolean　　UTC time　　　　http://jsfiddle.net/X3jPh/

• labels　　HTML標(biāo)簽，可以放置在繪圖的任何位置

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

• lang

decimalPoint　　　　:String　　　　小數(shù)點(diǎn)?默認(rèn)值"." downloadPNG　　　　:String　　　　導(dǎo)出圖片PNG ?默認(rèn)值："Download PNG p_w_picpath". downloadJPEG　　　　:String?　　　導(dǎo)出圖片JPEG ?默認(rèn)值：?"Download JPEG p_w_picpath" downloadPDF downloadSVG exportButtonTitle　　:String　　　　導(dǎo)出圖片按鈕　　默認(rèn)值：?"Export to raster or vector p_w_picpath". loading　　　:String　　　　加載顯示?默認(rèn)值：?Loading.... months　　　　:Array<String>　　　　月的數(shù)組??Highcharts.dateFormat() ?默認(rèn)值：['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']. shortMonths　　上邊月的縮寫數(shù)組 printButtonTitle　　:String?　　　　打印按鈕　　默認(rèn)值：?"Print the chart". resetZoom　　　　:String　　　　重置焦距?默認(rèn)值：?Reset zoom. resetZoomTitle　　　　:String　　　　重置焦距設(shè)置?默認(rèn)值：?Reset zoom level 1:1. thousandsSep　　　　:String　　　　前分為?默認(rèn)值：",".例如：1，000,000 weekdays　　　　:Array<String>　　　星期數(shù)組　　默認(rèn)值：?['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'].

• legend
• loading
• plotOptions
• point
• series
• subtitle
• symbols
• title
• tooltip
• xAxis
• yAxis
• exporting
• navigation

});

轉(zhuǎn)載于:https://blog.51cto.com/cangqiong/982074

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。