How to center chart title position dynamically ins

问题:

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/

回答1:

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/

回答2:

We can customize any properties of title using chart.setTitle() as shown below.I've added a title and set useHTML property to true.

chart: {
            events: {
                    load: function () {
                        this.setTitle({text: 'Title',useHTML:true});
                    } 
            }
    }