如何在 highcharts 中的饼图中动态居中图表标题位置

2023-12-15

我正在做一个响应式饼图,它将标题保留在其中的中心位置。我用过,

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

但它并没有完全集中在图表内。如有任何建议,我们将不胜感激。提前谢谢您。

这是链接:http://jsfiddle.net/LHSey/128/


更好的是删除标题并使用渲染器,它允许添加自定义文本,每次都可以重新定位(当您重新绘制图表时)。您所需要的只是抓住这个事件。

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,
            },
} 

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 highcharts 中的饼图中动态居中图表标题位置 的相关文章

随机推荐