jquery - ¿Cómo agregar etiquetas al plugin Chart.js?

css3 canvas

Question

Estoy usando el impresionante plugin Chart.js , y estoy tratando de encontrar la forma de mostrar las etiquetas dentro de cada porcentaje. Así que busqué en Google, y encontré esta atracción: https://github.com/nnnick/Chart.js/pull/35

Hice un violín simple para probarlo, pero no funciona: http://jsfiddle.net/marianico2/7ktug/1/

Este es el contenido:

HTML

<canvas id="canvas" height="450" width="450"></canvas>

JS

$(document).ready(function () {
    var pieData = [{
        value: 30,
        color: "#F38630",
        label: ''HELLO'',
        labelColor: ''black'',
        labelFontSize: ''16''
    }, {
        value: 50,
        color: "#E0E4CC"
    }, {
        value: 100,
        color: "#69D2E7"
    }];

    var myPie = new Chart(document.getElementById("canvas").getContext("2d")).Pie(pieData, {
        labelAlign: ''center''
    });
});

Me temo que no hay información sobre esto en la documentation .

También me gustaría saber cómo mostrar una etiqueta para cada parte, pero fuera del gráfico. Vinculado por una línea. Al igual que los gráficos de highcharts.js .

Por cierto, me alegraría si me recomiendan una alternativa de gráfico html5 que incluye las opciones que dije anteriormente. He oído hablar del plugin flot , pero me temo que no admite animaciones ...

Si necesita más información, hágamelo saber y editaremos la publicación.

Answer 1

Esto literalmente tomó horas y horas y encontré una solución de trabajo.

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

Este fue mi código final. Estaba tratando de mostrar porcentajes como etiquetas en donut

Chart.types.Doughnut.extend({
name: "DoughnutAlt",
draw: function() {
    Chart.types.Doughnut.prototype.draw.apply(this, arguments);
    this.chart.ctx.fillStyle = ''black'';
    this.chart.ctx.textBaseline = ''middle'';
    this.chart.ctx.textAlign = ''start'';
    this.chart.ctx.font="18px Verdana";

    var total = 0;
    for (var i = 0; i < this.segments.length; i++) { 
        total += this.segments[i].value;      
    }

    this.chart.ctx.fillText(total , this.chart.width / 2 - 20, this.chart.height / 2, 100);
    for(var i = 0; i < this.segments.length; i++){
        var percentage = ((this.segments[i].value / total) * 100).toFixed(1);
        if( percentage > 3 ){
            var centreAngle = this.segments[i].startAngle + ((this.segments[i].endAngle - this.segments[i].startAngle) / 2),
                rangeFromCentre = (this.segments[i].outerRadius - this.segments[i].innerRadius) / 2 + this.segments[i].innerRadius;
            var x = this.segments[i].x + (Math.cos(centreAngle) * rangeFromCentre);
            var y = this.segments[i].y + (Math.sin(centreAngle) * rangeFromCentre);
            this.chart.ctx.textAlign = ''center'';
            this.chart.ctx.textBaseline = ''middle'';
            this.chart.ctx.fillStyle = ''#fff'';
            this.chart.ctx.font = ''normal 10px Helvetica'';
            this.chart.ctx.fillText(percentage , x, y);
        }
     }
}
});

Answer 2

Hay una versión bifurcada, ChartNew , que proporciona esta funcionalidad lista para ChartNew .

Si necesita usar ChartJS, puede usar esta versión revisada de la solución de @Jack:

Chart.types.Doughnut.extend({
    name: "DoughnutAlt",
    draw: function() {
        Chart.types.Doughnut.prototype.draw.apply(this, arguments);
        this.chart.ctx.fillStyle = ''black'';
        this.chart.ctx.textBaseline = ''middle'';
        this.chart.ctx.fillText(this.segments[0].value + "%", this.chart.width / 2 - 20, this.chart.width / 2, 200);
    }
});

Answer 3

He descubierto una manera para que podamos mostrar los valores para cada región fuera del gráfico.

También eliminé la rotación de los valores y me referí https://github.com/nnnick/Chart.js/pull/116

Agregue las siguientes líneas de código dentro de la función Donut. (He pegado las líneas modificadas del archivo Chart.js).

    var Doughnut = function(data,config,ctx){

    var segmentTotal = 0;

    //In case we have a canvas that is not a square. Minus 10 pixels as padding round the edge.
    var doughnutRadius = Min([height/2,width/2]) - 15;
    var cutoutRadius = doughnutRadius * (config.percentageInnerCutout/100);
    //Modified for setting the label values out side the arc
    var outRadius= doughnutRadius + cutoutRadius/3;
    var outRadiustop= doughnutRadius + cutoutRadius/5;
    ......
    ......
    ......

    function drawPieSegments (animationDecimal){
    :
    :



       if (config.scaleShowValues) {
                ctx.save();                
                ctx.translate(width / 2, height / 2);
                ctx.font = config.scaleFontStyle + '' '' + config.scaleFontSize + ''px '' + config.scaleFontFamily;
                ctx.textBaselne = ''middle'';
                var a = (cumulativeAngle + cumulativeAngle + segmentAngle) / 2,
                    w = ctx.measureText(data[i].value).width,
                    b = Math.PI / 2 < a && a < Math.PI * 3 / 2;
                var c  = 0 < a && a < Math.PI;
                if(b){
                    ctx.textAlign = ''right'';
                }
                else{
                    ctx.textAlign = ''left'';
                }
                if(c){
                    ctx.translate(Math.cos(a) * outRadius +1 , Math.sin(a) * outRadius+1);

                }
                else{
                    ctx.translate(Math.cos(a) * outRadiustop, Math.sin(a) * outRadiustop);      
                }

                ctx.fillStyle = config.scaleFontColor;
                //If the segment angle less than 0.2, then the lables will overlap, so hiding it.
                if(segmentAngle > 0.2){
                    ctx.fillText(data[i].value,0,0);

                }
                ctx.restore();
     }

     ......
     ...... 

Ahora los valores se mostrarán al costado de cada sección y no se rotarán.

Answer 4

Tendrás que agregar código en 2 lugares. Como ejemplo, toma la rosquilla. Primero agregue la información de la etiqueta a los valores predeterminados (mire el código Chart.js original y compárelo con esto):

    chart.Doughnut.defaults = {
        segmentShowStroke : true,
        segmentStrokeColor : "#fff",
        segmentStrokeWidth : 2,
        percentageInnerCutout : 50,
        animation : true,
        animationSteps : 100,
        animationEasing : "easeOutBounce",
        animateRotate : true,
        animateScale : false,
        onAnimationComplete : null,
        labelFontFamily : "Arial",
        labelFontStyle : "normal",
        labelFontSize : 24,
        labelFontColor : "#666"
    };

Luego baje hasta donde está dibujado el Donut y agregue las cuatro líneas de ctx .

    animationLoop(config,null,drawPieSegments,ctx);

    function drawPieSegments (animationDecimal){
        ctx.font = config.labelFontStyle + " " + config.labelFontSize+"px " + config.labelFontFamily;
        ctx.fillStyle = ''black'';
        ctx.textBaseline = ''middle'';
        ctx.fillText(data[0].value + "%", width/2 - 20, width/2, 200);

La llamada ctx.fillText colocará el texto en el lienzo, por lo que puede usarlo para escribir texto con coordenadas x, y. Deberías poder usar esta forma para hacer etiquetas básicas. Aquí está el jsfiddle para jugar:

http://jsfiddle.net/nCFGL/ (mira las líneas 281 y 772 en la sección de JavaScript de jsfiddle para el código antes mencionado)

Si necesita algo más elegante, alguien bifurcó una versión de Charts.js y agregó tooltips. Aquí está la discusión https://github.com/nnnick/Chart.js/pull/35 , y usted podrá encontrar el enlace a la versión bifurcada dentro de esa discusión.