it-swarm.com.de

Wie füge ich Labels in Chart.js Canvas Plugin hinzu?

Ich verwende das großartige Plugin Chart.js und versuche, die Art und Weise zu finden, wie Beschriftungen in den einzelnen Dateien angezeigt werden Prozentsatz. Also googelte ich es und fand diesen Zug: https://github.com/nnnick/Chart.js/pull/35

Ich habe ein einfaches Geigenspiel gemacht, um es zu testen, aber es funktioniert nicht: http://jsfiddle.net/marianico2/7ktug/1/

Dies ist der Inhalt:

[~ # ~] 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'
    });
});

Ich fürchte, es gibt keine Informationen dazu in der Dokumentation .

Ich würde auch gerne wissen, wie man eine Bezeichnung für jeden Teil anzeigt, aber außerhalb des Diagramms. Durch eine Linie verbunden. Wie auch die Charts von highcharts.js .

Übrigens, ich würde mich freuen, wenn Sie mir eine HTML5-Diagrammalternative empfehlen, die die oben genannten Optionen enthält. Ich habe von dem flot Plugin gehört, aber ich fürchte, es unterstützt keine Animationen ...

Wenn Sie weitere Informationen benötigen, lassen Sie es mich wissen und ich bearbeite den Beitrag.

41
harrison4

Sie müssen Code an 2 Stellen hinzufügen. Nehmen Sie als Beispiel den Donut. Ergänzen Sie zuerst die Standardeinstellungen mit Label-Informationen (schauen Sie sich den ursprünglichen Code von Chart.js an und vergleichen Sie ihn damit):

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

Gehen Sie dann nach unten, wo der Donut gezeichnet wird, und fügen Sie die vier ctx Linien hinzu.

    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);

Das ctx.fillText call fügt den Text in die Zeichenfläche ein, sodass Sie ihn zum Schreiben von Text mit x- und y-Koordinaten verwenden können. Sie sollten in der Lage sein, auf diese Weise grundlegende Beschriftungen zu erstellen. Hier ist die Geige zum Basteln:

http://jsfiddle.net/nCFGL/ (siehe Zeilen 281 und 772 im JavaScript-Abschnitt der Jsfiddle für den oben genannten Code)

Wenn Sie etwas Lustigeres brauchen, hat jemand eine Version von Charts.js herausgegeben und Tooltips hinzugefügt. Hier ist die Diskussion https://github.com/nnnick/Chart.js/pull/35 , und Sie können den Link zur gegabelten Version in dieser Diskussion finden.

32
Jack

Das dauerte buchstäblich Stunden und ich fand eine funktionierende Lösung.

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

Dies war mein endgültiger Code. Ich habe versucht, Prozentsätze als Etiketten auf dem Donut anzuzeigen

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);
        }
     }
}
});
7
animesh manglik

Ich habe einen Weg gefunden, um die Werte für jede Region außerhalb des Diagramms anzuzeigen.

Außerdem habe ich die Rotation der Werte entfernt und auf hier verwiesen

Fügen Sie die folgenden Codezeilen in die Donut-Funktion ein. (Ich habe die geänderten Zeilen aus der Chart.js-Datei eingefügt).

    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();
     }

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

Jetzt werden die Werte außerhalb jedes Abschnitts angezeigt und es wird nicht gedreht.

3
Sareesh

Es gibt eine abgespaltene Version ChartNew , die diese Funktionalität sofort bereitstellt.

Wenn Sie ChartJS verwenden müssen, können Sie diese überarbeitete Version von @ Jacks Lösung verwenden:

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);
    }
});
3
dunckr