ラベルが表示されているときにドーナツチャートが消える

Question

flotで簡単なドーナツチャートが作成されています。ただし、デフォルトの設定を使用すると、ラベルは表示されません（たとえ "show：true"を指定しても）。凡例を隠すときだけ、ラベルが表示されますが、グラフ自体は消えます。私は何かを見逃しているのですか？これはflotライブラリのバグですか？

これは私のコードです：

円グラフのプラグインのコードを見てみると

var data = [ 
    {label: "A", data: 373, color: "red"}, 
    {label: "B", data: 84, color: "blue"}, 
    {label: "C", data: 73, color: "green"}  
]; 

$.plot("#chart", data, { 
    series: { 
    pie: { 
     innerRadius: 0.75, 
     show: true, 
    } 
    }, 
    label: { 
    show: true, 
    }, 
    legend: { 
    show: false 
    } 
}); 

JsFiddle

Answer 1

、伝説の可視性はpie.radiusが設定されている場合は順番にチャートの半径を制御ラベルの可視性を制御し、 auto（明示的に設定されていない場合はデフォルト値です。以下の該当するコードを参照してください）。

.75を図のinnerRadiusとして選択しました。これは、この状況でプラグインが半径として設定するものです。 radiusとinnerRadiusが等しい場合、あなたが記述している消えている現象が発生します。

// set labels.show 
if (options.series.pie.label.show == "auto") { 
    if (options.legend.show) { 
     options.series.pie.label.show = false; 
    } else { 
     options.series.pie.label.show = true; 
    } 
} 

// set radius 
if (options.series.pie.radius == "auto") { 
    if (options.series.pie.label.show) { 
     options.series.pie.radius = 3/4; 
    } else { 
     options.series.pie.radius = 1; 
    } 
} 

なぜプラグインがこのように書かれたのですか？私はわからない - しかし、あなたは伝説をオフにしてきたとき.75以外のものにあなたのinnerRadiusを設定することで、それを修正することができ、またはその両方innerRadiusとradiusプロパティを指定：

$(function() { 
 
    var data = [{ 
 
    label: "A", 
 
    data: 373, 
 
    color: "red" 
 
    }, { 
 
    label: "B", 
 
    data: 84, 
 
    color: "blue" 
 
    }, { 
 
    label: "C", 
 
    data: 73, 
 
    color: "green" 
 
    }]; 
 

 
    $.plot("#chart", data, { 
 
    series: { 
 
     pie: { 
 
     innerRadius: 0.5, 
 
     radius: .75, 
 
     show: true, 
 
     } 
 
    }, 
 
    label: { 
 
     show: true, 
 
    }, 
 
    legend: { 
 
     show: false 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.pie.min.js"></script> 
 

 
<div id="chart" style="width: 600px; height: 300px;"></div>

を