javascript - examples - Cómo agregar una etiqueta en chart.js para un gráfico circular

charts js labels position

Question

Estoy mostrando gráfico circular. Pero cómo mostrar etiquetas en gráficos circulares.

A continuación se muestra el código chart.js para el gráfico circular.

this.Pie = function(data, options) {

  chart.Pie.defaults = {
    segmentShowStroke: true,
    segmentStrokeColor: "#fff",
    segmentStrokeWidth: 2,
    animation: true,
    animationSteps: 100,
    animationEasing: "easeOutBounce",
    animateRotate: true,
    animateScale: false,
    onAnimationComplete: null
  };

  var config = (options) ? mergeChartConfig(chart.Pie.defaults, options) : chart.Pie.defaults;

  return new Pie(data, config, context);
};

y debajo está el código del archivo html para mostrar el gráfico circular

código:

var data = [{
  value: 20,
  color: "#637b85"
}, {
  value: 30,
  color: "#2c9c69"
}, {
  value: 40,
  color: "#dbba34"
}, {
  value: 10,
  color: "#c62f29"
}];

var canvas = document.getElementById("hours");
var ctx = canvas.getContext("2d");
new Chart(ctx).Pie(data);

Answer 1

EDITAR: http://jsfiddle.net/nCFGL/223/ Mi ejemplo.

Usted debe ser capaz de gustar lo siguiente:

var pieData = [{
    value: 30,
    color: "#F38630",
    label: ''Sleep'',
    labelColor: ''white'',
    labelFontSize: ''16''
  },
  ...
];

Incluya el Chart.js ubicado en:

https://github.com/nnnick/Chart.js/pull/35

Answer 2

La solución de Rachel funciona bien, aunque necesita usar el script de raw.githubusercontent.com de raw.githubusercontent.com

Por ahora hay una característica que muestran en la página de inicio cuando anuncian el script "modular". Puedes ver una leyenda con esta estructura:

<div class="labeled-chart-container">
    <div class="canvas-holder">
        <canvas id="modular-doughnut" width="250" height="250" style="width: 250px; height: 250px;"></canvas>
    </div>

<ul class="doughnut-legend">
    <li><span style="background-color:#5B90BF"></span>Core</li>
    <li><span style="background-color:#96b5b4"></span>Bar</li>
    <li><span style="background-color:#a3be8c"></span>Doughnut</li>
    <li><span style="background-color:#ab7967"></span>Radar</li>
    <li><span style="background-color:#d08770"></span>Line</li>
    <li><span style="background-color:#b48ead"></span>Polar Area</li>
</ul>
</div>

Para lograrlo utilizan la opción de configuración de gráfico legendTemplate

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

Puede encontrar la documentación aquí en chartjs.org Esto funciona para todos los gráficos, aunque no es parte de la configuración del gráfico global .

Luego crean la leyenda y la agregan al DOM de esta manera:

var legend = myPie.generateLegend();
$("#legend").html(legend);

Muestra Ver también mi muestra JSFiddle

Answer 3

No es necesario usar otra biblioteca como newChart o usar las solicitudes de extracción de otras personas para lograr esto. Todo lo que tienes que hacer es definir un objeto de opciones y agregar la etiqueta donde sea y como quieras en la información sobre herramientas.

var optionsPie = {
    tooltipTemplate: "<%= label %> - <%= value %>"
}

Si desea que la información sobre herramientas se muestre siempre, puede realizar otras ediciones en las opciones:

 var optionsPie = {
        tooltipEvents: [],
        showTooltips: true,
        onAnimationComplete: function() {
            this.showTooltip(this.segments, true);
        },
        tooltipTemplate: "<%= label %> - <%= value %>"
    }

En sus elementos de datos, debe agregar la propiedad y el valor de la etiqueta deseados y eso es todo.

data = [
    {
        value: 480000,
        color:"#F7464A",
        highlight: "#FF5A5E",
        label: "Tobacco"
    }
];

Ahora, todo lo que tiene que hacer es pasar el objeto de opciones después de los datos al nuevo Pie de esta manera: new Chart(ctx).Pie(data,optionsPie) y listo.

Esto probablemente funciona mejor para pasteles que no son muy pequeños en tamaño.

Gráfico circular con etiquetas

Answer 4

Para aquellos que usan las versiones más recientes de Chart.js, puede establecer una etiqueta configurando la devolución de llamada para tooltips.callbacks.label en las opciones.

Ejemplo de esto sería:

var chartOptions = {
    tooltips: {
        callbacks: {
            label: function (tooltipItem, data) {
                return ''label'';
            }
        }
    }
}

Answer 5

Use ChartNew.js lugar de Chart.js

...

Por lo tanto, he vuelto a trabajar Chart.js. La mayoría de los cambios están asociados a solicitudes en los problemas "GitHub" de Chart.js.

Y aquí hay una muestra http://jsbin.com/lakiyu/2/edit

var newopts = {
    inGraphDataShow: true,
    inGraphDataRadiusPosition: 2,
    inGraphDataFontColor: ''white''
}
var pieData = [
    {
        value: 30,
        color: "#F38630",
    },
    {
       value: 30,
       color: "#F34353",
    },
    {
        value: 30,
        color: "#F34353",
    }
]
var pieCtx = document.getElementById(''pieChart'').getContext(''2d'');
new Chart(pieCtx).Pie(pieData, newopts);

Incluso proporciona un editor de GUI http://charts.livegap.com/

Tan dulce.