将文本放置在饼状图的中心。

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

我在图表选项中没有看到任何直接启用这个的选项，所以我认为它需要使用Highcharts SVG渲染器——chart.renderer。文本(“文本”,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值来说，百分比似乎不被接受。是否有一种编程方式将它集中在情节中，并在容器调整中生存?

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

更新:将x和y设置为50%，以使中心为圆形(使用渲染器)。圆圈(x, y，半径))-但不是中心文本(使用渲染器。文本(文字,x,y))。

See result here: http://jsfiddle.net/supertrue/e2qpa/

看到结果:http://jsfiddle.net/supertrue/e2qpa/

5 个解决方案

#1

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});

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

显然，除非你先把它加进去，否则这个边界框将是0。

Correction:

更正:

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

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.

所以，我最初的想法，这看起来很好，是文本会被左上方对齐，但是它是由左下角来做的。因此，我们实际上需要添加它，而不是减去一半的高度。让我困惑的是，我还不明白的是，要得到中心，你只增加了25%的高度，而不是50%。注意:这似乎并不适用于IE 7或8。

MAJOR UPDATE

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

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

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

这个新更新所做的是在图表完成后使用jquery添加一个新元素。这在我测试过的所有浏览器中都有效(包括IE7、8、9、Firefox和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));

#2

Use this code to center chart title vertically:

将此代码垂直地用于中心图表标题:

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

Example

例子

Edit

Since version 2.1 The floating property can be omitted as the documentation states it is implied by the presence of the verticalAlign property

由于版本2.1，浮动属性可以省略，因为文档说明了它是由垂直属性的存在所暗示的。

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

当给定一个值时，标题的行为是浮动的。

#3

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

最好的解决方案是依赖于序列中心，而不是plotight或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));
});

Working demo: http://jsfiddle.net/4dL9S/

工作演示:http://jsfiddle.net/4dL9S/

#4

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

首先，您可能需要检查您的小提琴中的html。你的容器上的宽度是500，而不是500px。

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

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

第二，这个小提琴有点快又脏，但我认为它能达到你想要的效果?

http://jsfiddle.net/e2qpa/3/

http://jsfiddle.net/e2qpa/3/

#5

        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();