Tomando como base el siguiente diagrama hecho en Char.js Diagrama de pastel
// global options variable
var options = {
responsive: true,
scaleBeginAtZero: true,
// you don't have to define this here, it exists inside the global defaults
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
}
// PIE
// PROPERTY TYPE DISTRIBUTION
// context
var ctxPTD = $("#property_types").get(0).getContext("2d");
// data
var dataPTD = [{
label: "Single Family Residence",
color: "#5093ce",
highlight: "#78acd9",
value: 52
},
{
label: "Townhouse/Condo",
color: "#c7ccd1",
highlight: "#e3e6e8",
value: 12
}
]
// Property Type Distribution
var propertyTypes = new Chart(ctxPTD).Pie(dataPTD, options);
// pie chart legend
$("#pie_legend").html(propertyTypes.generateLegend());
.pie-legend {
list-style: none;
margin: 0;
padding: 0;
}
.pie-legend span {
display: inline-block;
width: 14px;
height: 14px;
border-radius: 100%;
margin-right: 16px;
margin-bottom: -2px;
}
.pie-legend li {
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1/Chart.min.js"></script>
<div class="chart">
<canvas id="property_types" class="pie"></canvas>
<div id="pie_legend"></div>
</div>
Cómo puedo ajustar el código para que solo se pueda visualizar en el centro del diagrama el Porcentaje completado.
Por ejemplo: mostrar solo el 52%
de Single Family Residence