利用Highcharts製做web圖表學習(一)

前言:最近項目中須要對數據進行彙總和分析得出柱狀圖或曲線圖這樣散裝點圖,通過學習和測試發現Highchart不錯,若是你們項目中須要的話,不妨看看有的例子摘自官網
 
1、先說說HighCharts的主要特性包括:
1.兼容性:HighCharts採用純JavaScript編寫,兼容當今大部分的瀏覽器,包括Safari、IE和火狐等等;
2.圖表類型:HighCharts支持圖表類型,包括曲線圖、區域圖、柱狀圖、餅狀圖、散狀點圖和綜合圖表等等,能夠知足各類需求。
3.不受語言約束:HighCharts能夠在大多數的WEB開發中使用,而且對我的用戶免費,支持ASP,PHP,JAVA,.NET等多種語言中使用。
4.提示功能:HighCharts生成的圖表中,能夠設置在數據點上顯示提示效果,即將鼠標移動到某個數據點上,能夠顯示該點的詳細數據,而且能夠對顯示效果進行設置。
5.放大功能:HighCharts能夠大量數據集中顯示,而且能夠放大某一部分的圖形,將圖表的精度增大,進行詳細的顯示,能夠選擇橫向或者縱向放大。
6.時間軸:能夠精確到毫秒。
2、接下來了解highcharts的基本組成

一般狀況下,Highcharts包含標題(Title)、座標軸(Axis)、數據列(Series)、數據提示框(Tooltip)、圖例(Legend)、版權信息(Credits)等,高級的還包括導出功能按鈕(Exporting)、標示線(PlotLines)、標示區域(PlotBands)等。瀏覽器

Highcharts基本組成部分以下圖所示函數

圖2-1 Highcharts基本組成部分學習

Highcharts主要組成

Title

圖表標題,包含標題和副標題(subTitle),其中副標題是非必須的。測試

Axis

座標軸,包含x軸(xAxis)和y軸(yAxis)。一般狀況下,x軸顯示在圖表的底部,y軸顯示在圖表的左側。多個數據列能夠共同使用同一個座標軸,爲了對比或區分數據,Highcharts提供了多軸的支持。ip

Series

數據列。圖表上一個或多個數據系列,好比曲線圖中的一條曲線,柱狀圖中的一個柱形。開發

Tooltip

數據提示框。當鼠標懸停在某點上時,以框的形式提示該點的數據,好比該點的值,數據單位等。數據提示框內提示的信息徹底能夠經過格式化函數動態指定。it

Legend

圖例。用不一樣形狀、顏色、文字等 標示不一樣數據列,經過點擊標示能夠顯示或隱藏該數據列。class

Credits

圖表版權信息。顯示在圖表右下方的包含連接的文字,默認是Highcharts官網地址。經過指定credits.enabled=false便可不顯示該信息。Highcharts

Exporting

導出功能按鈕。經過引入exporting.js便可增長圖表導出爲常見文件功能。兼容性

PlotLines

標示線(或輔助線)。能夠在圖表上增長一條標示線,好比平均值線,最高值線等。

PlotBands

標示區域(分辨帶)。能夠在圖表添加不一樣顏色的區域帶,標示出明顯的範圍區域。

相關文章
相關標籤/搜索