Svg 将文本放置在饼图-高图表的中心

我想在HighCharts中的饼图/油炸圈饼图的中心放置一个标题

我在图表选项中看不到任何可以直接启用此功能的内容，因此我认为需要使用Highcharts SVG渲染器--

chart.renderer.text（'My text'，x，y）

我已经设置好了，但是我不能让文本在饼图中居中。x和y值似乎不接受百分比。是否有一种编程方法可以使其在绘图中居中，并在容器大小调整后继续存在

更新：将x和y设置为50%可以使圆居中（使用

渲染器.圆（x，y，半径）

）-但不能使文本居中（使用

渲染器.文本（文本，x，y）

）

---

请参见此处的结果：

首先，您可能需要检查小提琴中的html。 您的

500

容器上有宽度，而不是

500px

<div id="container" style="height: 400px; width: 500px"></div>​

​

第二，这把小提琴有点快又脏，但我认为它能满足你的需要

---

您需要考虑图表的位置，因此如果使用“左”和“顶”属性，您可以增加一半的绘图宽度，减去一半的文本边框宽度。这将产生准确的中心：

text = chart.renderer.text("My Text").add();
textBBox = text.getBBox();
x = chart.plotLeft + (chart.plotWidth  * 0.5) - (textBBox.width  * 0.5);
y = chart.plotTop  + (chart.plotHeight * 0.5) - (textBBox.height * 0.5);
text.attr({x: x, y: y});

显然，除非先添加边界框，否则边界框将为0

更正：

y = chart.plotTop  + (chart.plotHeight * 0.5) + (textBBox.height * 0.25);

所以，我最初的想法，这似乎很好，是文本将由左上角对齐，但它是由左下角代替。因此，我们实际上需要加上它，而不是减去一半的高度。让我困惑的是，我还不明白的是，为了得到中心，你只增加了高度的25%，而不是50%。注意：这在IE 7或8上似乎不起作用

重大更新

---

使用此代码垂直居中放置图表标题：

title: {
    verticalAlign: 'middle',
    floating: true
}

编辑 由于版本2.1，浮动属性可以省略，因为存在垂直对齐属性

---

当给定值时，标题表现为浮动。

最佳解决方案是依靠序列中心，而不是

plotHeight

或

plotWidth

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'pie'
    },
    plotOptions: {
        pie: {
            //innerSize: '60%'
        }
    },
    title: {
        text: ''
    },
    series: [{
        data: [
            ['Firefox', 2262],
            ['IE7', 3800],
            ['IE6', 1000],
            ['Chrome', 1986]
            ]}]
},

function(chart) { // on complete
    var textX = chart.plotLeft + (chart.series[0].center[0]);
    var textY = chart.plotTop  + (chart.series[0].center[1]);

    var span = '<span id="pieChartInfoText" style="position:absolute; text-align:center;">';
    span += '<span style="font-size: 32px">Upper</span><br>';
    span += '<span style="font-size: 16px">Lower</span>';
    span += '</span>';

    $("#addText").append(span);
    span = $('#pieChartInfoText');
    span.css('left', textX + (span.width() * -0.5));
    span.css('top', textY + (span.height() * -0.5));
});

var图表=新的Highcharts.图表({
图表：{
renderTo:'容器'，
键入：“馅饼”
},
打印选项：{
馅饼：{
//内部尺寸：“60%”
}
},
标题：{
文本：“”
},
系列：[{
数据：[
['Firefox'，2262]，
[IE7'，3800]，
[IE6'，1000]，
['Chrome'，1986]
]}]
},
函数（图表）{//已完成
var textX=chart.plotLeft+（chart.series[0].center[0]）；
var textY=chart.plotTop+（chart.series[0].center[1]）；
var span=''；
span+=“上部
”；
span+=‘较低’；
span+=''；
$（“#addText”）.append（span）；
span=$（'pieChartInfoText'）；
css（'left'，textX+（span.width（）*-0.5））；
css（'top'，textY+（span.height（）*-0.5））；
});

工作演示：

var newChart=newhighcharts.Chart（选项）；
//不设置数据文本
var textX=newChart.plotLeft+（newChart.plotWidth*0.5）；
var textY=newChart.plotTop+（newChart.plotHeight*0.3）；
var textWidth=500；
textX=textX-（textWidth/2）；
newChart.renderer.label（'Dati non disponibili per questa selezione'，textX，textY，null，null，null，true）
.css({
fontSize:'16px'，
}).add（）；

只需添加以下内容

标题：{
文本：“要显示在中间的标题”
垂直排列：'中间'，
y:5
}，

我发现，如果有图例，并且您将图表中心的文本设置为标题，则此方法有效：

events: {
    load: function() {
        const titleHeight = this.title.getBBox().height;
        this.title.attr({
            y: this.plotHeight / 2 + titleHeight / 2,
        });
    },
    redraw: function() {
        const titleHeight = this.title.getBBox().height;
        this.title.attr({
            y: this.plotHeight / 2 + titleHeight / 2,
        });
    },
},

---

我知道我可以手动定位它，但我要寻找的是一个解决方案，无论容器大小如何，它都将居中放置。我更新了我的小提琴，使它有一个没有流体大小的容器。谢谢，这是非常有用的信息——我不知道plotWidth和plotHeight属性。唯一的问题是它在调整大小时不会重新调整。请参阅（出于某种原因，放置看起来偏离中心。）是否有某种方法可以使用组或基于百分比的定位来实现此功能？因此，进一步观察，显然，除非先添加边界框，否则边界框将为0。我更新了上面的示例。更不幸的是，我发现了如何将它集中在chrome上，但这在IE7或IE8上不起作用。我编辑了您的示例以演示：非常好，谢谢。一个小小的警告是，标题的高度似乎稍微偏离了垂直位置（我在跨度顶部和图表圆圈之间测量60px，在底部测量80px）。将标题高度（大约18px）添加到plotHeight似乎可以修复它

var textY=chart.plotTop+（（chart.plotHeight+18）*0.5）什么让我困惑，我还不明白，如果要获得中心，您只需添加25%的高度，而不是50%

我还添加了一些css来格式化它：。highcharts title{font size:38px！important；}这应该是正确的答案，而且如果您同时需要标题和中心文本，请使用中心文本的subtitle选项非常好的答案。当我将它用于底部带有启用图例的饼图时，我发现我还必须添加y:-10.Exellent！！最简单的解决方案。这应该是选定的答案，而不是johnstorm的答案s@LachlanMcD. 您在图表中找到了任何带有图例的解决方案吗？这是一个非常可靠的解决方案。请解释您的代码以及它如何解决OP的问题。阅读我不明白为什么Highcharts不支持这个案例。

var newChart = new Highcharts.Chart(options);

//Set No data text
var textX = newChart.plotLeft + (newChart.plotWidth * 0.5);
var textY = newChart.plotTop + (newChart.plotHeight * 0.3);
var textWidth = 500;
textX = textX - (textWidth / 2);

newChart.renderer.label('<div style="width: ' + textWidth + 'px; text-align: center"><span>Dati non disponibili per questa selezione</span></div>', textX, textY, null, null, null, true)
        .css({
            fontSize: '16px',
        }).add();

events: {
    load: function() {
        const titleHeight = this.title.getBBox().height;
        this.title.attr({
            y: this.plotHeight / 2 + titleHeight / 2,
        });
    },
    redraw: function() {
        const titleHeight = this.title.getBBox().height;
        this.title.attr({
            y: this.plotHeight / 2 + titleHeight / 2,
        });
    },
},