highcharts图标插件详解一
生活随笔
收集整理的這篇文章主要介紹了
highcharts图标插件详解一
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
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
- colors
- credits 右下角的名片說明
- global Highcharts.SetOptions方法調(diào)用
- labels HTML標(biāo)簽,可以放置在繪圖的任何位置
- lang
- 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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 列表导航栏实例(02)——精美电子商务网
- 下一篇: js联动清除的一个想法