将文本放在饼图的中心 - Highcharts [英] Place text in center of pie chart - Highcharts

问题描述

我想在 HighCharts 中的饼图/圆环图中央放置一个标题.

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

我在图表选项中看不到任何可以直接启用此功能的内容，因此我认为它需要使用 Highcharts SVG 渲染器 -- chart.renderer.text('My Text', x, y).

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 -- chart.renderer.text('My Text', x, y).

我已经设置好了，但我无法让文本居中放置在馅饼中.x 和 y 值似乎不接受百分比.有没有一种程序化的方法可以让它在情节中居中，并在容器大小调整中幸存下来?

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?

更新: 将 x 和 y 设置为 50% 可以很好地使圆居中(使用 renderer.circle(x, y, radius))——但不能居中文本(使用 renderer.text(text, x, y)).

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

在此处查看结果:http://jsfiddle.net/supertrue/e2qpa/

推荐答案

需要考虑图表的位置，所以如果使用'left'和'top'属性，可以加一半宽度并减去文本边界框宽度的一半.这将产生精确的中心:

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:

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.

Apparently the bounding box will be 0s unless you add it first.

更正:

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

所以，我最初的想法，这看起来不错，是文本将在左上角对齐，但它是由左下角对齐的.因此，我们实际上需要添加它而不是减去一半的高度.让我困惑的是，我还不明白的是，要获得中心，您只需添加高度的 25%，而不是 50%.注意:这似乎不适用于 IE 7 或 8.

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.

http://jsfiddle.net/NVX3S/2/

<- 适用于所有浏览器的居中文本

<- Centered text that works in all browers

这个新更新的作用是在图表完成后使用 jquery 添加一个新元素.这适用于我测试过的所有浏览器(包括 IE7、8、9、Firefox 和 Chrome).

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).

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 = '<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));

这篇关于将文本放在饼图的中心 - Highcharts的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！