j-DonutChart

jComponent 20 · jcomponent@20 component Exemple chargé avec jComponent 20

Configuration :

tooltip {Boolean} active l'info-bulle (par défaut : true)
format {String} un modèle (Tangular) pour le rendu de l'info-bulle (par défaut : {{ value | format(0) }})
presentation {Boolean} active le mode présentation (par défaut : true)
select {String} un chemin vers la méthode si un value est sélectionné
redraw {String} un chemin vers la méthode si le graphique est redessiné
animate {Boolean} active/désactive les animations (par défaut : false)
size {Number/String} largeur/hauteur du beignet (par défaut : 0 = auto) ou string est considéré comme un élément parent
highlight {Boolean} active/désactive la mise en évidence des pièces (par défaut : true)
margin {Number} ajoute une marge à size (par défaut : 0)

Utilisez-le avec <ui-component name="donutchart">. Lorsque le composant n'est pas encore chargé, jComponent le télécharge lors de la première utilisation depuis l'adresse dans DEF.fallback (le CDN Componentator par défaut). Auteur : Peter Širka. Source : le référentiel de composants Componentator, licence MIT.

example.html

<div class="container">
	<div class="row">
		<div class="col-xs-6">
			<ui-component name="donutchart" path="values"></ui-component>
		</div>
		<div class="col-xs-6">
			<div class="row">
				<div class="col-xs-6">
					<ui-component name="donutchart" path="values"></ui-component>
				</div>
				<div class="col-xs-6">
					<ui-component name="donutchart" path="values"></ui-component>
				</div>
			</div>
			<br />
			<div class="row">
				<div class="col-xs-6">
					<ui-component name="donutchart" path="values"></ui-component>
				</div>
				<div class="col-xs-6">
					<ui-component name="donutchart" path="values" config="animate:false"></ui-component>
				</div>
			</div>
		</div>
	</div>
</div>

<script>
	var values = [{ name: 'A', value: 10 }, { name: 'B', value: 4 }, { name: 'C', value: 20 }, { name: 'D', value: 8 }];
</script>