如何修改Google的PieChart pieSliceText定位

Question

我在使用Google PieChart pieSliceText时遇到问题。它重叠在页面上，而不是完全在PieChart本身上。

见截图照片：

我甚至调整了字体要小得多，但同样的问题：

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

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

以下是我的图表选项：

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

Answer 1

我似乎在Google Charts饼图上放置标签时偶然发现了相同的错误。经过一番摸索 我意识到我在隐藏目标div元素的同时执行了chart.draw（）函数。然后，我将切换图表元素并注意格式不正确。

调整我的JavaScript，直到显示div为止，然后绘制图表即可解决我的问题。

之前：

之后：

Answer 2

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