将文本放置在饼形图的中心-高图
我想在HighCharts的饼/甜甜圈图中间放一个标题。
我在图表选项中没有看到任何可以直接启用此功能的选项，因此我认为它需要使用高图表SVG呈现器-- chart.renderer.text('My Text', x, y)。
我已经设置好了，但我无法让文本在饼内居中。对于x和y值，百分比似乎不被接受。是否有一种编程的方法来使它在地块中居中，并在容器大小调整中生存下来？
更新:将x和y设置为50%可以很好地将圆心(使用renderer.circle(x, y, radius))、-but(而不是以文本为中心)(使用renderer.text(text, x, y))。
见这里的结果：http://jsfiddle.net/supertrue/e2qpa/
回答 7
Stack Overflow用户
发布于 2012-03-19 21:53:06
你需要考虑到图表的位置，所以如果你使用“左”和“顶”属性，你可以添加一半的绘图宽度，减去一半的文本边框宽度。这将产生精确的中心：
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，火狐和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));Stack Overflow用户
发布于 2013-04-12 06:51:29
使用此代码垂直居中图表标题：
title: {
verticalAlign: 'middle',
floating: true
}Example
编辑
因为Version2.1可以省略浮动属性，因为documentation声明了verticalAlign属性的存在意味着它的存在
当给定一个值时，标题表现为浮动。
Stack Overflow用户
发布于 2014-02-24 13:04:16
最好的解决方案是依赖于系列中心，而不是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/
https://stackoverflow.com/questions/9732205
复制相似问题
腾讯云开发者
