Chart js mostrar información dentro del diagrama

publicado por: Anonymous

Tomando como base el siguiente diagrama hecho en Char.js Diagrama de pastel

_x000D_

_x000D_

// global options variable_x000D_
var options = {_x000D_
  responsive: true,_x000D_
  scaleBeginAtZero: true,_x000D_
  // you don't have to define this here, it exists inside the global defaults_x000D_
  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>"_x000D_
}_x000D_
_x000D_
// PIE_x000D_
// PROPERTY TYPE DISTRIBUTION_x000D_
// context_x000D_
var ctxPTD = $("#property_types").get(0).getContext("2d");_x000D_
// data_x000D_
var dataPTD = [{_x000D_
    label: "Single Family Residence",_x000D_
    color: "#5093ce",_x000D_
    highlight: "#78acd9",_x000D_
    value: 52_x000D_
  },_x000D_
  {_x000D_
    label: "Townhouse/Condo",_x000D_
    color: "#c7ccd1",_x000D_
    highlight: "#e3e6e8",_x000D_
    value: 12_x000D_
  }_x000D_
_x000D_
]_x000D_
_x000D_
// Property Type Distribution_x000D_
var propertyTypes = new Chart(ctxPTD).Pie(dataPTD, options);_x000D_
// pie chart legend_x000D_
$("#pie_legend").html(propertyTypes.generateLegend());

_x000D_

.pie-legend {_x000D_
  list-style: none;_x000D_
  margin: 0;_x000D_
  padding: 0;_x000D_
}_x000D_
_x000D_
.pie-legend span {_x000D_
  display: inline-block;_x000D_
  width: 14px;_x000D_
  height: 14px;_x000D_
  border-radius: 100%;_x000D_
  margin-right: 16px;_x000D_
  margin-bottom: -2px;_x000D_
}_x000D_
_x000D_
.pie-legend li {_x000D_
  margin-bottom: 10px;_x000D_
}

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1/Chart.min.js"></script>_x000D_
<div class="chart">_x000D_
  <canvas id="property_types" class="pie"></canvas>_x000D_
  <div id="pie_legend"></div>_x000D_
</div>

_x000D_

_x000D_

_x000D_

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

solución

Me he basado en esta respuesta para crear un valor central.

En options agregas un onAnimationProgress para que se ejecute una función.

Ahi modifico el css para que lo ponga en medio, buscando en los datos de dataPTD aquel que tenga el color azul.

_x000D_

_x000D_

// global options variable_x000D_
var options = {_x000D_
  responsive: true,_x000D_
  scaleBeginAtZero: true,_x000D_
  // you don't have to define this here, it exists inside the global defaults_x000D_
  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>",_x000D_
_x000D_
onAnimationProgress: valorCentral_x000D_
  _x000D_
}_x000D_
Chart.defaults.global.showTooltips = false;_x000D_
_x000D_
// PIE_x000D_
// PROPERTY TYPE DISTRIBUTION_x000D_
// context_x000D_
var ctxPTD = $("#property_types").get(0).getContext("2d");_x000D_
// data_x000D_
var dataPTD = [{_x000D_
    label: "Single Family Residence",_x000D_
    color: "#5093ce",_x000D_
    highlight: "#78acd9",_x000D_
    value: 52_x000D_
  },_x000D_
  {_x000D_
    label: "Townhouse/Condo",_x000D_
    color: "#c7ccd1",_x000D_
    highlight: "#e3e6e8",_x000D_
    value: 12_x000D_
  },_x000D_
  {_x000D_
    label: "Land",_x000D_
    color: "#7fc77f",_x000D_
    highlight: "#a3d7a3",_x000D_
    value: 6_x000D_
  },_x000D_
  {_x000D_
    label: "Multifamily",_x000D_
    color: "#fab657",_x000D_
    highlight: "#fbcb88",_x000D_
    value: 8_x000D_
  },_x000D_
  {_x000D_
    label: "Farm/Ranch",_x000D_
    color: "#eaaede",_x000D_
    highlight: "#f5d6ef",_x000D_
    value: 8_x000D_
  },_x000D_
  {_x000D_
    label: "Commercial",_x000D_
    color: "#dd6864",_x000D_
    highlight: "#e6918e",_x000D_
    value: 14_x000D_
  },_x000D_
_x000D_
]_x000D_
_x000D_
// Property Type Distribution_x000D_
var propertyTypes = new Chart(ctxPTD).Pie(dataPTD, options);_x000D_
// pie chart legend_x000D_
$("#pie_legend").html(propertyTypes.generateLegend());_x000D_
_x000D_
function valorCentral(){_x000D_
_x000D_
  var tooltipEl = $('#chartjs-tooltip');_x000D_
_x000D_
  tooltipEl.removeClass('above below');_x000D_
  tooltipEl.addClass(tooltipEl.yAlign);_x000D_
_x000D_
_x000D_
  var innerHtml = '<b>' + colorAzulValue() + '%</b></span>';_x000D_
  tooltipEl.html(innerHtml);_x000D_
  var canvas = document.getElementById("property_types");_x000D_
  tooltipEl.css({_x000D_
    opacity: 1,_x000D_
    left: canvas.width / 2 + 'px',_x000D_
    top: canvas.height / 2 + 'px',_x000D_
    fontFamily: tooltipEl.fontFamily,_x000D_
    fontSize: tooltipEl.fontSize,_x000D_
    fontStyle: tooltipEl.fontStyle,_x000D_
  });_x000D_
}_x000D_
_x000D_
function colorAzulValue() {_x000D_
_x000D_
  for (var i = 0; i < dataPTD.length; i++) {_x000D_
    _x000D_
    var colorSegmento = dataPTD[i].color;_x000D_
    //alert (colorSegmento);_x000D_
    if(colorSegmento === "#5093ce" ) return dataPTD[i].value;_x000D_
    _x000D_
  }_x000D_
_x000D_
}

_x000D_

.pie-legend {_x000D_
  list-style: none;_x000D_
  margin: 0;_x000D_
  padding: 0;_x000D_
}_x000D_
 _x000D_
_x000D_
.pie-legend span {_x000D_
  display: inline-block;_x000D_
  width: 14px;_x000D_
  height: 14px;_x000D_
  border-radius: 100%;_x000D_
  margin-right: 16px;_x000D_
  margin-bottom: -2px;_x000D_
}_x000D_
_x000D_
.pie-legend li {_x000D_
  margin-bottom: 10px;_x000D_
}_x000D_
_x000D_
#chartjs-tooltip {_x000D_
  opacity: 0;_x000D_
  position: absolute;_x000D_
  background: rgba(0, 0, 0, .7);_x000D_
  color: white;_x000D_
  padding: 3px;_x000D_
  border-radius: 3px;_x000D_
}

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1/Chart.min.js"></script>_x000D_
<div class="chart">_x000D_
  <canvas id="property_types" class="pie"></canvas>_x000D_
  <div id="pie_legend"></div>_x000D_
</div>_x000D_
<div id="chartjs-tooltip"></div>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *