# Graphiques - Personalisation de diagramme circulaire

- Documentation
- Questions ou commentaires?

- Graphiques - Simple
- Étiquettage et valeur de référence
- Personalisation, préréglages personnalisés et plusieurs types de graphique
- Personalisation de diagrame circulaire (actuelle)
- Scénarios d'essai spécifiques

## 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 :
  2015-03-10