Flot Donut Diagramm verschwindet, wenn die Etiketten angezeigt werden

Question

Ich habe eine einfache Donut-Diagramm mit Flot erstellt. Wenn ich jedoch die Standardeinstellungen verwende, werden die Beschriftungen nicht angezeigt (selbst wenn ich "show: true" spezifiziere). Nur wenn ich die Legende ausgeblendet habe, werden die Beschriftungen angezeigt, aber das Diagramm selbst verschwindet. Fehle ich etwas oder ist das ein Fehler in der Flot-Bibliothek?

Dies ist mein Code:

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

Mit Blick auf das Kreisdiagramm Plugin-Code steuert die Legende Sichtbarkeit des Etiketts Sichtbarkeit, was wiederum den Radius des Diagramms steuert, wenn pie.radius gesetzt zu auto (das ist der Standardwert, wenn es nicht explizit festgelegt wurde - zutreffender Code unten).

Sie zufällig ausgewählt .75 als innerRadius des Diagramms, was ist, was das Plugin als Radius in dieser Situation setzt. Wenn radius und innerRadius gleich sind, tritt das verschwindende Phänomen auf, das Sie beschreiben.

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

Warum wurde das Plugin auf diese Weise geschrieben? Ich bin nicht sicher - aber man kann es beheben, indem Sie innerRadius auf etwas anderes als .75 Einstellung, wenn Sie die Legende deaktiviert haben, oder die Angabe sowohl die innerRadius und radius Eigenschaften:

$(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>