将文本放在饼图中心 - Highcharts

Question

我想在HighCharts的馅饼/甜甜圈图表的中心放置一个标题.

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

我有这个设置,但我不能让文本在馅饼中居中.x和y值似乎不接受百分比.是否有一种程序化的方法让它在情节中居中,并在容器大小调整中存活？

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

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

Answer 1

使用此代码垂直居中图表标题:

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

例

编辑

从版本2.1开始浮动属性可以省略,因为文档声明它存在verticalAlign属性

给定值时,标题表现为浮动.

Answer 2

您需要考虑图表的位置,因此如果使用"左"和"顶部"属性,则可以添加图表宽度的一半并减去文本边界框宽度的一半.这将产生确切的中心:

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.

主要更新

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

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

这个新更新的作用是在图表完成后使用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));

Answer 3

最好的解决方案是依靠系列中心,而不是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));
});

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