1

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

1 respuesta 1

2

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.

// 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>",

onAnimationProgress: valorCentral
  
}
Chart.defaults.global.showTooltips = false;

// 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
  },
  {
    label: "Land",
    color: "#7fc77f",
    highlight: "#a3d7a3",
    value: 6
  },
  {
    label: "Multifamily",
    color: "#fab657",
    highlight: "#fbcb88",
    value: 8
  },
  {
    label: "Farm/Ranch",
    color: "#eaaede",
    highlight: "#f5d6ef",
    value: 8
  },
  {
    label: "Commercial",
    color: "#dd6864",
    highlight: "#e6918e",
    value: 14
  },

]

// Property Type Distribution
var propertyTypes = new Chart(ctxPTD).Pie(dataPTD, options);
// pie chart legend
$("#pie_legend").html(propertyTypes.generateLegend());

function valorCentral(){

  var tooltipEl = $('#chartjs-tooltip');

  tooltipEl.removeClass('above below');
  tooltipEl.addClass(tooltipEl.yAlign);


  var innerHtml = '<b>' + colorAzulValue() + '%</b></span>';
  tooltipEl.html(innerHtml);
  var canvas = document.getElementById("property_types");
  tooltipEl.css({
    opacity: 1,
    left: canvas.width / 2 + 'px',
    top: canvas.height / 2 + 'px',
    fontFamily: tooltipEl.fontFamily,
    fontSize: tooltipEl.fontSize,
    fontStyle: tooltipEl.fontStyle,
  });
}

function colorAzulValue() {

  for (var i = 0; i < dataPTD.length; i++) {
    
    var colorSegmento = dataPTD[i].color;
    //alert (colorSegmento);
    if(colorSegmento === "#5093ce" ) return dataPTD[i].value;
    
  }

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

#chartjs-tooltip {
  opacity: 0;
  position: absolute;
  background: rgba(0, 0, 0, .7);
  color: white;
  padding: 3px;
  border-radius: 3px;
}
<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>
<div id="chartjs-tooltip"></div>

1
  • 1
    Wow, eso es exactamente lo que buscaba, muchas gracias lois6b me has ayudado mucho... Ajustaré algunas cosas, pero en verdad muchas gracias he
    – José MN
    el 10 may. 2017 a las 15:11

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.