Highcharts semicerchio ciambella
L'esempio seguente illustra il semicerchio ciambella.
Nella sezione precedente che già conosciamo Highcharts sintassi di configurazione di base. Diamo un'occhiata ad altre configurazioni.
configurazione
configurazione serie
Set serie di type torta series.type descrive il tipo di dati della colonna. Il valore di default è "linea". Configurazione dimensioni torta utilizzando la proprietà innerSize e impostare innerSize: '50% '.
var series = { type: 'pie', innerSize: '50%' };
Esempi
Nome file: 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>
L'output sopra esempio è: