• 使用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属性控制它的颜色

  • 相关阅读:
    docker容器使用不同IP
    java相关问题
    centos编译安装php7.4
    家庭服务器搭建并提供公网Http服务
    如何调试Vue3源码?
    《挖坑系列》—前言
    Dubbo 入门
    wordpress自定义菜单函数wp_nav_menu不输出li标签或删除li标签
    git学习记录2
    win10 安装IIS时报错,灾难性错误,错误代码:0x8000FFFF
  • 原文地址:https://www.cnblogs.com/wubh/p/2649139.html
Copyright © 2020-2023  润新知