Highcharts – 超强javascript图表库

发布于，归属于javascript ,jquery插件。 前5个座位已被强势霸占！ 共有1,389人围观    

Highcharts是一个功能非常强大的javascript（基于jquery，但并没有采用jquery插件的形式）图表库，实现的效果非常接近flash的图表效果。

官方网站：http://www.highcharts.com/

简易使用教程：

引入js和css

  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"><script><script src="/highcharts/highcharts.js" type="text/javascript"></script><script src="/highcharts/excanvas-compressed.js" type="text/javascript"></script>

初始化插件：

  1. $(document).ready(function() {
  2.             var chart = new Highcharts.Chart({
  3.                 chart: {
  4.                     renderTo: 'container',
  5.                     defaultSeriesType: 'area'
  6.                 },
  7.                 title: {
  8.                     text: 'US and USSR nuclear stockpiles'
  9.                 },
  10.                 subtitle: {
  11.                     text: 'Source: http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf'
  12.                 },
  13.                 xAxis: {
  14.                 },
  15.                 yAxis: {
  16.                     title: {
  17.                         text: 'Nuclear weapon states'
  18.                     },
  19.                     labels: {
  20.                         formatter: function() {
  21.                             return this.value / 1000 +'k';
  22.                         }
  23.                     }
  24.                 },
  25.                 tooltip: {
  26.                     formatter: function() {
  27.                         return this.series.name +' produced <b>'+
  28.                             Highcharts.numberFormat(this.y, 0, null, ' ') +'</b><br/>warheads in '+ this.x;
  29.                     }
  30.                 },
  31.                 plotOptions: {
  32.                     area: {
  33.                         pointStart: 1940,
  34.                         marker: {
  35.                             enabled: false,
  36.                             symbol: 'circle',
  37.                             radius: 2,
  38.                             states: {
  39.                                 hover: {
  40.                                     enabled: true
  41.                                 }
  42.                             }
  43.                         }
  44.                     }
  45.                 },
  46.                 series: [{
  47.                     name: 'USA',
  48.                     data: [null, null, null, null, null, 6 , 11, 32, 110, 235, 369, 640,
  49.                         1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,
  50.                         27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,
  51.                         26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,
  52.                         24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,
  53.                         22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,
  54.                         10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104 ]
  55.                 }, {
  56.                     name: 'USSR/Russia',
  57.                     data: [null, null, null, null, null, null, null , null , null ,null,
  58.                     5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322,
  59.                     4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,
  60.                     15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049,
  61.                     33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000,
  62.                     35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,
  63.                     21000, 20000, 19000, 18000, 18000, 17000, 16000]
  64.                 }]
  65.             });
  66.            
  67.            
  68.         });

目前这个插件我也还在试用中，日后将结合php，发布一个更详实的教程。

看了下其源代码，的确够牛的，高达4千多行的代码，向此作者致敬！

（如果您喜欢这篇教程，可以通过支付宝打赏我们1元哦，拜谢！）

跟作者说两句

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-? :) :( :!: 8-O 8)

5个座位已被强势霸占！

  1. 深蓝

    这个图表很好

  2. teloon

    Cool~但是太大速度会受影响

  3. Night

    这个不错。。

    最近做项目中正好会用到 统计显示 本身还打算去使用ext呢 这下好了

  4. Pingback: [转]2010年十佳jquery插件

  5. iplaymid

    :-P :-P :-P

同类