Highcharts - Graphique en demi-cercle en anneau
Voici un exemple de graphique à secteurs de base.
Nous avons déjà vu la configuration utilisée pour dessiner un graphique dans le chapitre Syntaxe de configuration Highcharts .
Un exemple de graphique à secteurs de base est donné ci-dessous.
Configurations
Voyons maintenant les configurations / étapes supplémentaires prises.
séries
Configurez le type de série pour qu'il soit basé sur un secteur. series.typedécide du type de série du graphique. Ici, la valeur par défaut est "line". Configurez la taille de la tarte en utilisant innerSize comme innerSize: '50% '.
var series = {
type: 'pie',
innerSize: '50%'
};Exemple
highcharts_pie_semicircle_donut.htm
<html>
<head>
<title>Highcharts Tutorial</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script src = "https://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>Résultat
Vérifiez le résultat.