使用highcharts画图

最新推荐文章于 2025-08-22 19:09:26 发布

转载最新推荐文章于 2025-08-22 19:09:26 发布 · 100 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wubh/archive/2012/08/21/2649139.html

文章标签：

#javascript #ViewUI

本文介绍如何使用Highcharts库绘制柱状图，并提供了详细的配置参数说明。包括图表样式设置、数据展示方式及交互功能实现等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>