HighChart

 图形展示，往往比数据来的更直观，更耐看。而在众多的图形插件中，Hightcharts算是一个非常不错的插件，支持非常多的种类，比如柱形图，饼图，折线趋势图，二维三维等等，详细内容查看官网是http://www.highcharts.com/

 

还是看个入门的例子吧，

 function chart1(){  

        $('#container').highcharts({  

            chart: {  

                type: 'bar'  

            },  

            title: {  

                text: 'Fruit Consumption'  

            },  

            xAxis: {  

                categories: ['Apples', 'Bananas', 'Oranges']  

            },  

            yAxis: {  

                title: {  

                    text: 'Fruit eaten'  

                }  

            },  

            series: [{  

                name: 'Jane',  

                data: [1, 0, 4]  

            }, {  

                name: 'John',  

                data: [5, 7, 3]  

            }]  

        });  

    }  

      

   

      

      

    function chart3(){  

        var option = new Object();  

        option.chart = new Object();  

        option.chart.type="bar";  

        option.chart.renderTo="container";  

          

        option.title={title:"水果的摄入"};  

          

        option.xAxis={categories:['苹果','香蕉','桔子'],gridLineWidth:1};  

        option.yAxis={title:{text:"吃水果的量"},tickInterval:1};  

          

        option.series = new Array();  

        option.series[0] = new Object();  

        option.series[0].name="张三";  

        option.series[0].data=[1,3,5];  

          

        option.series[1] = new Object();  

        option.series[1].name="李四";  

        option.series[1].data=[6,1,5.5];  

          

        option.series[2] = new Object();  

        option.series[2].name="刘能";  

        option.series[2].data=[3,1,0.3];  

          

        var chart = new Highcharts.Chart(option);  

    }  

    $(function () {   

        chart1();  

        //chart3();  

    });

    

    $(function () {

   $('#container1').highcharts({

       chart: {

           type: 'area'

       },

       title: {

           text: 'Area chart with negative values'

       },

       xAxis: {

           categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']

       },

       credits: {

           enabled: false

       },

       series: [{

           name: 'John',

           data: [5, 3, 4, 7, 2]

       }, {

           name: 'Jane',

           data: [2, -2, -3, 2, 1]

       }, {

           name: 'Joe',

           data: [3, 4, 4, -2, 5]

       }]

   });

});

 

放置在浏览器中即可看到效果，需要说明的是highchart一些图形是使用JQuery的，所以对浏览器的支持还是不错的，当然，js引入的时候要注意顺序！！！