Javascript examples for Chart.js:Doughnut Chart
Doughnut chart from chart.js
<html> <head> <title>chart.js 2.1</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.bundle.min.js"></script> <script type="text/javascript"> window.onload=function(){//from www. j av a 2s . c o m Chart.pluginService.register({ afterDraw: function(chart) { if (chart.config.options.elements.center) { var helpers = Chart.helpers; var centerX = (chart.chartArea.left + chart.chartArea.right) / 2; var centerY = (chart.chartArea.top + chart.chartArea.bottom) / 2; var ctx = chart.chart.ctx; ctx.save(); var fontSize = helpers.getValueOrDefault(chart.config.options.elements.center.fontSize, Chart.defaults.global.defaultFontSize); var fontStyle = helpers.getValueOrDefault(chart.config.options.elements.center.fontStyle, Chart.defaults.global.defaultFontStyle); var fontFamily = helpers.getValueOrDefault(chart.config.options.elements.center.fontFamily, Chart.defaults.global.defaultFontFamily); var font = helpers.fontString(fontSize, fontStyle, fontFamily); ctx.font = font; ctx.fillStyle = helpers.getValueOrDefault(chart.config.options.elements.center.fontColor, Chart.defaults.global.defaultFontColor); ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(chart.config.options.elements.center.text, centerX, centerY); ctx.restore(); } }, }) var config = { type: 'doughnut', data: { labels: [ "Red", "Green", "Yellow" ], datasets: [{ data: [300, 50, 100], backgroundColor: [ "#FF6283", "#36A2EB", "#FFCC54" ], hoverBackgroundColor: [ "#FF6283", "#36A2EB", "#FFCC54" ] }] }, options: { elements: { center: { text: 'Hello', fontColor: '#000', fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", fontSize: 24, fontStyle: 'normal' } } } }; var ctx = document.getElementById("myChart").getContext("2d"); var myChart = new Chart(ctx, config); } </script> </head> <body> <canvas id="myChart"></canvas> </body> </html>