Mettre la somme des valeurs au centre du graphique en anneau?

Je dessine ce diagramme à secteurs:

Mettre la somme des valeurs au centre du graphique en anneau?

l'aide de ce code:

dxPieChart: {
    dataSource: dsAlarmsBySeverity,
    size: {
        width: 275,
        height: 150
    },
    palette: ['#FFFF00', '#FF9900', '#CC3300', '#33CC33', '#0066FF'],
    legend: {
        backgroundColor: '#FCFCFC',
        border: {
                color: 'black',
                width: .5,
                visible: true,
                cornerRadius: 10
        },
        verticalAlign: 'middle'
    },
    series: [{
        type: 'doughnut',
        argumentField: 'severity',
        valueField: 'count',
        label: {
            visible: false,
            font: {
                size: 16
            },
            connector: {
                visible: true,
                width: 0.5
            },
            position: 'columns',
            customizeText: function(arg) {
                return arg.argumentText
            }
        },
        border: {
            color: 'black',
            width: .5,
            visible: true
        },
        hoverStyle: {
            border: {
                color: 'black',
                width: .5,
                visible: true
            }
        }
    }]
}

Est-il un moyen d'ajouter la somme de toutes les valeurs au centre de l'anneau? Comme:

Mettre la somme des valeurs au centre du graphique en anneau?

Cette fonctionnalité est une question ouverte en github
La question @SaravanaKumar renvoie a été fermé. Vous pouvez utiliser ce plugin maintenant: github.com/ciprianciurea/chartjs-plugin-doughnutlabel

OriginalL'auteur Scott Beeson | 2014-01-03

  1. 0

    Il y a un plugin pour ce que vous voulez faire: https://github.com/ciprianciurea/chartjs-plugin-doughnutlabel

    OriginalL'auteur John Archer

  2. 3

    Comme une solution de contournement jusqu'à ce que la question est terminée, vous pouvez simplement tirer vos propres total sur l'élément canvas.

    Vous aurez à calculer manuellement la position x/y sur la toile (comme [150,100] dans cet exemple).

    var canvas=document.getElementById("myChart");
var ctx=canvas.getContext("2d");
ctx.font="36px verdana";
ctx.fillText("76",150,100);

    OriginalL'auteur markE

  3. 1

    Fait, j'ai fini par faire ceci:

    <div style="position: relative;" data-bind="dxPieChart: {
  //chart initialization code from above...
}">
    <div style="position: absolute; top: 50%; margin-top: -15px; left: 50%; font-size: 30px; line-height: 30px; margin-left: -50px; width: 100px; text-align: center;" data-bind="text: alarmIDs().length"></div>
    <div style="position: absolute; top: 50%; margin-top: 15px; left: 50%; font-size: 15px; line-height: 15px; margin-left: -50px; width: 100px; text-align: center;">alarms</div>
</div>

    Lorsqu'il lie le tableau, il n'est pas remplacer toute HTML interne, de sorte que cela fonctionne à merveille.

    OriginalL'auteur Scott Beeson