Didacticiel : liaison de données entre un graphique et une base de données

Article
08/31/2012

Ce didacticiel montre comment lier des données provenant d'une base de données, utiliser des info-bulles et ajuster les étiquettes d'axe dans votre graphique.

Pour effectuer ce didacticiel, vous devez installer au préalable l'exemple de base de données OLTP AdventureWorks2008 dans une instance de SQL Server (par exemple SQL Server 2008 Express).Pour installer l'exemple de base de données, accédez à www.codeplex.com.

Liaison de données à partir d'une base de données

Vous liez en premier des données d'un contrôle de source de données au contrôle de graphique, puis liez des colonnes spécifiques de la source de données aux valeurs y et valeur X d'une série.

Pour lier des données d'une base de données à un graphique

Dans l'aire de conception de vos Windows Forms ou de votre application Web, déplacez le contrôle Chart en le faisant glisser à partir de la Boîte à outils :
Dans la fenêtre Propriétés du contrôle Chart, dans la catégorie Données, cliquez sur la propriété DataSourceID (ASP.NET) ou DataSource (Windows Forms), puis cliquez sur la flèche déroulante et sélectionnez <Nouvelle source de données…>.
Dans la page Choisir un type de source de données, sélectionnez Base de données, puis cliquez sur Suivant.
Dans la page Choisir votre connexion de données, cliquez sur Nouvelle connexion.
Dans la boîte de dialogue Ajouter une connexion, assurez-vous que le champ Source de données a la valeur Microsoft SQL Server (SqlClient), puis fournissez le nom du serveur et le nom de base de données de la base de données AdventureWorks2008.
Cliquez sur Tester la connexion, puis sur OK.
Cliquez ensuite sur Suivant deux fois.
Dans la page Configurer l'instruction Select, sélectionnez Spécifiez une instruction SQL personnalisée ou une procédure stockée, puis cliquez sur Suivant.

Copiez et collez la requête suivante dans le champ Instruction SQL, puis cliquez sur Suivant.

select LastName, SalesYTD, SalesLastYear 
  from HumanResources.Employee as e
  inner join Person.Person as p on e.BusinessEntityID = p.BusinessEntityID
  inner join Sales.SalesPerson as s on e.BusinessEntityID = s.BusinessEntityID

Cliquez sur Tester la requête, puis sur Terminer.

Une source de données SQL est maintenant liée au contrôle Chart avec les colonnes de données spécifiées dans la requête.

Pour lier des données aux valeurs X et Y dans le graphique

Ouvrez l'Éditeur de collections Series pour le contrôle Chart.
Dans la fenêtre Propriétés de la série par défaut, dans la catégorie Source de données, cliquez sur la propriété XValueMember, puis cliquez sur la flèche déroulante et sélectionnez LastName.

La liste déroulante XValueMember affiche toutes les colonnes retournées par la source de données liée au contrôle Chart.
Cliquez sur la propriété YValueMembers, puis cliquez sur la flèche déroulante et sélectionnez SalesYTD.

La valeur X de la série par défaut est maintenant liée à la colonne LastName, et la première valeur Y de la série par défaut est maintenant liée à la colonne SalesYTD.
Dans l'Éditeur de collections Series, cliquez sur Ajouter, puis procédez de la même façon pour la nouvelle série avec les valeurs suivantes :

Propriété

Valeur

XValueMember

LastName

YValueMembers

SalesLastYear
Cliquez sur OK.
Exécutez l'application.

Vous pouvez maintenant voir deux séries qui affichent des points de données remplis automatiquement à partir de la source de données.Vous pouvez également remarquer que le graphique n'affiche pas tous les employés ; en effet, le contrôle Chart ajuste automatiquement les étiquettes pour une meilleure lisibilité.

Propriété	Valeur
XValueMember	LastName
YValueMembers	SalesLastYear

Ajustement des étiquettes et des titres des axes

Vous utilisez la propriété de collection Axes de l'Éditeur de collections ChartArea pour personnaliser les étiquettes et les titres des axes de la zone de graphique.

Pour ajuster les étiquettes des axes et ajouter des titres

Ouvrez l'Éditeur de collections ChartArea pour le contrôle Chart.
Dans la fenêtre Propriétés de la zone de graphique par défaut, dans la catégorie Axes, cliquez sur la propriété de collection Axes, puis sur le bouton de sélection (…).L'Éditeur de collections Axis s'ouvre.

La collection Axes (tableau Axis) contient les axes de la zone de graphique.
Dans la fenêtre Propriétés de l'axe des X (primaire), dans la catégorie Étiquettes, développez la propriété LabelStyle, affectez la valeur 1 à la propriété Interval, puis vérifiez que la propriété IntervalStyle n'est pas définie.

Par conséquent, le contrôle Chart montre l'étiquette pour chaque point de données affiché.
Dans la catégorie Titre, affectez « Employé » à la propriété Title.
Dans la fenêtre Propriétés de l'axe des Y (primaire), dans la catégorie Titre, affectez « Ventes » à la propriété Title.
Cliquez sur OK à deux reprises.
Exécutez l'application.

Le contrôle Chart affiche maintenant chaque employé sur l'axe des X primaire en les disposant automatiquement selon un angle à 90 degrés.

Ajout d'info-bulles à la série

À présent, vous allez ajouter des info-bulles aux deux séries pour différencier les points de données.

Pour ajouter des info-bulles aux séries

Rouvrez l'Éditeur de collections Series pour le contrôle Chart.
Sélectionnez la première série.
Dans la fenêtre Propriétés de la première série, dans la catégorie Zone réactive, affectez « #VALX : #VAL - Ventes de cette année à la propriété Tooltip.

Notez que si vous cliquez sur le bouton de sélection dans le champ de valeur de la propriété Tooltip, l'Éditeur de mots clés de chaîne s'ouvre.Cette boîte de dialogue vous aide à créer une chaîne d'info-bulle avec des mots clés.
Dans la fenêtre Propriétés de la première série, dans la catégorie Zone réactive, affectez « #VALX : #VAL - Ventes de l'année dernière à la propriété Tooltip.
Cliquez sur OK.
Exécutez l'application, puis maintenez le curseur sur chaque point de données pour consulter son info-bulle.

Étape suivante

Vous savez maintenant lier des données provenant d'une base de données, utiliser des info-bulles et ajuster les étiquettes d'axe dans votre graphique.Pour apprendre à utiliser des événements pour personnaliser votre graphique, consultez Didacticiel : personnalisation d'un graphique avec des événements.

Voir aussi

Partager via