---
{
	"title": "Graphiques - Scénarios d'essai spécifiques",
	"language": "fr",
	"category": "Plugiciels",
	"description": "Scénarios spécifiques à des fins d'essaie.",
	"tag": "charts",
	"parentdir": "charts",
	"altLangPrefix": "testing",
	"dateModified": "2015-03-10"
}
---

<ul>
	<li><a href="charts-fr.html">Graphiques - Simple</a></li>
	<li><a href="labelsandreferencevalue-fr.html">Étiquettage et valeur de référence</a></li>
	<li><a href="custom-fr.html">Personalisation, préréglages personnalisés et plusieurs types de graphique</a></li>
	<li><a href="piecustom-fr.html">Personalisation de diagrame circulaire</a></li>
	<li><a href="testing-fr.html">Scénarios d'essai spécifiques (actuelle)</a></li>
</ul>

<hr />

<section>
	<h2>Diagrame circulaire à 100&#160;%</h2>
	<p>Le graphique suivant devrait être un cercle plein d'où la légende contient seulement une valeur. Le texte mis en <em>évidence</em> dans le titre du tableau devrait être copier dans le titre du graphique (<code>&lt;figcaption&gt;</code>) et aussi dans le lien contenu dans l'élément (<code>&lt;summary&gt;</code>) afin de consulter le tableau.</p>

	<p><code>&lt;table class=&quot;wb-charts wb-charts-pie table&quot;&gt;</code></p>

	<table class="wb-charts wb-charts-pie table">
		<caption>Tableau avec un article <em>(à 100&#160;%)</em></caption>
		<thead>
			<tr>
				<td></td>
				<th>Valeur</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>Voiture</th>
				<td>125</td>
			</tr>
		</tbody>
	</table>
</section>

<section>
	<h2>Étiquette et tableau analysé à contre sens</h2>

	<p>Les deux graphique suivant devrait produire le <strong>même graphique</strong> avec les étiquettes suivante:</p>

	<ul>
		<li><em>Besoins externe</em>, à la position de l'axe des x de 0 à 2</li>
		<li><em>Besoins redirigé</em>, à la position de l'axe des x 2 à 4</li>
		<li><em>Besoins interne</em>, à la position de l'axe des x 4 à 6</li>
	</ul>

	<p><code>&lt;table class=&quot;wb-charts table&quot; data-wb-charts='{&quot;labelposition&quot;: 1, &quot;noencapsulation&quot;: true}'&gt;</code></p>

	<table class="wb-charts table" data-wb-charts='{"labelposition": 1, "noencapsulation": true}'>
		<caption>Nombre de page par objectif principal et par audience</caption>
		<thead>
			<tr>
				<td rowspan="2"></td>
				<th colspan="2">Besoins externe</th>
				<th colspan="2">Besoins redirigé</th>
				<th colspan="2">Besoins interne</th>
			</tr>

			<tr>
				<th>Éducative</th>
				<th>Tâches</th>
				<th>Navigation</th>
				<th>Soutien</th>
				<th>Information</th>
				<th>Entreprise</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>Général</th>
				<td>2</td>
				<td>0</td>
				<td>20</td>
				<td>4</td>
				<td>100</td>
				<td>50</td>
			</tr>
			<tr>
				<th>Étudiants</th>
				<td>2</td>
				<td>2</td>
				<td>1</td>
				<td>5</td>
				<td>50</td>
				<td>0</td>
			</tr>
			<tr>
				<th>Entreprise</th>
				<td>60</td>
				<td>10</td>
				<td>20</td>
				<td>90</td>
				<td>50</td>
				<td>8</td>
			</tr>
			<tr>
				<th>Professionnel</th>
				<td>46</td>
				<td>26</td>
				<td>5</td>
				<td>101</td>
				<td>200</td>
				<td>142</td>
			</tr>
			<tr>
				<th>Avocat</th>
				<td>0</td>
				<td>2</td>
				<td>4</td>
				<td>0</td>
				<td>300</td>
				<td>300</td>
			</tr>
		</tbody>
	</table>

	<hr />

	<p><code>&lt;table class=&quot;wb-charts table&quot; data-wb-charts='{&quot;labelposition&quot;: 1, &quot;noencapsulation&quot;: true, &quot;reversettblparsing&quot;: true}'&gt;</code></p>

	<table class="wb-charts table" data-wb-charts='{"labelposition": 1, "noencapsulation": true, "reversettblparsing": true}'>
	<caption>Nombre de page par objectif principal et par audience</caption>
		<thead>
			<tr>
				<td colspan="2"></td>
				<th>Général</th>
				<th>Étudiants</th>
				<th>Entreprise</th>
				<th>Professionnel</th>
				<th>Avocat</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th rowspan="2">Besoins externe</th>
				<th>Éducative</th>
				<td>2</td>
				<td>2</td>
				<td>60</td>
				<td>46</td>
				<td>0</td>
			</tr>
			<tr>
				<th>Tâches</th>
				<td>0</td>
				<td>2</td>
				<td>10</td>
				<td>26</td>
				<td>2</td>
			</tr>
			<tr>
				<th rowspan="2">Besoins redirigé</th>
				<th>Navigation</th>
				<td>20</td>
				<td>1</td>
				<td>20</td>
				<td>5</td>
				<td>4</td>
			</tr>
			<tr>
				<th>Soutien</th>
				<td>4</td>
				<td>5</td>
				<td>90</td>
				<td>101</td>
				<td>0</td>
			</tr>
			<tr>
				<th rowspan="2">Besoins interne</th>
				<th>Information</th>
				<td>100</td>
				<td>50</td>
				<td>50</td>
				<td>200</td>
				<td>300</td>
			</tr>
			<tr>
				<th>Entreprise</th>
				<td>50</td>
				<td>0</td>
				<td>8</td>
				<td>142</td>
				<td>300</td>
			</tr>
		</tbody>
	</table>
</section>

<section>
	<h2>Diagrame circulaire et tableau analysé à contre sens</h2>

	<p>Les deux tableaux suivant devrait produire le même diagrame circulaire. Il est possible que la largeur de chaques graphique soit différent.</p>

<p><code>&lt;table class=&quot;wb-charts wb-charts-pie table&quot; data-wb-charts='{ &quot;height&quot;: 500, &quot;decimal&quot;: 1 }'&gt;</code></p>

	<table class="wb-charts wb-charts-pie table" data-wb-charts='{ "height": 500, "decimal": 1 }'>
		<caption>Nombre de page ayant une tâche comme objectif principal et par audience</caption>
		<colgroup><col /></colgroup>
		<colgroup>
			<col />
			<col />
			<col />
			<col />
			<col />
		</colgroup>
		<thead>
			<tr>
				<td></td>
				<th>Général</th>
				<th>Étudiants</th>
				<th>Entreprise</th>
				<th>Professionnel</th>
				<th>Avocat</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>Tâches</th>
				<td>0</td>
				<td>2</td>
				<td>10</td>
				<td>26</td>
				<td>2</td>
			</tr>
		</tbody>
	</table>

	<hr />

	<p>Veuillez prendre note que l'éléments <code>&lt;colgroup&gt;</code> est requis afain de créer le graphique subséquant.</p>

	<p><code>&lt;table class=&quot;wb-charts wb-charts-pie table&quot; data-wb-charts='{ &quot;height&quot;: 500, &quot;decimal&quot;: 1, &quot;reversettblparsing&quot;: true }'&gt;</code></p>

	<table class="wb-charts wb-charts-pie table" data-wb-charts='{ "height": 500, "decimal": 1, "reversettblparsing": true }'>
		<caption>Nombre de page ayant une tâche comme objectif principal et par audience</caption>
		<colgroup><col /></colgroup>
		<colgroup><col /></colgroup>
		<tr>
			<td></td>
			<th>Tâches</th>
		</tr>
		<tr>
			<th>Général</th>
			<td>0</td>
		</tr>
		<tr>
			<th>Étudiants</th>
			<td>2</td>
		</tr>
		<tr>
			<th>Entreprise</th>
			<td>10</td>
		</tr>
		<tr>
			<th>Professionnel</th>
			<td>26</td>
		</tr>

		<tr>
			<th>Avocat</th>
			<td>2</td>
		</tr>
	</table>

	<pre><code>&lt;caption&gt;Nombre de page ayant une tâche comme objectif principal et par audience&lt;/caption&gt;
&lt;colgroup&gt;&lt;col /&gt;&lt;/colgroup&gt;
&lt;colgroup&gt;&lt;col /&gt;&lt;/colgroup&gt;
&lt;tr&gt;
	&lt;td&gt;&lt;/td&gt;
	&lt;th&gt;Tâches&lt;/th&gt;
&lt;/tr&gt;</code></pre>
</section>