Ich arbeite mit der C3-Bibliothek, um ein Kreisdiagramm zu erstellen und D3 zu verwenden, um einige Eigenschaften anzupassen, die C3 nicht erlaubt.
Ich verschiebe die Etiketten, die C3 innerhalb des Bogens in den Kuchen außerhalb erstellen, aber wenn der Bogen schmal ist, wird das Etikett nicht angezeigt.
Ich denke, eine interne Option, die die Etiketten deaktivieren, da unter normalen Bedingungen nicht passt. Wie kann ich das Label wieder aktivieren, auch wenn es nicht passt?
Hier ist mein Code, um das Diagramm zu erstellen:SOLVE: C3 - Etiketten, die nicht im C3-Kreisdiagramm mit schmalen Bögen angezeigt werden
function pie(d1, d2, d3, d4, d5) {
var id = '"#C"'
var chart = c3.generate({
bindto: '#C',
size: {
width: 1275,//550,
height: 834//350
},
data: {
columns: [
d1,
d2,
d3,
d4,
d5
]
},
type: 'pie'
},
pie: {
label: {
format: function(value, ratio, id)
{
return d3.format('')(value)
},
show: true,
threshold: -1
}
},
legend: {
show: false
}
});
Und der Code zu bewegen, um die Etiketten außerhalb des Diagramms mit d3.js
var pie-labels= d3.selectAll(".c3-chart-arc > text").each(function(v) {
var label = d3.select(this);
var pos = label.attr("transform").match(/-?\d+(\.\d+)?/g);
var h = (pos[0]*pos[0]+pos[1]*pos[1]);
// pos[0] is x, pos[1] is y. Do some position changes and update value
//135000 is the radio of the chart
label.attr("transform", "translate("+ (pos[0]/h*135000) +","+ (pos[1]/h*135000) +")");
Wenn die Daten haben ähnliche Werte und die Bögen sind ähnlich Es gibt kein Problem, aber es erscheint während der Arbeit mit ungleichen Daten.