Graphiques - Personalisation de diagramme circulaire

Vous cherchez la BOEW v3.1?

À partir du 23 septembre 2014, la version 3.1 de la Boîte à outils de l'expérience Web n'est plus supportée. Le code source et la documentation ont été déplacés vers le dépôt wet-boew-legacy.

Préréglage de beigne wb-charts-donut

Visualiser le code 
// PVI - La configuration en beigne est déjà définie par défauts, ceci est seulement un exemple afin de vous aider à le reproduire dans votre préréglage personalisé.
window[ "wb-charts" ] = {
	flot: {
		donut: {
			series: {
				pie: {
					show: true,
					radius: 1,
					label: {
						show: true,
						radius: 1,
						threshold: 0.08
					},
					tilt: 0.5,
					innerRadius: 0.45,
					startAngle: 1
				}
			},
			grid: {
				hoverable: true
			}
		},
	charts: {
		donut: {
			decimal: 1
		}
	}
};
Préréglage de beigne wb-charts-donut
Séries 1 Séries 2 Séries 3 Séries 4 Séries 5 Séries 6 Séries 7 Séries 8 Séries 9
Défaut 7.7 10.10 4.4 14.14 15.15 7.7 23.23 8.8 12.12

Par défaut

Paramètres de Flot :

data-flot = '{ }'
Défauts
Séries 1 Séries 2 Séries 3 Séries 4 Séries 5 Séries 6 Séries 7 Séries 8 Séries 9
Défaut 7 10 4 14 15 7 23 8 13

Étiquettage des secteurs

Paramètres de Flot :

data-flot = '{
	"series": {
		"pie": {
			"radius": 1,
			"label": {
				"show": true,
				"radius": 1
			}
		}
	}
}'
<table class="wb-charts wb-charts-pie table" data-flot='{"series": { "pie": { "radius": 1,"label": { "radius": 1,"show": true } } } }'>
Étiquettage des secteurs
Séries 1 Séries 2 Séries 3 Séries 4 Séries 5 Séries 6 Séries 7 Séries 8 Séries 9
Défaut 7 10 4 14 15 7 23 8 13

Trou de beigne

Paramètres de Flot :

data-flot = '{
	"series": {
		"pie": {
			"radius": 1,
			"label": {
				"show": true,
				"radius": 1
			},
			"innerRadius": 0.45
		}
	}
}'
<table class="wb-charts wb-charts-pie table" data-flot='{"series": { "pie": { "radius": 1,"label": { "radius": 1,"show": true }, "innerRadius": 0.45 } } }'>
Trou de beigne
Séries 1 Séries 2 Séries 3 Séries 4 Séries 5 Séries 6 Séries 7 Séries 8 Séries 9
Défaut 7 10 4 14 15 7 23 8 13

Inclinaison du graphique

Paramètres de Flot :

data-flot = '{
	"series": {
		"pie": {
			"radius": 1,
			"label": {
				"show": true,
				"radius": 1
			},
			"innerRadius": 0.45,
			"tilt": 0.5
		}
	}
}'
<table class="wb-charts wb-charts-pie table" data-flot='{"series": { "pie": { "radius": 1,"label": { "radius": 1,"show": true }, "innerRadius": 0.45, "tilt": 0.5 } } }'>
Inclinaison du graphique
Séries 1 Séries 2 Séries 3 Séries 4 Séries 5 Séries 6 Séries 7 Séries 8 Séries 9
Défaut 7 10 4 14 15 7 23 8 13

Graphique rectangulaire

Paramètres de Flot :

data-flot = '{
	"series": {
		"pie": {
			"radius": 5000,
			"label": {
				"show": true,
				"radius": 1
			},
			"innerRadius": 0.45,
			"tilt": 0.5
		}
	}
}'
<table class="wb-charts wb-charts-pie wb-charts-nolegend" data-flot='{"series": { "pie": { "radius": 5000,"label": { "radius": 1,"show": true }, "innerRadius": 0.45, "tilt": 0.5 } } }'>
Graphique rectangulaire
Séries 1 Séries 2 Séries 3 Séries 4 Séries 5 Séries 6 Séries 7 Séries 8 Séries 9
Défaut 7 10 4 14 15 7 23 8 13

Effet de survol

Paramètres de Flot :

data-flot = '{
	"series": {
		"pie": {
			"radius": 1,
			"label": {
				"show": true,
				"radius": 1
			},
			"innerRadius": 0.45,
			"tilt": 0.5
		}
	},
	"grid": {
		"hoverable": true
	}
}'
<table class="wb-charts wb-charts-pie table" data-flot='{"series": { "pie": { "radius": 1,"label": { "radius": 1,"show": true }, "innerRadius": 0.45, "tilt": 0.5 } }, "grid": { "hoverable": true } }'>
Effet de survol
Séries 1 Séries 2 Séries 3 Séries 4 Séries 5 Séries 6 Séries 7 Séries 8 Séries 9
Défaut 7.7 10.10 4.4 14.14 15.15 7.7 23.23 8.8 12.12

Precision décimal

Paramètres de plugiciel :

data-wb-charts = '{
	"decimal": 1
}'

Paramètres de Flot :

data-flot = '{
	"series": {
		"pie": {
			"radius": 1,
			"label": {
				"show": true,
				"radius": 1
			},
			"innerRadius": 0.45,
			"tilt": 0.5
		}
	},
	"grid": {
		"hoverable": true
	}
}'
<table class="wb-charts wb-charts-pie wb-charts-decimal-1 table" data-flot='{"series": { "pie": { "radius": 1,"label": { "radius": 1,"show": true }, "innerRadius": 0.45, "tilt": 0.5 } }, "grid": { "hoverable": true } }' data-wb-charts='{ "decimal": 1 }'>
Precision décimal
Séries 1 Séries 2 Séries 3 Séries 4 Séries 5 Séries 6 Séries 7 Séries 8 Séries 9
Défaut 7.7 10.10 4.4 14.14 15.15 7.7 23.23 8.8 12.12

Seuil d'étiquettage

Paramètres de plugiciel :

data-wb-charts = '{
	"decimal": 1
}'

Paramètres de Flot :

data-flot = '{
	"series": {
		"pie": {
			"radius": 1,
			"label": {
				"show": true,
				"radius": 1,
				"threshold": 0.08
			},
			"innerRadius": 0.45,
			"tilt": 0.5
		}
	},
	"grid": {
		"hoverable": true
	}
}'

<table class="wb-charts wb-charts-pie wb-charts-decimal-1 wb-charts-legendinline table" data-flot='{"series": { "pie": { "radius": 1,"label": { "radius": 1,"show": true, "threshold": 0.08 }, "innerRadius": 0.45, "tilt": 0.5 } }, "grid": { "hoverable": true } }' data-wb-charts='{ "decimal": 1 }'>
Seuil d'étiquettage
Séries 1 Séries 2 Séries 3 Séries 4 Séries 5 Séries 6 Séries 7 Séries 8 Séries 9
Défaut 7.7 10.10 4.4 14.14 15.15 7.7 23.23 8.8 12.12

Angle de démarrage

Paramètres de plugiciel :

data-wb-charts = '{
	"decimal": 1
}'

Paramètres de Flot :

data-flot = '{
	"series": {
		"pie": {
			"radius": 1,
			"label": {
				"show": true,
				"radius": 1,
				"threshold": 0.08
			},
			"innerRadius": 0.45,
			"tilt": 0.5,
			"startAngle": 1
		}
	},
	"grid": {
		"hoverable": true
	}
}'
<table class="wb-charts wb-charts-pie wb-charts-decimal-1 wb-charts-legendinline table" data-flot='{"series": { "pie": { "radius": 1,"label": { "radius": 1,"show": true, "threshold": 0.08 }, "innerRadius": 0.45, "tilt": 0.5, "startAngle": 1 } }, "grid": { "hoverable": true } }' data-wb-charts='{ "decimal": 1 }'>
Angle de démarrage
Séries 1 Séries 2 Séries 3 Séries 4 Séries 5 Séries 6 Séries 7 Séries 8 Séries 9
Défaut 7.7 10.10 4.4 14.14 15.15 7.7 23.23 8.8 12.12
Date de modification :