Highcharts Doughnut
The following example demonstrates Doughnut.
In the previous section we already know Highcharts basic configuration syntax. Let's look at the other configurations.
Configuration
chart configuration
The type attribute is set chart pie chart.type describes the chart type. The default value is "line".
var chart = { type: 'pie' };
Examples
File name: highcharts_pie_donut.htm
<html> <head> <meta charset="UTF-8" /> <title>Highcharts 教程 | 本教程(w3big.com)</title> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> </head> <body> <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div> <script language="JavaScript"> $(document).ready(function() { var colors = Highcharts.getOptions().colors; var categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera']; var data = [{ y: 55.11, color: colors[0], drilldown: { name: 'MSIE versions', categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'], data: [10.85, 7.35, 33.06, 2.81], color: colors[0] } }, { y: 21.63, color: colors[1], drilldown: { name: 'Firefox versions', categories: ['Firefox 2.0', 'Firefox 3.0', 'Firefox 3.5', 'Firefox 3.6', 'Firefox 4.0'], data: [0.20, 0.83, 1.58, 13.12, 5.43], color: colors[1] } }, { y: 11.94, color: colors[2], drilldown: { name: 'Chrome versions', categories: ['Chrome 5.0', 'Chrome 6.0', 'Chrome 7.0', 'Chrome 8.0', 'Chrome 9.0', 'Chrome 10.0', 'Chrome 11.0', 'Chrome 12.0'], data: [0.12, 0.19, 0.12, 0.36, 0.32, 9.91, 0.50, 0.22], color: colors[2] } }, { y: 7.15, color: colors[3], drilldown: { name: 'Safari versions', categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon', 'Safari 3.1', 'Safari 4.1'], data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14], color: colors[3] } }, { y: 2.14, color: colors[4], drilldown: { name: 'Opera versions', categories: ['Opera 9.x', 'Opera 10.x', 'Opera 11.x'], data: [ 0.12, 0.37, 1.65], color: colors[4] } }]; var browserData = []; var versionsData = []; var i, j; var dataLen = data.length; var drillDataLen; var brightness; // Build the data arrays for (i = 0; i < dataLen; i += 1) { // add browser data browserData.push({ name: categories[i], y: data[i].y, color: data[i].color }); // add version data drillDataLen = data[i].drilldown.data.length; for (j = 0; j < drillDataLen; j += 1) { brightness = 0.2 - (j / drillDataLen) / 5; versionsData.push({ name: data[i].drilldown.categories[j], y: data[i].drilldown.data[j], color: Highcharts.Color(data[i].color).brighten(brightness).get() }); } } var chart = { type: pie }; var title = { text: 'Browser market share, April, 2011' }; var yAxis = { title: { text: 'Total percent market share' } }; var tooltip = { valueSuffix: '%' }; var plotOptions = { pie: { shadow: false, center: ['50%', '50%'] } }; var series= [{ name: 'Browsers', data: browserData, size: '60%', dataLabels: { formatter: function () { return this.y > 5 ? this.point.name : null; }, color: 'white', distance: -30 } }, { name: 'Versions', data: versionsData, size: '80%', innerSize: '60%', dataLabels: { formatter: function () { // display only if larger than 1 return this.y > 1 ? '' + this.point.name + ': ' + this.y + '%' : null; } } } ]; var json = {}; json.chart = chart; json.title = title; json.yAxis = yAxis; json.tooltip = tooltip; json.series = series; json.plotOptions = plotOptions; $('#container').highcharts(json); }); </script> </body> </html>
The above example output is: