1. 程式人生 > >[JS圖表控制元件]Highcharts:非常漂亮的圖表API

[JS圖表控制元件]Highcharts:非常漂亮的圖表API

Highcharts是一個製作圖表的純Javascript類庫,主要特性如下:

  • 相容性:相容當今所有的瀏覽器,包括iPhone、IE和火狐等等;
  • 對個人使用者完全免費;
  • 純JS,無BS;
  • 支援大部分的圖表型別:直線圖,曲線圖、區域圖、區域曲線圖、柱狀圖、餅裝圖、散佈圖;
  • 跨語言:不管是PHP、Asp.net還是Java都可以使用,它只需要三個檔案:一個是Highcharts的核心檔案highcharts.js,還有a canvas emulator for IE和Jquery類庫或者MooTools類庫;
  • 提示功能:滑鼠移動到圖表的某一點上有提示資訊;
  • 放大功能:選中圖表部分放大,近距離觀察圖表;
  • 易用性:無需要特殊的開發技能,只需要設定一下選項就可以製作適合自己的圖表;
  • 時間軸:可以精確到毫秒;
  • ……

程式碼示例:

  1. var chart1 = new Highcharts.Chart({
  2.          chart: {
  3.             renderTo: 'chart-container-1',
  4.             defaultSeriesType: 'bar'
  5.          },
  6.          title: {
  7.             text: 'Fruit Consumption'
  8.          },
  9.          xAxis: {
  10.             categories: ['Apples', 'Bananas', 'Oranges]
  11.          },
  12.          yAxis: {
  13.             title: {
  14.                text: 'Fruit eaten'
  15.             }
  16.          },
  17.          series: [{
  18.             name: 'Jane',
  19.             data: [1, 0, 4]
  20.          }, {
  21.             name: '
    John',
  22.             data: [5, 7, 3]
  23.          }]
  24.       });