Ich verwende Chart.js zum Zeichnen von Kreisdiagrammen auf meiner PHP-Seite. Ich habe einen Tooltip gefunden, der die einzelnen Slice-Werte anzeigt.
Aber ich möchte diese Werte wie im folgenden Bild anzeigen.
Ich weiß nicht, wie ich das mit chart.js machen soll.
Bitte hilf mir.
Mein Javascript-Code:
function drawPie(canvasId,data,legend){
var ctx = $("#pie-canvas-" + canvasId).get(0).getContext("2d");
var piedata = [];
$.each(data,function(i,val){
piedata.push({value:val.count,color:val.color,label:val.status});
});
var options =
{
tooltipTemplate: "<%= Math.round(circumference / 6.283 * 100) %>%",
}
var pie = new Chart(ctx).Pie(piedata,options);
if(legend)document.getElementById("legend").innerHTML = pie.generateLegend();
}
PHP-Code:
printf('<table><tr>');
echo '<td style="text-align: right;"><canvas id="pie-canvas-'
. $canvasId
. '" width="256" height="256" ></canvas></td><td style="text-align: left;width:360px;height:auto" id="legend" class="chart-legend"></td></tr></table>';
echo '<script type="text/javascript">drawPie('
. $canvasId
. ', '
. $data3
.', '
. $legend
. ');</script>';
Soweit ich weiß, glaube ich nicht, dass Chart.JS Funktionen zum Zeichnen von Text in einem Kreisdiagramm bietet. Das heißt aber nicht, dass Sie es nicht selbst in nativem JavaScript tun können. Ich werde Ihnen ein Beispiel geben, wie das geht. Im Folgenden finden Sie den Code zum Zeichnen von Text für jedes Segment im Kreisdiagramm:
function drawSegmentValues()
{
for(var i=0; i<myPieChart.segments.length; i++)
{
// Default properties for text (size is scaled)
ctx.fillStyle="white";
var textSize = canvas.width/10;
ctx.font= textSize+"px Verdana";
// Get needed variables
var value = myPieChart.segments[i].value;
var startAngle = myPieChart.segments[i].startAngle;
var endAngle = myPieChart.segments[i].endAngle;
var middleAngle = startAngle + ((endAngle - startAngle)/2);
// Compute text location
var posX = (radius/2) * Math.cos(middleAngle) + midX;
var posY = (radius/2) * Math.sin(middleAngle) + midY;
// Text offside to middle of text
var w_offset = ctx.measureText(value).width/2;
var h_offset = textSize/4;
ctx.fillText(value, posX - w_offset, posY + h_offset);
}
}
A Pie Chart has an array of segments stored in PieChart.segments
, we can look at the startAngle
and endAngle
of these segments to determine the angle in between where the text would be middleAngle
. Then we would move in that direction by Radius/2
to be in the middle point of the chart in radians.
In the example above some other clean-up operations are done, due to the position of text drawn in fillText()
being the top right corner, we need to get some offset values to correct for that. And finally textSize
is determined based on the size of the chart itself, the larger the chart the larger the text.
With some slight modification you can change the discrete number values for a dataset into the percentile numbers in a graph. To do this get the total value
of the items in your dataset, call this totalValue
. Then on each segment you can find the percent by doing:
Math.round(myPieChart.segments[i].value/totalValue*100)+'%';
In diesem Abschnitt myPieChart.segments[i].value/totalValue
wird der Prozentsatz berechnet, den das Segment im Diagramm einnimmt. Zum Beispiel, wenn das aktuelle Segment einen Wert von 50
und der Gesamtwert hatte 200
. Dann wäre der Prozentsatz, den das Segment einnahm, : 50/200 => 0.25
. Der Rest soll das schön aussehen lassen. 0.25*100 => 25
, dann fügen wir %
am Ende ein hinzu. Für ganzzahlige Prozentkacheln habe ich auf die nächste ganze Zahl gerundet, obwohl dies zu Genauigkeitsproblemen führen kann. Wenn wir mehr Genauigkeit benötigen, können Sie .toFixed(n)
Dezimalstellen speichern. Zum Beispiel könnten wir dies tun, um bei Bedarf eine einzelne Dezimalstelle zu speichern:
var value = myPieChart.segments[i].value/totalValue*100;
if(Math.round(value) !== value)
value = (myPieChart.segments[i].value/totalValue*100).toFixed(1);
value = value + '%';
Dieser Artikel stammt aus dem Internet. Bitte geben Sie beim Nachdruck die Quelle an.
Bei Verstößen wenden Sie sich bitte [email protected] Löschen.
Lass mich ein paar Worte sagen