zoukankan      html  css  js  c++  java
  • highchart 图标技术

    1.部分html文件

    <div region="center" style=" 100%; height: 100%;">
                    <table id="t_auclotBlack" style="height: 100%;  100%;"></table>
                </div>
                

    2.js 文件

    function aucLotAgencyDealreport(begin,end,regionFlag,agencyId){
        var xdata = [];
        var aucLotCount=[];//拍品件数
        var aucLotDealCount=[];//成交件数
        var factCount=[];//实际成交数量
        var regretCount=[];//悔拍次数
        var shootnumber=[];//上拍次数
        var sellnumber=[];//变卖次数
        var aucLotDealnumber=[];//拍卖成交次数
        var firstnumber=[];//优先拍卖成交次数
        var sellDealnumber=[];//变卖成交次数
        $.ajax({
            type: 'get',
            dataType: 'json',
            async: false,
            data: {"beginTime":begin,"endTime":end,
                "regionFlag":regionFlag,"agencyId":agencyId},
            url: parent.baseUrl+"report/findAucAgencyDealCount",
            success: function (result) {
                var json=result;
                for(var i=0;i<json.length;i++){
                    xdata.push(json[i].aucagencyName);
                    aucLotCount.push(parseInt(json[i].aucLotCount));
                    aucLotDealCount.push(parseInt(json[i].aucLotDealCount));
                    factCount.push(parseInt(json[i].factCount));
                    regretCount.push(parseInt(json[i].regretCount));
                    shootnumber.push(parseInt(json[i].shootnumber));
                    sellnumber.push(parseInt(json[i].sellnumber));
                    aucLotDealnumber.push(parseInt(json[i].aucLotDealnum_ber));
                    firstnumber.push(parseInt(json[i].firstnumber));
                    sellDealnumber.push(parseInt(json[i].sellDealnumber));
                    
                }
                getHighcharts(xdata,aucLotCount,aucLotDealCount,factCount,regretCount,shootnumber,sellnumber,aucLotDealnumber,firstnumber
                        ,sellDealnumber);
            }    
                
        });
        
        
    }
    
    
    function getHighcharts(xdata,aucLotCount,aucLotDealCount,factCount,regretCount,
            shootnumber,sellnumber,aucLotDealnumber,firstnumber,sellDealnumber){
        var chart =new Highcharts.chart('container', {
            credits: {                                
                enabled: false, //去掉版权信息,就是右下角显示的highchars的网站链接 也可以显示成自己的链接,具体请搜索api
            },
            chart: {
                type: 'column'
            },
            title: {
                text: '<span style="font-size:24px;font-weight:bolder;color:Black;">司法机构上拍统计</span>',
            },
            subtitle: {
                text: '上拍统计'
            },
          
            legend: {
                align: 'right',
                verticalAlign: 'middle',
                layout: 'vertical'
            },
            tooltip:{
                valueSuffix: '数量',
                formatter:function(){
                    return '<b>'+this.series.name+'</b>:'+this.y;
                }//,this.x Highcharts.dateFormat("%Y年%m月%e日")+this.x+'<br>'+
            },
            xAxis: {
                type:'date',
                categories:xdata,
                //gridLineWidth: 5,
                dateTimeLabelFormats:{
                     year: '%Y',
                     month: '%b  %y',
                     day: '%e. %b'
                 },
            },
            yAxis: {
                allowDecimals: false,
                title: {
                    text: '数量'
                }
            },
            plotOptions: {
                series: {
                    //pointPadding:0.2,
                    groupPadding:0.2
                },
                column: {
                    pointWidth:15
                }
            },
            series: [{
                name: '拍品件数',
                data: aucLotCount
            }, {
                name: '成交件数',
                data: aucLotDealCount
            }, {
                name: '实际成交数量',
                data: factCount
            }, {
                name: '悔拍件数',
                data: regretCount
            }, {
                name: '上拍次数',
                data: shootnumber
            }, {
                name: '变卖次数',
                data: sellnumber
            }, {
                name: '拍卖成交次数',
                data: aucLotDealnumber
            }, {
                name: '优先拍卖成交次数',
                data: firstnumber
            }, {
                name: '变卖成交次数',
                data: sellDealnumber
            }],
            responsive: {
                
                rules: [{
                    condition: {
                        maxWidth: 500
                    },
                    chartOptions: {
                        legend: {
                            align: 'center',
                            verticalAlign: 'bottom',
                            layout: 'horizontal'
                        },
                        yAxis: {
                            labels: {
                                align: 'left',
                                x: 0,
                                y: -5
                            },
                            title: {
                                text: null
                            }
                        },
                        subtitle: {
                            text: null
                        },
                        credits: {
                            enabled: false
                        }
                    }
                }]
            }
        });
    }

    3.效果图

  • 相关阅读:
    2014-写给明年现在的自己
    DDD 领域驱动设计-Value Object(值对象)如何使用 EF 进行正确映射
    DDD 领域驱动设计-在动手之前,先把你的脑袋清理干净
    醍醐灌顶:领域驱动设计实现之路
    拨乱反正:DDD 回归具体的业务场景,Domain Model 再再重新设计
    设计窘境:来自 Repository 的一丝线索,Domain Model 再重新设计
    No zuo no die:DDD 应对具体业务场景,Domain Model 重新设计
    拨开迷雾,找回自我:DDD 应对具体业务场景,Domain Model 到底如何设计?
    【记录】GitHub/TortoiseGit 修改邮箱/提交者
    死去活来,而不变质:Domain Model(领域模型) 和 EntityFramework 如何正确进行对象关系映射?
  • 原文地址:https://www.cnblogs.com/mr-wuxiansheng/p/6395756.html
Copyright © 2011-2022 走看看