使用highcharts画图

<script type="text/javascript" src="Scripts/jquery-1.7.min.js"></script>
<script type="text/javascript" src="Scripts/highcharts/highcharts.js"></script>

<script type="text/javascript" src="Scripts/highcharts/themes/grid.js"></script>

 

        //renderTo    要显示的ID

        //title_text  标题

        //subtitle    副标题

        //yAxis_text  Y轴文字

        //tip_text    提示文字

        //series_name 分组的名称

        //series_data 数据

        function drawColumn(renderTo, title_text, subtitle, yAxis_text,tip_text,series_name, series_data) {

            $(document).ready(function () {

                chart = new Highcharts.Chart({

                    chart: {

                        renderTo: renderTo,  //放置图表的容器

                        type: 'column'       //图表类型

                    },

                    title: {                //主标题

                        text: title_text

                    },

                    subtitle: {             //副标题

                        text: subtitle

                    },

                    credits: {

                        enabled: false      //禁用名片

                    },

                    exporting: {

                        enabled: false      //禁用导出,打印图片按钮

                    },

                    xAxis: {

                        categories: [

                                '1月',

                                '2月',

                                '3月',

                                '4月',

                                '5月',

                                '6月',

                                '7月',

                                '8月',

                                '9月',

                                '10月',

                                '11月',

                                '12月'

                            ],

                        labels: {

                            //rotation: -45,//控制斜体

                            align: 'right',

                            style: {font: 'normal 10px 宋体'},

                            x:5

                            }

                    },

                    yAxis: {

                        min: 0,

                        title: {

                            text: yAxis_text

                        }

                    },

                    legend: {

                        layout: 'vertical',

                        backgroundColor: '#FFFFFF',

                        align: 'left',

                        verticalAlign: 'top',

                        x: 100,

                        y: 70,

                        floating: true,

                        shadow: true,

                        enabled:false//禁用图例

                    },

                    tooltip: {

                        formatter: function () {

                            return '' + this.x + ': ' + Highcharts.numberFormat(this.y)+tip_text;

                        }

                    },

                    plotOptions: {

                        column: {

                             cursor: 'pointer',

                             //allowPointSelect:true,

                             point: {

                                events: {

                                    click: function() {

                                        //window.open();                                       

                                        tt(this.x+1);//点击柱子跳转URL                                        

                                    }

                                }

                            },

                            pointPadding: 0.2,

                            borderWidth: 0,

                            pointWidth:15    //显示的宽度

                        }

                    },                    

                    series: [{

                        name: series_name,

                        data: series_data,  //逗号不要多余

                        dataLabels:{　　　　　//在柱子的顶部显示值

                            enabled:true,

                            formatter:function(){

                                if(this.y>0){

                                    return Highcharts.numberFormat(this.y);

                                }                                

                            }

                        }

                    }]

                });

            });

        }

    </script>

    <script type="text/javascript">

        function tt(month) {

            window.location.href = "SearchCer.aspx?month=" + month;

        }

    </script>

如果你想对一个柱子使用不同的颜色的话：将series中的 data格式改成这样: [{"color":"red","y":49.9}]，加入一个color属性控制它的颜色