每当调整绘图区域大小时,数据标签应该处于适当的距离

时间:2015-07-30 04:26:17

标签: jquery highcharts

我在一个小区域有三张饼图。该区域可以调整大小。所以每当我调整大小时,我都希望我的数据标签位于馅饼的中心位置。已经给出了重绘的东西,但它会引发错误。如何解决它

这里是代码:

$(selector).find('.graph').highcharts({
        chart: {
            type: 'pie',
             labelsEnabled: false,
            autoMargins: false,
            marginTop: 0,
                marginBottom: -6,
                marginLeft: 0,
                marginRight: 0,
                pullOutRadius: 0,
                            events: {
            load: function(e) {
                console.log(this);
                //if($(selector).parents('.portlet_body').height()<=200)
                this.options.plotOptions.series.dataLabels.distance =  ((this.chartHeight+this.chartWidth) / 7.5) * -1;
                this.series[0].update(this.options);
            },
            redraw: function(e) {
             console.log(this); 
                this.options.plotOptions.pie.dataLabels.distance =  (this.chartHeight / 3.5) * -1;
                this.series[0].update(this.options);             
            }
    },

        },
        colors : ['#e8eff0',color],
        title: {
            text: ''
        },
        tooltip: {
            enabled: false
        },
        legend: {
            enabled:false,

        },
        plotOptions: {
            series: {
                dataLabels: {
                    align : 'center',
                    enabled: true,
                    useHTML: true,
                    connectorWidth: 0,
                    formatter: function () {
                         var ff = '';
                        this.x

                        if(this.point.name=="Emails Opened")
                            ff =    '<div class="text-center"><span style="color:'+this.point.color+'"><b>'+Math.round(this.point.percentage).toString()+'%</b></span></div>';

                        if(this.point.name=="Emails Clicked")
                            ff =    '<div class="text-center"><span style="color:'+this.point.color+'"><b>'+Math.round(this.point.percentage).toString()+'%</b></span></div>';
                        if(this.point.name=="Emails Unsubscribed")
                            ff =    '<div class="text-center"><span style="color:'+this.point.color+'"><b>'+Math.round(this.point.percentage).toString()+'%</b></span></div>';

                        return ff; 

                    },
                    /*format: '<b>{point.name}</b>: {point.percentage:.1f}',*/
                    distance: 0,
                },
                borderWidth : 0,
                states: {
                    hover: {
                        enabled: false
                    }
                }
            },
            pie: {
                borderWidth: 0,
                    : '100%',
            },
                showInLegend: true,
                enableMouseTracking: false,
                point: {
                    events: {
                        legendItemClick: function () {
                            return false;
                        }
                    }
                }
            },
        series: [{
           // name: 'Deal',
            data: data
        }],
        exporting: {
            enabled: false
        }
    });
});

0 个答案:

没有答案