1
回答
highcharts 重画时怎么消除图片由小到大的过程。看上去像是在原图上调整数据一样
注册华为云得mate10,2.9折抢先购!>>>   
<!DOCTYPE HTML>  
<html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
        <title>画饼图Highcharts Pie Demo</title>  
        <style>  
            ul,li{margin:0;padding:0;list-style:none}  
            ul{width:400px;border:1px solid #e5e5e5;overflow:hidden}  
            li{float:left;width:400px;line-height:25px;font-size:14px;padding:3px 10px}  
            li.selected{background:#e5e5e5}  
            p{margin:10px 0 0;font-size:14px;line-height:25px;}  
            #container{width: 450px; height: 250px;background:#f5f2ec;padding:10px}  
            .optbox{font-size:14px;padding-top:10px;}  
            input[type="text"]{width:20px}  
        </style>  
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>  
<script src="http://code.highcharts.com/highcharts.js"></script>  
<script src="http://code.highcharts.com/modules/exporting.js"></script>  
    </head>  
<body>  
<div id="container"></div>  
<p>当前选中的分类:</p>  
<ul>  
    <li class="type1">有帮助的人</li>  
    <li class="type2">同行</li>  
    <li class="type3">有趣的人</li>  
    <li class="type4">其他</li>  
</ul>  
<p>你也可以重画图形:</p>  
<div class="optbox">有帮助的人:<input type="text" value="20" id="num1"/>%, 同行:<input type="text" value="13" id="num2"/>%,有趣的人:<input type="text" value="30" id="num3"/>%,其他:<span id="num4">37</span>%<input type="button" value="重画" onclick="redrawchart()"/></div>  
</body>  
</html>  

<script type="text/javascript">  
    var chart1=null;  
    var dataArray= [  
                        ['有帮助的人',26.5],  
                        [ '同行', 25.5],  
                        [ '有趣的人',40],  
            [ '其他',8]  
                ];  
$(function () {  
    $(document).ready(function() {  
        chart1 = new Highcharts.Chart({  
            colors:['#46cbee', '#fec157', '#e57244', '#cfd17d', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'] ,//不同组数据的显示背景色,循环引用  
            chart: {  
                renderTo: 'container',//画布所在的div id  
                plotBackgroundColor: '#f5f2ec',//画布背景色  
                plotBorderWidth: null,//画布边框  
                plotShadow: false,  
                margin:[0,0,0,0]//画布外边框  
            },  
            title: {  
                text: ''//画布题目,此处置空  
            },  
            tooltip: {  
                enabled:false,//去掉浮动提示框  
                shared:true  
            },  
            plotOptions: {  
                pie: {  
                    allowPointSelect: true,  
                    cursor: 'pointer',  
                    size:'90%',  
                    dataLabels: {  
                        enabled: true,  
                        color: '#666666',  
                        connectorWidth: 0,  
                        distance: 3,  
                        connectorColor: '#666666',  
                        style:{fontSize:'12px',fontWeight:'normal'},  
                        formatter: function() {  
                            return  this.point.name+ this.percentage +' %';  
                        }  
                    },  
                      
                    events: {  
                      
                        click: function(e) {  
                            //有需要时可写事件代码  
                        },  
                        mouseOver:function(){  
                            //有需要时可写事件代码  
                        },  
                                                mouseOut:function(){  
                                                       //有需要时可写事件代码  
                                               }  
                                        },  
                    point: {  
                        events: {  
                        click: function(e) {  
                            this.slice(false);  
                            if ( e && e.stopPropagation )//禁止事件冒泡  
                                e.stopPropagation();   
                            else  
                                window.event.cancelBubble = true;  
                            return false;  
                                                },  
                        mouseOver: function(evt){  
                                this.slice(false);//禁止选中扇形滑开  
                                $('li').removeClass('selected');  
                                switch (this.name)  
                                {  
                                case '有帮助的人':  
                                $('.type1').toggleClass("selected");  
                                break;  
                                case '同行':  
                                $('.type2').toggleClass("selected");  
                                break;  
                                case '有趣的人':  
                                $('.type3').toggleClass("selected");  
                                break;  
                                case '其他':  
                                $('.type4').toggleClass("selected");  
                                }  
                        },  
                        mouseOut: function(evt){  
                                //有需要时可写事件代码  
                        }  
                    }  
                }  
                }  
            },  
            exporting: {    
                buttons: {    
                    exportButton: {    
                        enabled:false //不显示导出icon   
                    },    
                    printButton: {    
                        enabled:false //不显示打印icon  
                    }    
                }    
            },  
            credits:{  
                enabled:false//不显示highcharts网址  
            },  
            series: [{  
                type: 'pie',  
                name: '有关联系人分类',  
                data: dataArray  
            }]  
        });  
    });  
     
   $('input[type="text"]').blur(function(){  
            $('#num4').html(100-parseInt($('#num1').val())-parseInt($('#num2').val())-parseInt($('#num3').val()));  
  
        var num4=100-parseInt($('#num1').val())-parseInt($('#num2').val())-parseInt($('#num3').val());  
        if(num4<0){  
            alert('各分类数字加总不得大于100');  
        }  
   });  
   $('input[type="text"]').keyup(function(){  
        $('#num4').html(100-parseInt($('#num1').val())-parseInt($('#num2').val())-parseInt($('#num3').val()));  
   });  
});  
  
 function redrawchart(){  
        var sumnow=parseInt($('#num1').val())+parseInt($('#num2').val())+parseInt($('#num3').val())+parseInt($('#num4').html());  
        if (sumnow!=100)  
        {  
            alert('请重新调整各分类项,使其和能够等于100');  
            return;  
        }  
        dataArray=[  
            ['有帮助的人',parseInt($('#num1').val())],  
            [ '同行', parseInt($('#num2').val())],  
            [ '有趣的人',parseInt($('#num3').val())],  
            ['其他',parseInt($('#num4').html())]  
        ];  
        this.chart1.series[0].setData(dataArray);  
        this.chart1.series[0].redraw();  
}  
</script>  
举报
丁亚涛
发帖于5年前 1回/1K+阅
顶部