当前位置： 移动技术网 > IT编程>网页制作>CSS > highcharts实现饼图教程，option配置可点击伸缩变化的方法

highcharts实现饼图教程，option配置可点击伸缩变化的方法

2018年03月07日  | 移动技术网IT编程  | 我要评论

highcharts实现饼图教程，option配置可点击伸缩变化的方法

var chart = null;
$(function () {
    $('#accountReportChart').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
        },
        title: {
            text: '客户分类统计',
            align:'left',
            style:{"color":"#22252A","fontFamilyr":"PingFangSC-Medium","fontSize":"12","fontWeight":"600"}
        },
        legend: {
            align: 'right', //水平方向位置,
//            verticalAlign:'middle',
            layout:'vertical',
//            x:-50,
//            y:30,
            itemStyle:
            	{ "color": "#868BA1", "cursor": "pointer", "fontSize": "12px", "fontFamily": "PingFangSC-Medium","lineHeight":"12px","letterSpacing": "0px" },
//            	"fontFamily": "PingFangSC-Medium","fontSize:"12px","color": "#868BA1",,"letterSpacing": "0px","lineHeight": "12px"
            itemMarginBottom: 9,
            symbolPadding:8,
            symbolRadius:0,
            symbolWidth:10,
            symbolHeight:10,
         },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        tooltip: {
            enabled:false
        },                     
        credits: {  
            enabled: false     //不显示LOGO 
        },
        plotOptions: {
            series:{
             states:{
                 hover:{
                     enabled:false,
                 }
             }
           },
            pie: {
                size:'218',
                 allowPointSelect: true,
                 animation:false,
                 slicedOffset:5,
                 cursor: 'pointer',
                 dataLabels: {
                    enabled: false,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                },
                colors:[
                     '#5B93D3',
                     '#7CBDDF',
                     '#208BC2',
                     '#667489',
                     '#324462',
                     '#384250'
                 ],
                showInLegend: true,
                point: {
                    events: {
                        mouseOver: function(e) {  // 鼠标滑过时动态更新标题
                            // 标题更新函数，API 地址：https://api.hcharts.cn/highcharts#Chart.setTitle
                            var t=e.target.options.name;
                            var b=e.target.options.y;
                            $('#addText').find('.top').html(t)
                            $('#addText').find('.bottom').html(b)
                        }
                        //, 
                        // click: function(e) { // 同样的可以在点击事件里处理
                        //     chart.setTitle({
                        //         text: e.point.name+ '\t'+ e.point.y + ' %'
                        //     });
                        // }
                    }
                },
            }
        },
        series: [{
            type: 'pie',
            innerSize: '65%',
            name: '市场份额',
            data: [
            	{name:name[0],y:value[0]},
           	    {name:name[1],y:value[1]},
	           	{
           	    	name:name[2],
           	    	y:value[2],
           	    	sliced: true,
                    selected: true,
                    click:function(e){
                        console.log(e);
                        var t=e.target.options.name;
                        var b=e.target.options.y


                    },
           	    },
	           	{name:name[3],y:value[3]},
	           	{name:name[4],y:value[4]},
	           	{name:name[5],y:value[5]}
            ]
        }]
    }, 
 function(chart) { // on complete
        var arr=chart.options.series[0].data;
        for(var i=0;i<arr.length;i++){
        	if(arr[i].sliced==true){
        		var t=arr[i].name;
        		var b=arr[i].y;
        	}
        }
        
        var textX = chart.plotLeft + (chart.series[0].center[0]);
        var textY = chart.plotTop  + (chart.series[0].center[1]);


        var span = '<span id="pieChartInfoText" style="display: inline-block;position:absolute;font-family: PingFangSC-Medium;color: #22252A;letter-spacing: 0; text-align:center;font-weight:600;">';
        span += '<span class="top" style="display: inline-block;width: 151px;font-size: 18px;line-height: 18px;">'+t+'</span><br>';
        span += '<span class="bottom" style="font-size: 16px;line-height: 12px;">'+b+'</span>';
        span += '</span>';


        $("#addText").append(span);
        span = $('#pieChartInfoText');
        span.css('left', textX + (span.width() * -0.5)+10);
        span.css('top', textY + (span.height() * -0.5));
    }
    );
    
    $("#accountReportChart").resize(function(){
    	var w= $("#accountReportChart").width();
    	var h= $("#accountReportChart").height();
    	console.log(w,h);
    	$("#accountReportChart").highcharts().setSize(w,h,false);
	})
});

这个highcharts是国外的框架，但是功能很齐全，这个代码实现了监听容器大小变化而重新加载画面

\

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网