＜canvas id=”chart” width=”315” height=”315”＞＜/canvas＞

var ctx = $(’#chart’);
var mychart = new Chart(ctx, {
    type: ’pie’,//doughnut
    data: {
        labels: [
            ’ラベル１’,
            ’ラベル２’,
            ’ラベル３’,
            ’ラベル４’,
            ’ラベル５’
        ],
        datasets: [{
            label: ’サンプルグラフ’,
            data: [
                10,
                40,
                20,
                10,
                20
            ],
            backgroundColor: [
                ’rgba(241, 107, 141, 1)’,
                ’rgba( 31, 167, 165, 1)’,
                ’rgba(249, 199,  83, 1)’,
                ’rgba(176, 110,  30, 1)’,
                ’rgba(124,  91, 164, 1)’
            ]
        }]
    },
    options: {
        legend: {
            display: true,
            position: ’bottom’,
        },
        scales: {
            yAxes: [{
                ticks: {
                    display: false,
                    beginAtZero: true,
                },
                gridLines: {
                    display: false
                }
            }]
        }
    }
});

// Define a plugin to provide data labels
Chart.plugins.register({
    afterDatasetsDraw: function (chart, easing) {
        // To only draw at the end of animation, check for easing === 1
        var ctx = chart.ctx;

        chart.data.datasets.forEach(function (dataset, i) {
            var meta = chart.getDatasetMeta(i);
            if (!meta.hidden) {
                meta.data.forEach(function (element, index) {
                    // Draw the text in black, with the specified font
                    ctx.fillStyle = ’rgb(0, 0, 0)’;

                    var fontSize = 16;
                    var fontStyle = ’normal’;
                    var fontFamily = ’Helvetica Neue’;
                    ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);

                    // Just naively convert to string for now
                    var dataString = dataset.data[index].toString();

                    // Make sure alignment settings are correct
                    ctx.textAlign = ’center’;
                    ctx.textBaseline = ’middle’;

                    var padding = 5;
                    var position = element.tooltipPosition();
                    ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding);
                });
            }
        });
    }
});