2

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

2 に答える 2

2

Google チャートの円グラフにラベルを配置する際に、この同じエラーに出くわしたようです。いくつか手探りした後、ターゲットの div 要素が非表示になっている間に chart.draw() 関数を実行していることに気付きました。次に、グラフ要素を切り替えて、フォーマットがおかしいことに気付きます。

グラフを描画する前に div が表示されるまで待機するように JavaScript を微調整すると、問題が修正されました。

前：

前

後：

後

于 2019-12-09T19:59:43.697 に答える