---
{
	"title": "Graphiques - Simple",
	"language": "fr",
	"category": "Plugiciels",
	"description": "Génère des graphiques à partir de données d’un tableau.",
	"tag": "charts",
	"parentdir": "charts",
	"altLangPrefix": "charts",
	"dateModified": "2015-03-10"
}
---

<ul>
	<li><a href="charts-fr.html">Graphiques - Simple (actuelle)</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</a></li>
</ul>

<hr />

<span class="wb-prettify all-pre"></span>
<section>
	<h2>Par défaut</h2>
	<p><code>&lt;table class=&quot;wb-charts table&quot;&gt;</code></p>

	<table class="wb-charts table">
		<caption>Nombre de page par objectif principal et par audience</caption>
		<tr>
			<td></td>
			<th>Éducative</th>
			<th>Tâches</th>
			<th>Navigation</th>
			<th>Soutien</th>
			<th>Information</th>
			<th>Entreprise</th>
		</tr>
		<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>
	</table>
</section>

<section>
	<h2>Graphique en région</h2>
	<p><code>&lt;table class=&quot;wb-charts wb-charts-area table&quot;&gt;</code></p>

	<table class="wb-charts wb-charts-area table">
		<caption>Nombre de page par objectif principal et par audience</caption>
		<tr>
			<td></td>
			<th>Éducative</th>
			<th>Tâches</th>
			<th>Navigation</th>
			<th>Soutien</th>
			<th>Information</th>
			<th>Entreprise</th>
		</tr>
		<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>
	</table>
</section>

<section>
	<h2>Graphiques à barres</h2>
	<p><code>&lt;table class=&quot;wb-charts wb-charts-bar table&quot;&gt;</code></p>

	<table class="wb-charts wb-charts-bar table">
		<caption>Nombre de page par objectif principal et par audience</caption>
		<tr>
			<td></td>
			<th>Éducative</th>
			<th>Tâches</th>
			<th>Navigation</th>
			<th>Soutien</th>
			<th>Information</th>
			<th>Entreprise</th>
		</tr>
		<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>
	</table>
</section>

<section>
	<h2>Graphiques à secteurs</h2>
	<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>Nombre de page par objectif principal et par audience</caption>
		<tr>
			<td></td>
			<th>Éducative</th>
			<th>Tâches</th>
			<th>Navigation</th>
			<th>Soutien</th>
			<th>Information</th>
			<th>Entreprise</th>
		</tr>
		<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>
	</table>
</section>

<section>
	<h2>Graphiques à secteurs avec des étiquettes</h2>
	<p><code>&lt;table class=&quot;wb-charts wb-charts-pie table&quot;&gt;</code></p>

	<p>Parfois certainnes etiquettes peuvent [etre superposé s'il y a trop de secteur ou si deux secteurs sont trop raproché. Dans le cas ou les etiquette sont superposé, vous devriez considérer d'organiser le visuel de vos données dans un autre type de graphique.</p>
	<p>Veuillez consulter la documentation pour connaitre tous les options configurable pour le graphique a secteur avec des étiquettes.</p>

	<table class="wb-charts wb-charts-slicelegend table">
		<caption>Nombre de page par objectif principal et par audience</caption>
		<tr>
			<td></td>
			<th>Éducative</th>
			<th>Tâches</th>
			<th>Navigation</th>
			<th>Soutien</th>
			<th>Information</th>
			<th>Entreprise</th>
		</tr>
		<tr>
			<th>Entreprise</th>
			<td>60</td>
			<td>10</td>
			<td>20</td>
			<td>90</td>
			<td>50</td>
			<td>8</td>
		</tr>
	</table>
</section>



<section>
	<h2>Tableau de données utilisé</h2>

	<table class="table">
		<caption>Nombre de page par objectif principal et par audience</caption>
		<tr>
			<td></td>
			<th>Éducative</th>
			<th>Tâches</th>
			<th>Navigation</th>
			<th>Soutien</th>
			<th>Information</th>
			<th>Entreprise</th>
		</tr>
		<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>
	</table>
	<details>
		<summary>Visualiser le code</summary>
		<pre><code>&lt;table class="table"&gt;
	&lt;caption&gt;Nombre de page par objectif principal et par audience&lt;/caption&gt;
	&lt;tr&gt;
		&lt;td&gt;&lt;/td&gt;
		&lt;th&gt;Éducative&lt;/th&gt;
		&lt;th&gt;Tâches&lt;/th&gt;
		&lt;th&gt;Navigation&lt;/th&gt;
		&lt;th&gt;Soutien&lt;/th&gt;
		&lt;th&gt;Information&lt;/th&gt;
		&lt;th&gt;Entreprise&lt;/th&gt;
	&lt;/tr&gt;
	&lt;tr&gt;
		&lt;th&gt;Général&lt;/th&gt;
		&lt;td&gt;2&lt;/td&gt;
		&lt;td&gt;0&lt;/td&gt;
		&lt;td&gt;20&lt;/td&gt;
		&lt;td&gt;4&lt;/td&gt;
		&lt;td&gt;100&lt;/td&gt;
		&lt;td&gt;50&lt;/td&gt;
	&lt;/tr&gt;
	&lt;tr&gt;
		&lt;th&gt;Étudiants&lt;/th&gt;
		&lt;td&gt;2&lt;/td&gt;
		&lt;td&gt;2&lt;/td&gt;
		&lt;td&gt;1&lt;/td&gt;
		&lt;td&gt;5&lt;/td&gt;
		&lt;td&gt;50&lt;/td&gt;
		&lt;td&gt;0&lt;/td&gt;
	&lt;/tr&gt;
	&lt;tr&gt;
		&lt;th&gt;Entreprise&lt;/th&gt;
		&lt;td&gt;60&lt;/td&gt;
		&lt;td&gt;10&lt;/td&gt;
		&lt;td&gt;20&lt;/td&gt;
		&lt;td&gt;90&lt;/td&gt;
		&lt;td&gt;50&lt;/td&gt;
		&lt;td&gt;8&lt;/td&gt;
	&lt;/tr&gt;
	&lt;tr&gt;
		&lt;th&gt;Professionnel&lt;/th&gt;
		&lt;td&gt;46&lt;/td&gt;
		&lt;td&gt;26&lt;/td&gt;
		&lt;td&gt;5&lt;/td&gt;
		&lt;td&gt;101&lt;/td&gt;
		&lt;td&gt;200&lt;/td&gt;
		&lt;td&gt;142&lt;/td&gt;
	&lt;/tr&gt;
	&lt;tr&gt;
		&lt;th&gt;Avocat&lt;/th&gt;
		&lt;td&gt;0&lt;/td&gt;
		&lt;td&gt;2&lt;/td&gt;
		&lt;td&gt;4&lt;/td&gt;
		&lt;td&gt;0&lt;/td&gt;
		&lt;td&gt;300&lt;/td&gt;
		&lt;td&gt;300&lt;/td&gt;
	&lt;/tr&gt;
&lt;/table&gt;</code></pre>
	</details>
</section>
