blocks|key|1031697|text|首先，您可能需要检查小提琴中的html。在容器中有一个500宽度，而不是500px。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|CODE|entityRanges|data|1031698|<div+id="container"+style="height:+400px;+width:+500px"></div>​|code-block|syntax|javascript|1031699|第二，这把小提琴有点快又脏，但我认为它能实现你想要的？|1031700|http://jsfiddle.net/e2qpa/3/|1031701|entityMap|0|LINK|mutability|MUTABLE|url^0|L|B|R|3|10|5|0|0|0|0|S|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|D]|$9|11|A|12|B|D]]|E|@]|F|$]]|$1|G|3|H|5|I|7|13|8|@]|E|@]|F|$J|K]]|$1|L|3|M|5|6|7|14|8|@]|E|@]|F|$]]|$1|N|3|O|5|6|7|15|8|@]|E|@$9|16|A|17|1|18]]|F|$]]|$1|P|3|-4|5|6|7|19|8|@]|E|@]|F|$]]]|Q|$R|$5|S|T|U|F|$V|O]]]]

First, you may want to check the html in your fiddle. 
You had a width on your container of <code>500</code> instead of <code>500px</code>.

<pre><code>&lt;div id="container" style="height: 400px; width: 500px"&gt;&lt;/div&gt;​
</code></pre>

Second, this fiddle is a bit quick and dirty, but I think it accomplishes what you wanted?

<a href="http://jsfiddle.net/e2qpa/3/" rel="nofollow">http://jsfiddle.net/e2qpa/3/</a>

blocks|key|2000490|text|你需要考虑到图表的位置，所以如果你使用“左”和“顶”属性，你可以添加一半的绘图宽度，减去一半的文本边框宽度。这将产生精确的中心：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2000491|text+=+chart.renderer.text("My+Text").add();
textBBox+=+text.getBBox();
x+=+chart.plotLeft+%2B+(chart.plotWidth++*+0.5)+-+(textBBox.width++*+0.5);
y+=+chart.plotTop++%2B+(chart.plotHeight+*+0.5)+-+(textBBox.height+*+0.5);
text.attr({x:+x,+y:+y});|code-block|syntax|javascript|2000492|显然，除非你先把它加进去，否则包围框将是0。|2000493|更正：|2000494|y+=+chart.plotTop++%2B+(chart.plotHeight+*+0.5)+%2B+(textBBox.height+*+0.25);|2000495|因此，我最初的想法，这似乎很好，是文本将由左上角对齐，然而它是由左下角来完成的。因此，我们不需要减去一半的高度，我们实际上需要添加它。让我困惑的是，我还不明白的是，要得到中心，你只需要增加25%25的高度，而不是50%25。注:这似乎不适用于IE+7或8。|2000496|重大更新|2000497|http://jsfiddle.net/NVX3S/2/|offset|length|2000498|在所有浏览器中工作的以<-心为中心的文本|2000499|这个新的更新是在图表完成后使用jquery添加一个新元素。这在我测试过的所有浏览器(包括IE7，8，9，火狐和Chrome)中都有效。|2000500|var+textX+=+chart.plotLeft+%2B+(chart.plotWidth++*+0.5);
var+textY+=+chart.plotTop++%2B+(chart.plotHeight+*+0.5);

//+The+width+and+height+need+to+be+calculated+properly,+so+I+made+it+a+span.
var+span+=+'<span+id="pieChartInfoText"+style="position:absolute;+text-align:center;">';
span+%2B=+'<span+style="font-size:+32px">Upper ';
span+%2B=+'<span+style="font-size:+16px">Lower';
span+%2B=+'';

$("#addText").append(span);
span+=+$('#pieChartInfoText');
span.css('left',+textX+%2B+(span.width()+*+-0.5));
span.css('top',+textY+%2B+(span.height()+*+-0.5));|2000501|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|0|0|0|0|S|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|17|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|18|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|19|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|1A|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|1B|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|1C|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1D|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1E|8|@]|9|@$S|1F|T|1G|1|1H]]|A|$]]|$1|U|3|V|5|6|7|1I|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1J|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|D|7|1K|8|@]|9|@]|A|$E|F]]|$1|10|3|-4|5|6|7|1L|8|@]|9|@]|A|$]]]|11|$12|$5|13|14|15|A|$16|R]]]]

You need to take into account the location of the chart, so if you use the 'left' and 'top' attributes, you can add on half the width of the plot and subtract half the width of your text bounding box. This would yield the exact center:
<pre><code>text = chart.renderer.text(&quot;My Text&quot;).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});
</code></pre>
Apparently the bounding box will be 0s unless you add it first.
Correction:
<pre><code>y = chart.plotTop + (chart.plotHeight * 0.5) + (textBBox.height * 0.25);
</code></pre>
So, my original thought, and this seemed fine, was that the text would be aligned by the upper left, however it is done by the bottom left instead. Thus, instead of subtracting half the height, we actually need to add it. What confuses me, and something I don't understand yet, is that to get the center you add only 25% of the height rather then 50%. Note: This does not appear to work on IE 7 or 8.
<h2>MAJOR UPDATE</h2>
<a href="http://jsfiddle.net/NVX3S/2/" rel="noreferrer">http://jsfiddle.net/NVX3S/2/</a>
&lt;- Centered text that works in all browers
What this new update does is it adds a new element using jquery after the chart is done. This works in all browers that I have tested (including IE7, 8, 9, Firefox and Chrome).
<pre><code>var textX = chart.plotLeft + (chart.plotWidth * 0.5);
var textY = chart.plotTop + (chart.plotHeight * 0.5);

// The width and height need to be calculated properly, so I made it a span.
var span = '&lt;span id=&quot;pieChartInfoText&quot; style=&quot;position:absolute; text-align:center;&quot;&gt;';
span += '&lt;span style=&quot;font-size: 32px&quot;&gt;Upper&lt;/span&gt;&lt;br&gt;';
span += '&lt;span style=&quot;font-size: 16px&quot;&gt;Lower&lt;/span&gt;';
span += '&lt;/span&gt;';

$(&quot;#addText&quot;).append(span);
span = $('#pieChartInfoText');
span.css('left', textX + (span.width() * -0.5));
span.css('top', textY + (span.height() * -0.5));
</code></pre>

blocks|key|1031759|text|使用此代码垂直居中图表标题：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1031760|title:+{
++++verticalAlign:+'middle',
++++floating:+true
}|code-block|syntax|javascript|1031761|Example|offset|length|1031762|​|1031763|📷|atomic|1031764|1031765|编辑|1031766|因为Version2.1可以省略浮动属性，因为documentation声明了verticalAlign属性的存在意味着它的存在|1031767|当给定一个值时，标题表现为浮动。|1031768|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/pDdcd/|1|IMAGE|IMMUTABLE|imageUrl|https://developer.qcloudimg.com/http-save/yehe-900000/e201d0a0b6cdf1c1c2464bd4d3f9fd0f.png|imageAlt|2|http://api.highcharts.com/highcharts#title.verticalAlign^0|0|0|0|7|0|0|0|0|1|1|0|0|0|N|D|2|0|0^^$0|@$1|2|3|4|5|6|7|1C|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|1D|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|1E|8|@]|9|@$I|1F|J|1G|1|1H]]|A|$]]|$1|K|3|L|5|6|7|1I|8|@]|9|@]|A|$]]|$1|M|3|N|5|O|7|1J|8|@]|9|@$I|1K|J|1L|1|1M]]|A|$]]|$1|P|3|L|5|6|7|1N|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1O|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1P|8|@]|9|@$I|1Q|J|1R|1|1S]]|A|$]]|$1|U|3|V|5|6|7|1T|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|1U|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|13]]|14|$5|15|10|16|A|$17|18|19|-4]]|1A|$5|Z|10|11|A|$12|1B]]]]

Use this code to center chart title vertically:

<pre><code>title: {
 verticalAlign: 'middle',
 floating: true
}
</code></pre>

<a href="http://jsfiddle.net/pDdcd/">Example</a>

<img src="https://i.stack.imgur.com/5WQhS.png" alt="Donut chart with title in the center">

<h2>Edit</h2>

Since version 2.1 The floating property can be omitted as the <a href="http://api.highcharts.com/highcharts#title.verticalAlign">documentation</a> states it is implied by the presence of the verticalAlign property

When a value is given, the title behaves as floating.

blocks|key|1031798|text|最好的解决方案是依赖于系列中心，而不是plotHeight或plotWidth。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1031799|var+chart+=+new+Highcharts.Chart({
++++chart:+{
++++++++renderTo:+'container',
++++++++type:+'pie'
++++},
++++plotOptions:+{
++++++++pie:+{
++++++++++++//innerSize:+'60%25'
++++++++}
++++},
++++title:+{
++++++++text:+''
++++},
++++series:+[{
++++++++data:+[
++++++++++++['Firefox',+2262],
++++++++++++['IE7',+3800],
++++++++++++['IE6',+1000],
++++++++++++['Chrome',+1986]
++++++++++++]}]
},

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

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

++++$("#addText").append(span);
++++span+=+$('#pieChartInfoText');
++++span.css('left',+textX+%2B+(span.width()+*+-0.5));
++++span.css('top',+textY+%2B+(span.height()+*+-0.5));
});|code-block|syntax|javascript|1031800|工作演示：http://jsfiddle.net/4dL9S/|1031801|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/4dL9S/^0|J|A|U|9|0|0|5|Q|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|D|@$9|11|A|12|1|13]]|E|$]]|$1|M|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

The best solution is to rely on series center, instead of <code>plotHeight</code> or <code>plotWidth</code>.

<pre><code>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 = '&lt;span id="pieChartInfoText" style="position:absolute; text-align:center;"&gt;';
 span += '&lt;span style="font-size: 32px"&gt;Upper&lt;/span&gt;&lt;br&gt;';
 span += '&lt;span style="font-size: 16px"&gt;Lower&lt;/span&gt;';
 span += '&lt;/span&gt;';

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

Working demo: <a href="http://jsfiddle.net/4dL9S/">http://jsfiddle.net/4dL9S/</a>

blocks|key|1031810|text|var+newChart+=+new+Highcharts.Chart(options);

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

newChart.renderer.label('<div+style="width:+'+%2B+textWidth+%2B+'px;+text-align:+center">Dati+non+disponibili+per+questa+selezione</div>',+textX,+textY,+null,+null,+null,+true)
++++++++.css({
++++++++++++fontSize:+'16px',
++++++++}).add();|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1031811|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>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('&lt;div style="width: ' + textWidth + 'px; text-align: center"&gt;&lt;span&gt;Dati non disponibili per questa selezione&lt;/span&gt;&lt;/div&gt;', textX, textY, null, null, null, true)
 .css({
 fontSize: '16px',
 }).add();
</code></pre>

blocks|key|2000536|text|只需添加以下内容。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2000537|title:+{+++++text+:+'title+to+display+in+the+middle'+++++verticalAlign:+'middle',+++++y:+5+},|offset|length|style|CODE|2000538|entityMap^0|0|0|2L|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

Just add the following.

<code>title: {
 text : 'title to display in the middle'
 verticalAlign: 'middle',
 y: 5
},</code>

blocks|key|1002840|text|当有一个图例时，我发现这是有效的，并将您想要在图表中心的文本设置为标题：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1002841|events:+{
++++load:+function()+{
++++++++const+titleHeight+=+this.title.getBBox().height;
++++++++this.title.attr({
++++++++++++y:+this.plotHeight+/+2+%2B+titleHeight+/+2,
++++++++});
++++},
++++redraw:+function()+{
++++++++const+titleHeight+=+this.title.getBBox().height;
++++++++this.title.attr({
++++++++++++y:+this.plotHeight+/+2+%2B+titleHeight+/+2,
++++++++});
++++},
},|code-block|syntax|javascript|1002842|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I found this works when there is a legend and you set the text you want in the centre of the chart as the title:

<pre><code>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,
 });
 },
},
</code></pre>

I would like to place a title in the center of a pie/donut chart in HighCharts.

I don't see anything in the chart options that would directly enable this, so I'm thinking it requires using the Highcharts SVG renderer -- <code>chart.renderer.text('My Text', x, y)</code>.

I have that set up but I can't get the text to be centered inside the pie. Percentages don't seem to be accepted for x and y values. Is there a programmatic way to get it centered inside the plot, and to survive container resizing?

Update: Setting x and y to 50% works fine to center a circle (using <code>renderer.circle(x, y, radius)</code>)—but not to center text (using <code>renderer.text(text, x, y)</code>).

See result here: <a href="http://jsfiddle.net/supertrue/e2qpa/" rel="noreferrer">http://jsfiddle.net/supertrue/e2qpa/</a>

Place text in center of pie chart - Highcharts

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我想在HighCharts的饼/甜甜圈图中间放一个标题。我在图表选项中没有看到任何可以直接启用此功能的选项，因此我认为它需要使用高图表SVG呈现器-- chart.renderer.text('My Text', x, y)。我已经设置好了，但我无法让文本在饼内居中。对于x和y值，百分比似乎不被接受。是否有一种编程的方...

问将文本放置在饼形图的中心-高图
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将文本放置在饼形图的中心-高图EN