如何动态地中心highcharts饼图里面榜冠军位置 [英] How to center chart title position dynamically inside pie chart in highcharts

问题描述

我在做持有标题里面it.I've使用中心位置的响应饼图，

 标题：{
            文本： ，
            保证金：0，
            Y：0，
            X：0，
            对齐：中心，
            verticalAlign：'中间'，
        }，
 

但它没有完全居中内chart.Any建议将是提前AP preciated.Thank你。<​​/ P>

下面的链接： http://jsfiddle.net/LHSey/128/

解决方案

更​​好的是删除标题，并使用渲染器，允许添加自定义文本，可每次（当你重新绘制图表）被重新定位。只有你所需要的是赶上这个活动。

 函数addTitle（）{

        如果（this.title）{
            this.title.destroy（）;
        }

        变种R = this.renderer，
            X = this.series [0] .center [0] + this.plotLeft，
            Y = this.series [0] .center [1] + this.plotTop;
        this.title = r.text（'系列1'，0，0）
            的.css（{
            颜色：＃4572A7，
            字体：16像素
        }）。隐藏（）
            。加（）;

        VAR BBOX = this.title.getBBox（）;
        this.title.attr（{
            X：X  - （bbox.width / 2），
            Y：ÿ
        }）。显示（）;
    }

图表：{
    事件：{
                    负载：addTitle，
                    重绘：addTitle，
            }，
}
 

例： http://jsfiddle.net/LHSey/129/

I'm doing a responsive pie chart which holds title in centered position inside it.I've used,

title: {
            text: "",
            margin: 0,
            y:0,
            x:0,
            align: 'center',
            verticalAlign: 'middle',
        },

but it's not perfectly centered inside the chart.Any suggestions would be appreciated.Thank you in advance.

Here's the Link : http://jsfiddle.net/LHSey/128/

解决方案

Better is remove title and use renderer which allows to add custom text, which can be repositioned each time (when you redraw chart). Only what you need is catch this event.

function addTitle() {

        if (this.title) {
            this.title.destroy();
        }

        var r = this.renderer,
            x = this.series[0].center[0] + this.plotLeft,
            y = this.series[0].center[1] + this.plotTop;
        this.title = r.text('Series 1', 0, 0)
            .css({
            color: '#4572A7',
            fontSize: '16px'
        }).hide()
            .add();

        var bbox = this.title.getBBox();
        this.title.attr({
            x: x - (bbox.width / 2),
            y: y
        }).show();
    }

chart:{
    events: {
                    load: addTitle,
                    redraw: addTitle,
            },
} 

Example: http://jsfiddle.net/LHSey/129/

这篇关于如何动态地中心highcharts饼图里面榜冠军位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！