我想在 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)）。
【问题讨论】：
标签： svg highcharts
使用此代码将图表标题垂直居中：
title: {
verticalAlign: 'middle',
floating: true
}
从 2.1 版开始，可以省略 float 属性，因为 documentation 声明它是由 verticalAlign 属性的存在所暗示的
当给定一个值时，标题表现为浮动。
【讨论】：
你需要考虑图表的位置，所以如果你使用'left'和'top'属性，你可以添加一半的绘图宽度并减去一半的文本边界框宽度。这将产生确切的中心：
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。
这个新更新的作用是在图表完成后使用 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));
【讨论】：
var textY = chart.plotTop + ((chart.plotHeight + 18) * 0.5); 现在，如何动态获取标题高度？ jsfiddle.net/64td8
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%
只需添加以下内容。
title: {
text : 'title to display in the middle'
verticalAlign: 'middle',
y: 5
},
【讨论】：
最好的解决方案是依靠系列中心，而不是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));
});
【讨论】：
首先，您可能需要检查小提琴中的 html。
您的容器上的 宽度 是 500 而不是 500px。
<div id="container" style="height: 400px; width: 500px"></div>
其次，这个小提琴有点快和脏，但我认为它完成了你想要的？
【讨论】：
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();
【讨论】：
当有图例并且您将所需的文本设置在图表中心作为标题时，我发现这很有效：
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,
});
},
},
【讨论】：