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
}

Example

Donut chart with title in the center

修改

从2.1版开始浮动属性可以省略，因为documentation状态是由于存在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/

＆lt; - 适用于所有浏览器的中心文字

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

Answer 4

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

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

其次，这个小提琴有点快速和肮脏，但我认为它完成了你想要的东西？

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

Answer 5

只需添加以下内容即可。

title: { text : 'title to display in the middle' verticalAlign: 'middle', y: 5 },

Answer 6

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

Answer 7

我发现当有图例并将您希望在图表中心的文本设置为标题时，此方法有效：

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

将文本放在饼图中心 - Highcharts

7 个答案:

修改

主要更新