zoukankan      html  css  js  c++  java
  • 使用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属性控制它的颜色

  • 相关阅读:
    七、Vue Cli+ApiCloud
    六、取消eslint 校验代码
    六、匿名方法
    五、vue中export和export default的使用
    四、Vue CLI-异步请求(axios)
    接口自动化测试(7)
    selenium 封装
    flask 动手写的接口平台
    flask入门篇
    python 自动化接口测试(6)
  • 原文地址:https://www.cnblogs.com/wubh/p/2649139.html
Copyright © 2011-2022 走看看