如何修改谷歌饼图pieSliceText的定位答案

【问题标题】：How to modify Google's PieChart pieSliceText positioning如何修改谷歌饼图pieSliceText的定位
【发布时间】：2016-04-14 17:38:12
【问题描述】：

我的 Google PieChart pieSliceText 位置有问题。它重叠在页面上，而不是完全重叠在 PieChart 本身上。

请看这张截图照片：

我什至把字体调小了很多，但同样的问题：

由于数据值和百分比的波动，我想避免调整 'pieStartAngle' 属性，因为我认为它看起来很傻。

有没有办法将“男性”的标签移动到饼图上，而不是在“无人区”中重叠？我希望这很容易（就像使用 Google 条形图一样），但事实并非如此。

这是我的图表选项的样子：

var colors = ["#B5ACCE", "#61B036"]; //green and purple colors

var data = google.visualization.arrayToDataTable([
    ['Type',     'Count'],
    ['Male',      parseInt(_maleEnrollment)],
    ['Female',    parseInt(_femaleEnrollment)]
]);

//chart options 
var chartOptions = { 
     title: 'Gender' 
    ,pieSliceText: 'label' 
    ,pieSliceTextStyle: { color: 'black', fontName: 'Arial', fontSize: 20 } 
    ,colors: colors 
    ,backgroundColor: 'transparent' 
    ,legend: { textStyle: { color: 'black', fontName: 'Arial', fontSize: 14 } } 
    ,chartArea: { left: 0, 'width': '100%', 'height': '100%' } 
    ,enableInteractivity: false 
};

【问题讨论】：

我在圆环图上遇到了类似的问题，当孔太大时，文本没有放在可读性很强的地方。

标签： jquery position pie-chart google-pie-chart

【解决方案1】：

我的Google Charts 饼图上的定位标签似乎也遇到了同样的错误。经过一番摸索，我意识到我正在执行 chart.draw() 函数，而目标 div 元素被隐藏。然后我会切换图表元素并注意不可靠的格式。

在绘制图表之前调整我的 javascript 以等待显示 div 解决了我的问题。

之前：

之后：

【讨论】：

如何等到 div 显示出来？
没什么特别的。可能是更好的方法，但我只有一个绘制图表功能，每次显示图表容器元素时都会执行该功能

【解决方案2】：

为了获得图例的灵活性，您可能只想将其关闭并使用 html 创建自己的图例，或者利用找到的 API 中的其他预设选项https://developers.google.com/chart/interactive/docs/customizing_charts

【讨论】：

这不是我遇到问题的传说。它是图表本身的 pieSliceText 位置。