Builder für Liniendiagramme. Weitere Informationen finden Sie in der Google Charts-Dokumentation.
Hier ist ein Beispiel für das Erstellen eines Liniendiagramms. Die Daten werden aus einer Google-Tabelle importiert.
// Get sample data from a spreadsheet. const dataSourceUrl = 'https://docs.google.com/spreadsheet/tq?range=A1%3AG5' + '&key=0Aq4s9w_HxMs7dHpfX05JdmVSb1FpT21sbXd4NVE3UEE&gid=2&headers=-1'; const chartBuilder = Charts.newLineChart() .setTitle('Yearly Rainfall') .setXAxisTitle('Month') .setYAxisTitle('Rainfall (in)') .setDimensions(600, 500) .setCurveStyle(Charts.CurveStyle.SMOOTH) .setPointStyle(Charts.PointStyle.MEDIUM) .setDataSourceUrl(dataSourceUrl); const chart = chartBuilder.build();
Methoden
| Methode | Rückgabetyp | Kurzbeschreibung |
|---|---|---|
build() | Chart | Erstellt das Diagramm. |
reverse | Line | Kehrt die Darstellung von Reihen auf der Bereichsachse um. |
set | Line | Legt die Hintergrundfarbe für das Diagramm fest. |
set | Line | Legt die Farben für die Linien im Diagramm fest. |
set | Line | Legt den Stil fest, der für Kurven im Diagramm verwendet werden soll. |
set | Line | Legt die Datenquellen-URL fest, die verwendet wird, um Daten aus einer externen Quelle wie Google Sheets abzurufen. |
set | Line | Legt die Datentabelle fest, die für das Diagramm verwendet werden soll. Dazu wird ein DataTableBuilder verwendet. |
set | Line | Legt die Datentabelle fest, die die Linien für das Diagramm sowie die X-Achsenbeschriftungen enthält. |
set | Line | Legt die Definition der Datenansicht fest, die für das Diagramm verwendet werden soll. |
set | Line | Legt die Abmessungen für das Diagramm fest. |
set | Line | Hiermit wird die Position der Legende im Verhältnis zum Diagramm festgelegt. |
set | Line | Legt den Textstil der Diagrammlegende fest. |
set | Line | Legt erweiterte Optionen für dieses Diagramm fest. |
set | Line | Legt den Stil für Punkte in der Linie fest. |
set | Line | Legt den Bereich für das Diagramm fest. |
set | Line | Legt den Titel des Diagramms fest. |
set | Line | Legt den Textstil des Diagrammtitels fest. |
set | Line | Legt den Textstil der horizontalen Achse fest. |
set | Line | Fügt der horizontalen Achse einen Titel hinzu. |
set | Line | Legt den Textstil für den Titel der horizontalen Achse fest. |
set | Line | Legt den Textstil der vertikalen Achse fest. |
set | Line | Fügt der vertikalen Achse einen Titel hinzu. |
set | Line | Legt den Textstil für den Titel der vertikalen Achse fest. |
use | Line | Legt fest, dass die Bereichsachse logarithmisch skaliert wird. Dazu müssen alle Werte positiv sein. |
Detaillierte Dokumentation
build()
Erstellt das Diagramm.
Rückflug
Chart: Ein Diagrammobjekt, das in Dokumente oder UI-Elemente eingebettet oder als statisches Bild verwendet werden kann.
reverseCategories()
Kehrt die Darstellung von Reihen auf der Bereichsachse um. Bei Diagrammen mit vertikalem Bereich (z. B. Linien-, Flächen- oder Säulendiagrammen) wird die horizontale Achse von rechts nach links gezeichnet. Bei Diagrammen mit horizontalem Bereich (z. B. Balkendiagrammen) wird die vertikale Achse von oben nach unten gezeichnet. Bei Kreisdiagrammen werden die Segmente gegen den Uhrzeigersinn gezeichnet.
// Creates a pie chart builder and sets drawing of the slices in a // counter-clockwise manner. const builder = Charts.newPieChart(); builder.reverseCategories();
Rückflug
LineChartBuilder – Dieser Builder, nützlich für die Verkettung.
setBackgroundColor(cssValue)
Legt die Hintergrundfarbe für das Diagramm fest.
// Creates a line chart builder and sets the background color to gray const builder = Charts.newLineChart(); builder.setBackgroundColor('gray');
Parameter
| Name | Typ | Beschreibung |
|---|---|---|
css | String | Der CSS-Wert für die Farbe, z. B. "blue" oder "#00f". |
Rückflug
LineChartBuilder – Dieser Builder, nützlich für die Verkettung.
setColors(cssValues)
Legt die Farben für die Linien im Diagramm fest.
// Creates a line chart builder and sets the first two lines to be drawn in // green and red, respectively. const builder = Charts.newLineChart(); builder.setColors(['green', 'red']);
Parameter
| Name | Typ | Beschreibung |
|---|---|---|
css | String[] | Ein Array von CSS-Farbwerten, z. B. ["red", "#acf"]. Das n-te Element im Array stellt die Farbe der n-ten Linie im Diagramm dar. |
Rückflug
LineChartBuilder – Dieser Builder, nützlich für die Verkettung.
setCurveStyle(style)
Legt den Stil fest, der für Kurven im Diagramm verwendet werden soll. Zulässige Kurvenstile finden Sie unter CurveStyle.
// Creates a line chart builder and curves the lines in the chart. const builder = Charts.newLineChart(); builder.setCurveStyle(Charts.CurveStyle.SMOOTH);
Parameter
| Name | Typ | Beschreibung |
|---|---|---|
style | Curve | Der Stil für Kurven im Diagramm. |
Rückflug
LineChartBuilder – Dieser Builder, nützlich für die Verkettung.
Weitere Informationen
setDataSourceUrl(url)
Legt die Datenquellen-URL fest, die verwendet wird, um Daten aus einer externen Quelle wie Google Sheets abzurufen. Wenn eine Datenquellen-URL und eine DataTable angegeben werden, wird die Datenquellen-URL ignoriert.
Weitere Informationen zum Abfragen von Datenquellen finden Sie in der Google Charts-Dokumentation.
Parameter
| Name | Typ | Beschreibung |
|---|---|---|
url | String | Die Datenquellen-URL, einschließlich aller Suchparameter. |
Rückflug
LineChartBuilder – Dieser Builder, nützlich für die Verkettung.
setDataTable(tableBuilder)
Legt die Datentabelle fest, die für das Diagramm verwendet werden soll. Dazu wird ein DataTableBuilder verwendet. Dies ist eine praktische Methode zum Festlegen der Datentabelle, ohne dass build() aufgerufen werden muss.
Parameter
| Name | Typ | Beschreibung |
|---|---|---|
table | Data | Ein Tool zum Erstellen von Datentabellen. Im Rahmen dieses Aufrufs wird sofort eine neue Datentabelle erstellt. Alle weiteren Aktualisierungen des Builders werden daher nicht im Diagramm berücksichtigt. |
Rückflug
LineChartBuilder – Dieser Builder, nützlich für die Verkettung.
setDataTable(table)
Legt die Datentabelle fest, die die Linien für das Diagramm sowie die X-Achsenbeschriftungen enthält. Die erste Spalte muss ein String sein und die Labels für die horizontale Achse enthalten. Es können beliebig viele Spalten folgen, die alle numerisch sein müssen. Jede Spalte wird als separate Zeile dargestellt.
Parameter
| Name | Typ | Beschreibung |
|---|---|---|
table | Data | Die Datentabelle, die für das Diagramm verwendet werden soll. |
Rückflug
LineChartBuilder – Dieser Builder, nützlich für die Verkettung.
setDataViewDefinition(dataViewDefinition)
Legt die Definition der Datenansicht fest, die für das Diagramm verwendet werden soll.
Parameter
| Name | Typ | Beschreibung |
|---|---|---|
data | Data | Ein Objekt zur Definition der Datenansicht, das die Ansicht definiert, die für das Zeichnen des Diagramms aus der angegebenen Datenquelle abgeleitet werden soll. |
Rückflug
LineChartBuilder – Dieser Builder, nützlich für die Verkettung.
setDimensions(width, height)
Legt die Abmessungen für das Diagramm fest.
Parameter
| Name | Typ | Beschreibung |
|---|---|---|
width | Integer | Die Breite des Diagramms in Pixeln. |
height | Integer | Die Höhe des Diagramms in Pixeln. |
Rückflug
LineChartBuilder – Dieser Builder, nützlich für die Verkettung.
setLegendPosition(position)
Hiermit wird die Position der Legende im Verhältnis zum Diagramm festgelegt. Standardmäßig ist keine Legende vorhanden.
// Creates a line chart builder and sets the legend position to right. const builder = Charts.newLineChart(); builder.setLegendPosition(Charts.Position.RIGHT);
Parameter
| Name | Typ | Beschreibung |
|---|---|---|
position | Position | Die Position der Legende. |
Rückflug
LineChartBuilder – Dieser Builder, nützlich für die Verkettung.
setLegendTextStyle(textStyle)
Legt den Textstil der Diagrammlegende fest.
// Creates a line chart builder and sets it up for a blue, 26-point legend. const textStyleBuilder = Charts.newTextStyle().setColor('#0000FF').setFontSize(26); const style = textStyleBuilder.build(); const builder = Charts.newLineChart(); builder.setLegendTextStyle(style);
Parameter
| Name | Typ | Beschreibung |
|---|---|---|
text | Text | Der Textstil, der für die Diagrammlegende verwendet werden soll. |
Rückflug
LineChartBuilder – Dieser Builder, nützlich für die Verkettung.
setOption(option, value)
Legt erweiterte Optionen für dieses Diagramm fest. Verfügbare Optionen für dieses Diagramm Diese Methode hat keine Auswirkungen, wenn die angegebene Option ungültig ist.
// Build a line chart with a 1-second animation duration. const builder = Charts.newLineChart(); builder.setOption('animation.duration', 1000); const chart = builder.build();
Parameter
| Name | Typ | Beschreibung |
|---|---|---|
option | String | Die festzulegende Option. |
value | Object | Der festzulegende Wert. |
Rückflug
LineChartBuilder – Dieser Builder, nützlich für die Verkettung.
setPointStyle(style)
Legt den Stil für Punkte in der Linie fest. Standardmäßig haben Punkte keine besonderen Formatierungen und nur die Linie ist sichtbar.
// Creates a line chart builder and sets large point style. const builder = Charts.newLineChart(); builder.setPointStyle(Charts.PointStyle.LARGE);
Parameter
| Name | Typ | Beschreibung |
|---|---|---|
style | Point | Der Stil, der für Punkte in der Linie verwendet werden soll. |
Rückflug
LineChartBuilder – Dieser Builder, nützlich für die Verkettung.
Weitere Informationen
setRange(start, end)
Legt den Bereich für das Diagramm fest.
Wenn Datenpunkte außerhalb des Bereichs liegen, wird der Bereich erweitert, um diese Datenpunkte einzuschließen.
Parameter
| Name | Typ | Beschreibung |
|---|---|---|
start | Number | Der Wert für die unterste Rasterlinie der Bereichsachse. |
end | Number | Der Wert für die oberste Rasterlinie der Bereichsachse. |
Rückflug
LineChartBuilder – Dieser Builder, nützlich für die Verkettung.
setTitle(chartTitle)
Legt den Titel des Diagramms fest. Der Titel wird zentriert über dem Diagramm angezeigt.
// Creates a line chart builder and title to 'My Line Chart'. const builder = Charts.newLineChart(); builder.setTitle('My Line Chart');
Parameter
| Name | Typ | Beschreibung |
|---|---|---|
chart | String | den Diagrammtitel. |
Rückflug
LineChartBuilder – Dieser Builder, nützlich für die Verkettung.
setTitleTextStyle(textStyle)
Legt den Textstil des Diagrammtitels fest.
// Creates a line chart builder and sets it up for a blue, 26-point title. const textStyleBuilder = Charts.newTextStyle().setColor('#0000FF').setFontSize(26); const style = textStyleBuilder.build(); const builder = Charts.newLineChart(); builder.setTitleTextStyle(style);
Parameter
| Name | Typ | Beschreibung |
|---|---|---|
text | Text | Der Textstil, der für den Diagrammtitel verwendet werden soll. Sie können ein Text-Objekt erstellen, indem Sie Charts.newTextStyle() aufrufen. |
Rückflug
LineChartBuilder – Dieser Builder, nützlich für die Verkettung.
setXAxisTextStyle(textStyle)
Legt den Textstil der horizontalen Achse fest.
// Creates a line chart builder and sets the X-axis text style to blue, 18-point // font. const textStyle = Charts.newTextStyle().setColor('blue').setFontSize(18).build(); const builder = Charts.newLineChart(); builder.setXAxisTextStyle(textStyle);
Parameter
| Name | Typ | Beschreibung |
|---|---|---|
text | Text | Der für den Titel der horizontalen Achse zu verwendende Textstil. Sie können ein Text-Objekt erstellen, indem Sie Charts.newTextStyle() aufrufen. |
Rückflug
LineChartBuilder – Dieser Builder, nützlich für die Verkettung.
setXAxisTitle(title)
Fügt der horizontalen Achse einen Titel hinzu. Der Titel ist zentriert und wird unter den Achsenwertlabels angezeigt.
// Creates a line chart builder and sets the X-axis title. const builder = Charts.newLineChart(); builder.setTitle('X-axis Title');
Parameter
| Name | Typ | Beschreibung |
|---|---|---|
title | String | Der Titel für die X-Achse. |
Rückflug
LineChartBuilder – Dieser Builder, nützlich für die Verkettung.
setXAxisTitleTextStyle(textStyle)
Legt den Textstil für den Titel der horizontalen Achse fest.
// Creates a line chart builder and sets the X-axis title text style to blue, // 18-point font. const textStyle = Charts.newTextStyle().setColor('blue').setFontSize(18).build(); const builder = Charts.newLineChart(); builder.setXAxisTitleTextStyle(textStyle);
Parameter
| Name | Typ | Beschreibung |
|---|---|---|
text | Text | Der für den Titel der horizontalen Achse zu verwendende Textstil. Sie können ein Text-Objekt erstellen, indem Sie Charts.newTextStyle() aufrufen. |
Rückflug
LineChartBuilder – Dieser Builder, nützlich für die Verkettung.
setYAxisTextStyle(textStyle)
Legt den Textstil der vertikalen Achse fest.
// Creates a line chart builder and sets the Y-axis text style to blue, 18-point // font. const textStyle = Charts.newTextStyle().setColor('blue').setFontSize(18).build(); const builder = Charts.newLineChart(); builder.setYAxisTextStyle(textStyle);
Parameter
| Name | Typ | Beschreibung |
|---|---|---|
text | Text | Der für den Titel der horizontalen Achse zu verwendende Textstil. Sie können ein Text-Objekt erstellen, indem Sie Charts.newTextStyle() aufrufen. |
Rückflug
LineChartBuilder – Dieser Builder, nützlich für die Verkettung.
setYAxisTitle(title)
Fügt der vertikalen Achse einen Titel hinzu. Der Titel ist zentriert und wird links neben den Wertlabels angezeigt.
// Creates a line chart builder and sets the Y-axis title. const builder = Charts.newLineChart(); builder.setYAxisTitle('Y-axis Title');
Parameter
| Name | Typ | Beschreibung |
|---|---|---|
title | String | Der Titel für die Y-Achse. |
Rückflug
LineChartBuilder – Dieser Builder, nützlich für die Verkettung.
setYAxisTitleTextStyle(textStyle)
Legt den Textstil für den Titel der vertikalen Achse fest.
// Creates a line chart builder and sets the Y-axis title text style to blue, // 18-point font. const textStyle = Charts.newTextStyle().setColor('blue').setFontSize(18).build(); const builder = Charts.newLineChart(); builder.setYAxisTitleTextStyle(textStyle);
Parameter
| Name | Typ | Beschreibung |
|---|---|---|
text | Text | Der für den Titel der horizontalen Achse zu verwendende Textstil. Sie können ein Text-Objekt erstellen, indem Sie Charts.newTextStyle() aufrufen. |
Rückflug
LineChartBuilder – Dieser Builder, nützlich für die Verkettung.
useLogScale()
Legt fest, dass die Bereichsachse logarithmisch skaliert wird. Dazu müssen alle Werte positiv sein. Die Bereichsachse ist die vertikale Achse für vertikale Diagramme (z. B. Linien-, Flächen- oder Säulendiagramme) und die horizontale Achse für horizontale Diagramme (z. B. Balkendiagramme).
Rückflug
LineChartBuilder – Dieser Builder, nützlich für die Verkettung.