WEB前端

详细说明jquery图表插件Highcharts的使用

位置:首页 > WEB前端 > jquery教程,2013-07-25
Highcharts是一个功能非常强大的javascript(基于jquery,但并没有采用jquery插件的形式)图表库,实现的效果非常接近flash的图表效果。点击文件下载官方网站:http://...

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>

初始化插件:


 $(document).ready(function() { 
            var chart = new Highcharts.Chart({ 
                chart: { 
                    renderTo: 'container', 
                    defaultSeriesType: 'area' 
                }, 
                title: { 
                    text: 'US and USSR nuclear stockpiles' 
                }, 
                subtitle: { 
                    text: 'Source: 
http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf'
 
                }, 
                xAxis: { 
                }, 
                yAxis: { 
                    title: { 
                        text: 'Nuclear weapon states' 
                    }, 
                    labels: { 
                        formatter: function() { 
                            return this.value / 1000 +'k'; 
                        } 
                    } 
                }, 
                tooltip: { 
                    formatter: function() { 
                        return this.series.name +' produced <b>'+ 
                            Highcharts.numberFormat(this.y, 0, null, ' ') +'</b><br/>warheads in '+ this.x; 
                    } 
                }, 
                plotOptions: { 
                    area: { 
                        pointStart: 1940, 
                        marker: { 
                            enabled: false, 
                            symbol: 'circle', 
                            radius: 2, 
                            states: { 
                                hover: { 
                                    enabled: true 
                                } 
                            } 
                        } 
                    } 
                }, 
                series: [{ 
                    name: 'USA', 
                    data: [null, null, null, null, null, 6 , 11, 32, 110, 235, 369, 640, 
                        1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126, 
                        27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662, 
                        26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605, 
                        24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586, 
                        22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950, 
                        10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104 ] 
                }, { 
                    name: 'USSR/Russia', 
                    data: [null, null, null, null, null, null, null , null , null ,null, 
                    5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322, 
                    4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478, 
                    15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049, 
                    33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000, 
                    35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000, 
                    21000, 20000, 19000, 18000, 18000, 17000, 16000] 
                }] 
            }); 
            
            
        });


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

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

TAGS:jquery图表插件HighchartsHighcharts使用

猜你喜欢

NewHot