Google Charts verwenden
Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Google Charts bietet die perfekte Möglichkeit, Daten auf Ihrer Website zu visualisieren.
Von einfachen Liniendiagrammen bis hin zu komplexen hierarchischen Strukturkarten bietet die Diagrammgalerie eine Vielzahl sofort einsatzbereiter Diagrammtypen.
Die am häufigsten verwendete Methode für die Verwendung von Google Charts ist einfaches JavaScript, das du in deine Webseite einbettest. Sie laden einige Google-Diagrammbibliotheken, listen die Daten auf, die im Diagramm dargestellt werden sollen, wählen Optionen zum Anpassen des Diagramms aus und erstellen schließlich ein Diagrammobjekt mit einer von Ihnen ausgewählten id.
Später auf der Webseite erstellen Sie dann ein <div>-Element mit dieser id, um das Google-Diagramm anzuzeigen.
Das ist alles, was du brauchst, um loszulegen.
Diagramme werden als JavaScript-Klassen dargestellt und in Google Diagramme stehen Ihnen viele Diagrammtypen zur Verfügung.
In der Regel haben Sie alles, was Sie brauchen – und Sie können ein Diagramm an Ihre Website anpassen. Diagramme sind äußerst interaktiv und stellen Ereignisse bereit, mit denen Sie sie verknüpfen können, um komplexe Dashboards oder andere in Ihre Webseite integrierte Funktionen zu erstellen.
Diagramme werden mit HTML5/SVG-Technologie gerendert, um browserübergreifende Kompatibilität zu bieten (einschließlich VML für ältere IE-Versionen) und plattformübergreifende Portabilität auf iPhones, iPads und Android. Ihre Nutzer müssen sich nie mit Plug-ins oder Software beschäftigen.
Wenn sie einen Webbrowser haben, können sie Ihre Diagramme sehen.
Alle Diagrammtypen werden mit der Klasse DataTable mit Daten gefüllt. So können Sie beim Experimentieren einfach zwischen den Diagrammtypen wechseln, um die ideale Darstellung zu finden.
Die DataTable bietet Methoden zum Sortieren, Ändern und Filtern von Daten. Sie kann direkt auf Ihrer Webseite, in einer Datenbank oder über einen beliebigen Datenanbieter ausgefüllt werden, der das Diagrammtools-Datenquellenprotokoll unterstützt.
Dieses Protokoll enthält eine SQL-ähnliche Abfragesprache und wird von Google Tabellen, Google Fusion Tables und Datendrittanbietern wie SalesForce implementiert.
Du kannst das Protokoll sogar auf deiner eigenen Website implementieren und Datenanbieter für andere Dienste werden.
Sie möchten Ihr erstes Diagramm erstellen? Kurzanleitung ansehen
Unsere Tools entwickeln sich ständig weiter, um Ihre Anforderungen besser zu erfüllen. Ihr Feedback hilft uns dabei, die richtigen Funktionen zu entwickeln.
Tritt unserer Diskussionsgruppe bei.
Sofern nicht anders angegeben, sind die Inhalte dieser Seite unter der Creative Commons Attribution 4.0 License und Codebeispiele unter der Apache 2.0 License lizenziert. Weitere Informationen finden Sie in den Websiterichtlinien von Google Developers. Java ist eine eingetragene Marke von Oracle und/oder seinen Partnern.
Zuletzt aktualisiert: 2024-07-10 (UTC).
[null,null,["Zuletzt aktualisiert: 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)."]]
