Highcharts semicírculo del buñuelo
El siguiente ejemplo ilustra la rosquilla semi-círculo.
En la sección anterior que ya sabemos Highcharts sintaxis de configuración básica. Veamos las otras configuraciones.
configuración
configuración en serie
Establecer serie de atributo de tipo pastel series.type describe el tipo de datos de la columna. El valor por defecto es "línea". Configuración de tamaño tarta de uso de la propiedad tamaño interno y establecer tamaño interno: '50% '.
var series = { type: 'pie', innerSize: '50%' };
Ejemplos
Nombre del archivo: highcharts_pie_semicircle_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 chart = { plotBackgroundColor: null, plotBorderWidth: 0, plotShadow: false }; var title = { text: 'Browser<br>shares', align: 'center', verticalAlign: 'middle', y: 50 }; var tooltip = { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }; var plotOptions = { pie: { dataLabels: { enabled: true, distance: -50, style: { fontWeight: 'bold', color: 'white', textShadow: '0px 1px 2px black' } }, startAngle: -90, endAngle: 90, center: ['50%', '75%'] } }; var series= [{ type: 'pie', name: 'Browser share', innerSize: '50%', data: [ ['Firefox', 45.0], ['IE', 26.8], ['Chrome', 12.8], ['Safari', 8.5], ['Opera', 6.2], { name: 'Others', y: 0.7, dataLabels: { enabled: false } } ] }]; var json = {}; json.chart = chart; json.title = title; json.tooltip = tooltip; json.series = series; json.plotOptions = plotOptions; $('#container').highcharts(json); }); </script> </body> </html>
La salida del ejemplo anterior es: