highcharts使用介紹

本文章來自嗨網

原文標題: highcharts使用介紹

HighCharts的簡介

Highcharts 是一個用純JavaScript編寫的一個圖表庫, 能夠很簡單便捷的在web網站或是web應用程序添加豐富漂亮、有交互性的圖表,並且免費提供給個人學習、個人網站和非商業用途使用。目前HighCharts支持的圖表類型有曲線圖、區域圖、柱狀圖、餅狀圖、散狀點圖和綜合圖表。

HighCharts界面美觀,由於使用JavaScript編寫,所以不需要像Flash和Java那樣需要插件纔可以運行,而且運行速度快。另外HighCharts還有很好的兼容性,它兼容幾乎所有的瀏覽器,包括iphone以及老掉牙的IE6。Highcharts還提供豐富的參數配置,開發人員可以通過不同的配置生成各種圖表。此外,Highcharts還支持圖表導出,圖表局部放大,圖表提示、多圖表共存等多種特性能夠完美支持當前大多數瀏覽器。現在官方的最新版本爲HighCharts2.3.2。

HighCharts的主要特點

HighCharts的主要特性包括:

  • 速度快,看起來很雅緻,界面漂亮。
  • 不像Flash或Java需要插件纔可使用。
  • 彈出窗口是沒有問題的。可以在當前的瀏覽器窗口中打開內容。
  • 單點擊。彈出的內容在當前瀏覽器窗口中,用戶還可以在保留當前彈出內容的情況下繼續滾動網頁而不需要關閉它。
  • 大量的配置選項和可擴展性。一個組件系統可讓您未使用的功能壓縮到一個10kB的文件大小。
  • 出色的,無條件的和不限用戶身分,包含支持商業和非商業用戶。
  • 具有良好的兼容性和可訪問性,當用戶在Javascrip 失效的情況下,或是使用早期版本的瀏覽器,瀏覽器仍然會重定向到圖片本身或事先指定的HTML頁。HighCharts採用純JavaScript編寫,兼容當今大部分的瀏覽器,包括iPhone、IE和火狐等等;
  • 圖表類型衆多:HighCharts現在支持多種圖表類型,包括曲線圖、區域圖、柱狀圖、餅狀圖、散狀點圖和綜合圖表等等,可以滿足各種需求。
  • 不受語言約束:HighCharts可以在大多數的WEB開發中使用,並且對個人用戶免費,支持ASP,PHP,JAVA,.NET等多種語言中使用。
  • 提示功能:HighCharts生成的圖表中,可以設置在數據點上顯示提示效果,即將鼠標移動到某個數據點上,可以顯示該點的詳細數據,並且顯示效果可以進行設置。
  • 放大功能:HighCharts可以大量數據集中顯示,並且可以放大某一部分的圖形,將圖表的精度增大,進行詳細的顯示,可以選擇橫向或者縱向放大。
  • 時間軸:可以精確到毫秒。

系統需求:jQuery 或者 MooTools

瀏覽器支持: IE6,7,8, Firefox 2, firefox 3.5, Safari 3, 4, Opera 9, IPhone!

授權類型:Creative Commons Attribution Non-Commercial 3.0 License. 學校,非盈利組織及其個人免費使用。

HighCharts使用準備

我們要先將jquery庫以及highcharts圖表庫。

<script type="text/javascript" src="js/jquery.js"></script>  <script type="text/javascript" src="js/highcharts.js"></script>  

XHTML代碼

在需要放置圖表的頁面body中加入以下代碼:

<div id="higrid_net_chart_line" style="width: 800px; height: 400px; margin: 0 auto"></div>  

當然,如果您覺得上面highcharts的安裝教程太繁瑣,一個最簡單的方法是下載highcharts最簡單的例子,上面的js和Css已經合併好了,可以快速開始highcharts使用

Javascript代碼

具體請看嗨網的在線演示代碼,這樣,就可以生成一個漂亮的線狀圖表了。要想對highcharts的應用有更深入的瞭解,請關注嗨網後面的文章。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章