Utiliser Google Charts
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Google Charts est un outil idéal pour visualiser les données de votre site Web.
Des simples graphiques en courbes aux arborescences hiérarchiques complexes, la galerie de graphiques fournit un grand nombre de types de graphiques prêts à l'emploi.
L'utilisation de Google Charts est la plus courante avec un code JavaScript simple que vous intégrez à votre page Web. Chargez des bibliothèques Google Charts, répertoriez les données à représenter dans le graphique, sélectionnez des options pour personnaliser votre graphique, puis créez un objet de graphique avec un id de votre choix.
Ensuite, dans la page Web, vous allez créer un tag <div> avec cet id pour afficher le graphique Google.
C'est tout ce dont vous avez besoin pour commencer.
Les graphiques sont présentés comme des classes JavaScript, et Google Charts vous fournit de nombreux types de graphiques.
C'est généralement l'apparence qui vous convient. Vous pouvez toujours personnaliser un graphique en fonction de l'apparence de votre site Web. Les graphiques sont très interactifs et présentent des événements qui vous permettent de les connecter pour créer des tableaux de bord complexes ou d'autres expériences intégrées à votre page Web.
Les graphiques sont affichés à l'aide de la technologie HTML5/SVG pour assurer la compatibilité multinavigateurs (y compris VML pour les anciennes versions d'IE) et la portabilité multiplate-forme sur les iPhone, les iPad et Android. Vos utilisateurs n'auront jamais à manipuler de plug-ins ni de logiciels.
S'ils disposent d'un navigateur Web, ils peuvent voir vos graphiques.
Tous les types de graphiques sont remplis avec des données à l'aide de la classe DataTable, ce qui vous permet de basculer facilement entre les différents types de graphiques lorsque vous effectuez des tests pour trouver l'apparence idéale.
DataTable fournit des méthodes de tri, de modification et de filtrage des données. Elle peut être alimentée directement à partir de votre page Web, d'une base de données ou de tout fournisseur de données compatible avec le protocole Chart Tools Datasource.
Ce protocole, qui inclut un langage de requête de type SQL, est mis en œuvre par Google Sheets, Google Fusion Tables et des fournisseurs de données tiers tels que SalesForce.
Vous pouvez même implémenter le protocole sur votre propre site Web et devenir fournisseur de données pour d'autres services.
Prêt à créer votre premier graphique ? Consultez le guide de démarrage rapide.
Nos outils évoluent constamment pour mieux répondre à vos besoins. Nous tenons compte de vos commentaires pour nous aider à déterminer quelles fonctionnalités inclure en priorité.
Rejoignez notre groupe de discussion.
Sauf indication contraire, le contenu de cette page est régi par une licence Creative Commons Attribution 4.0, et les échantillons de code sont régis par une licence Apache 2.0. Pour en savoir plus, consultez les Règles du site Google Developers. Java est une marque déposée d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2024/07/10 (UTC).
[null,null,["Dernière mise à jour le 2024/07/10 (UTC)."],[[["\u003cp\u003eGoogle Charts offers a wide variety of interactive and customizable chart types to visualize data on your website.\u003c/p\u003e\n"],["\u003cp\u003eEmbedding charts is straightforward using simple JavaScript that loads libraries, specifies data, customizes options, and creates a chart object within a div element.\u003c/p\u003e\n"],["\u003cp\u003eCharts are highly interactive, supporting events, dashboards, and integration with web pages for enhanced user experiences.\u003c/p\u003e\n"],["\u003cp\u003eGoogle Charts uses HTML5/SVG technology for cross-browser and cross-platform compatibility, ensuring accessibility for all users.\u003c/p\u003e\n"],["\u003cp\u003eData population is handled by the DataTable class, enabling easy switching between chart types and providing methods for data manipulation and sourcing.\u003c/p\u003e\n"]]],[],null,["# Using Google Charts\n\nGoogle Charts provides a perfect way to visualize data on your website.\nFrom simple line charts to complex hierarchical tree maps, the\n[chart gallery](/chart/interactive/docs/gallery)\nprovides a large number of ready-to-use chart types.\n\nThe most common way to use Google Charts is with simple JavaScript\nthat you embed in your web page. You load some Google Chart libraries,\nlist the data to be charted, select options to customize your chart,\nand finally create a chart object with an id that you choose.\nThen, later in the web page, you create a \\\u003cdiv\\\u003e\nwith that id to display the Google Chart.\n\nThat's all you need to [get started](/chart/interactive/docs/quick_start).\n\nCharts are exposed as JavaScript classes, and Google Charts provides\n[many chart types](/chart/interactive/docs/gallery) for you to use.\nThe default appearance will usually be all you need, and you can always\n[customize a chart](/chart/interactive/docs/customizing_charts)\nto fit the look and feel of your website. Charts are highly interactive and expose\n[events](/chart/interactive/docs/events) that let you connect them to create complex\n[dashboards](/chart/interactive/docs/gallery/controls) or other experiences\n[integrated with your\nwebpage](/chart/interactive/docs/examples#full_html_page_example).\nCharts are rendered using HTML5/SVG technology to provide cross-browser compatibility\n(including VML for older IE versions) and cross platform portability to iPhones,\niPads, and Android. Your users will never have to mess with plugins or any software.\nIf they have a web browser, they can see your charts.\n\nAll chart types are populated with data using the\n[DataTable](/chart/interactive/docs/reference#DataTable) class,\nmaking it easy to switch between chart types as you experiment to find the ideal appearance.\nThe DataTable provides methods for sorting, modifying, and filtering data, and can be\npopulated directly from your web page, a database, or any data provider supporting the\n[Chart Tools Datasource](/chart/interactive/docs/queries) protocol.\n(That protocol includes a SQL-like query language and is implemented by Google Spreadsheets,\nGoogle Fusion Tables and third party data providers such as SalesForce.\nYou can even implement the protocol on your own website and become a data provider\nfor other services.)\n\n**Ready to create your first chart? Visit the\n[quickstart](/chart/interactive/docs/quick_start).**\n\nOur tools are constantly evolving to better address your needs;\nwe depend on your feedback to help us prioritize which features to include.\nJoin our [discussion group](http://groups.google.com/group/google-visualization-api)."]]
