Narzędzie do tworzenia wykresów kolumnowych. Więcej informacji znajdziesz w dokumentacji Wykresów Google.
Z tego przykładu dowiesz się, jak utworzyć wykres kolumnowy z danymi z tabeli danych.
var sampleData = Charts.newDataTable() .addColumn(Charts.ColumnType.STRING, "Year") .addColumn(Charts.ColumnType.NUMBER, "Sales") .addColumn(Charts.ColumnType.NUMBER, "Expenses") .addRow(["2004", 1000, 400]) .addRow(["2005", 1170, 460]) .addRow(["2006", 660, 1120]) .addRow(["2007", 1030, 540]) .addRow(["2008", 800, 600]) .addRow(["2009", 943, 678]) .addRow(["2010", 1020, 550]) .addRow(["2011", 910, 700]) .addRow(["2012", 1230, 840]) .build(); var chart = Charts.newColumnChart() .setTitle('Sales & Expenses') .setXAxisTitle('Year') .setYAxisTitle('Amount (USD)') .setDimensions(600, 500) .setDataTable(sampleData) .build();
Metody
Metoda | Zwracany typ | Krótki opis |
---|---|---|
build() | Chart | Tworzy wykres. |
reverseCategories() | ColumnChartBuilder | Odwraca rysowanie serii na osi domeny. |
setBackgroundColor(cssValue) | ColumnChartBuilder | Ustawia kolor tła wykresu. |
setColors(cssValues) | ColumnChartBuilder | Ustawia kolory linii na wykresie. |
setDataSourceUrl(url) | ColumnChartBuilder | Ustawia adres URL źródła danych, które jest używane do pobierania danych ze źródła zewnętrznego, np. Google Arkusze. |
setDataTable(tableBuilder) | ColumnChartBuilder | Konfiguruje tabelę danych, która ma być używana na potrzeby wykresu, za pomocą DataTableBuilder. |
setDataTable(table) | ColumnChartBuilder | Ustawia tabelę danych, która zawiera linie wykresu, a także etykiety osi X. |
setDataViewDefinition(dataViewDefinition) | ColumnChartBuilder | Określa definicję widoku danych, która będzie używana na wykresie. |
setDimensions(width, height) | ColumnChartBuilder | Ustawia wymiary wykresu. |
setLegendPosition(position) | ColumnChartBuilder | Określa pozycję legendy względem wykresu. |
setLegendTextStyle(textStyle) | ColumnChartBuilder | Określa styl tekstu legendy wykresu. |
setOption(option, value) | ColumnChartBuilder | Określa zaawansowane opcje tego wykresu. |
setRange(start, end) | ColumnChartBuilder | Określa zakres wykresu. |
setStacked() | ColumnChartBuilder | Używa linii skumulowanych, co oznacza, że wartości linii i słupków są skumulowane (skumulowane). |
setTitle(chartTitle) | ColumnChartBuilder | Określa tytuł wykresu. |
setTitleTextStyle(textStyle) | ColumnChartBuilder | Określa styl tekstu tytułu wykresu. |
setXAxisTextStyle(textStyle) | ColumnChartBuilder | Określa styl tekstu osi poziomej. |
setXAxisTitle(title) | ColumnChartBuilder | Dodaje tytuł do osi poziomej. |
setXAxisTitleTextStyle(textStyle) | ColumnChartBuilder | Określa styl tekstu tytułu na osi poziomej. |
setYAxisTextStyle(textStyle) | ColumnChartBuilder | Określa styl tekstu osi pionowej. |
setYAxisTitle(title) | ColumnChartBuilder | Dodaje tytuł do osi pionowej. |
setYAxisTitleTextStyle(textStyle) | ColumnChartBuilder | Określa styl tekstu tytułu osi pionowej. |
useLogScale() | ColumnChartBuilder | Przekształca oś zakresu w skalę logarytmiczną (wszystkie wartości muszą być dodatnie). |
Szczegółowa dokumentacja
build()
Tworzy wykres.
Powrót
Chart
– obiekt Chart, który można umieszczać w dokumentach i elementach interfejsu albo używać jako statyczny
.
reverseCategories()
Odwraca rysowanie serii na osi domeny. Na wykresach pionowych (np. liniowych, wykresów warstwowych lub kolumnowych), oznacza to, że oś pozioma jest rysowana od prawej do lewej. Dla: na wykresach poziomych (np. słupkowych) oznacza to, że oś pionowa jest rysowana od góry do dołu. w dół. W przypadku wykresów kołowych wycinki są rysowane w lewo.
// Creates a pie chart builder and sets drawing of the slices in a counter-clockwise manner. var builder = Charts.newPieChart(); builder.reverseCategories();
Powrót
ColumnChartBuilder
– to kreator przydatny w przypadku łańcuchów.
setBackgroundColor(cssValue)
Ustawia kolor tła wykresu.
// Creates a line chart builder and sets the background color to gray var builder = Charts.newLineChart(); builder.setBackgroundColor("gray");
Parametry
Nazwa | Typ | Opis |
---|---|---|
cssValue | String | Wartość CSS koloru (np. "blue" lub "#00f" ). |
Powrót
ColumnChartBuilder
– to kreator przydatny w przypadku łańcuchów.
setColors(cssValues)
Ustawia kolory linii na wykresie.
// Creates a line chart builder and sets the first two lines to be drawn in green and red, // respectively. var builder = Charts.newLineChart(); builder.setColors(["green", "red"]);
Parametry
Nazwa | Typ | Opis |
---|---|---|
cssValues | String[] | Tablica wartości CSS koloru, np. ["red", "#acf"] . N-ty element
wskazuje kolor n-tej linii na wykresie. |
Powrót
ColumnChartBuilder
– to kreator przydatny w przypadku łańcuchów.
setDataSourceUrl(url)
Ustawia adres URL źródła danych, które jest używane do pobierania danych ze źródła zewnętrznego, np. Google Arkusze. Jeśli podany jest URL źródła danych i tabela DataTable, adres URL źródła danych jest ignorowany.
Więcej informacji o wysyłaniu zapytań dotyczących źródeł danych znajdziesz w dokumentacji Wykresów Google.
Parametry
Nazwa | Typ | Opis |
---|---|---|
url | String | Adres URL źródła danych wraz ze wszystkimi parametrami zapytania. |
Powrót
ColumnChartBuilder
– to kreator przydatny w przypadku łańcuchów.
setDataTable(tableBuilder)
Konfiguruje tabelę danych, która ma być używana na potrzeby wykresu, za pomocą DataTableBuilder. Jest to wygodna metoda
do ustawienia tabeli danych bez konieczności wywoływania funkcji build()
.
Parametry
Nazwa | Typ | Opis |
---|---|---|
tableBuilder | DataTableBuilder | Kreator tabel danych. W ramach tego parametru natychmiast jest tworzona nowa tabela danych , więc dalsze aktualizacje narzędzia nie zostaną odzwierciedlone na wykresie. |
Powrót
ColumnChartBuilder
– to kreator przydatny w przypadku łańcuchów.
setDataTable(table)
Ustawia tabelę danych, która zawiera linie wykresu, a także etykiety osi X. pierwsza kolumna powinna być ciągiem znaków i zawierać etykiety osi poziomej. Dowolna liczba kolumn po których może następować, wszystkie muszą mieć wartości liczbowe. Każda kolumna jest wyświetlana jako osobna linia.
Parametry
Nazwa | Typ | Opis |
---|---|---|
table | DataTableSource | Tabela danych, która ma być używana na wykresie. |
Powrót
ColumnChartBuilder
– to kreator przydatny w przypadku łańcuchów.
setDataViewDefinition(dataViewDefinition)
Określa definicję widoku danych, która będzie używana na wykresie.
Parametry
Nazwa | Typ | Opis |
---|---|---|
dataViewDefinition | DataViewDefinition | Obiekt definicji widoku danych, który określa widok, który powinien być na podstawie podanego źródła danych na potrzeby rysunku. |
Powrót
ColumnChartBuilder
– to kreator przydatny w przypadku łańcuchów.
setDimensions(width, height)
Ustawia wymiary wykresu.
Parametry
Nazwa | Typ | Opis |
---|---|---|
width | Integer | Szerokość wykresu w pikselach. |
height | Integer | Wysokość wykresu w pikselach. |
Powrót
ColumnChartBuilder
– to kreator przydatny w przypadku łańcuchów.
setLegendPosition(position)
Określa pozycję legendy względem wykresu. Domyślnie nie ma legendy.
// Creates a line chart builder and sets the legend position to right. var builder = Charts.newLineChart(); builder.setLegendPosition(Charts.Position.RIGHT);
Parametry
Nazwa | Typ | Opis |
---|---|---|
position | Position | Pozycja legendy. |
Powrót
ColumnChartBuilder
– to kreator przydatny w przypadku łańcuchów.
setLegendTextStyle(textStyle)
Określa styl tekstu legendy wykresu.
// Creates a line chart builder and sets it up for a blue, 26-point legend. var textStyleBuilder = Charts.newTextStyle().setColor('#0000FF').setFontSize(26); var style = textStyleBuilder.build(); var builder = Charts.newLineChart(); builder.setLegendTextStyle(style);
Parametry
Nazwa | Typ | Opis |
---|---|---|
textStyle | TextStyle | Styl tekstu, który będzie używany w legendzie wykresu. |
Powrót
ColumnChartBuilder
– to kreator przydatny w przypadku łańcuchów.
setOption(option, value)
Określa zaawansowane opcje tego wykresu. Zobacz dostępne opcje ten wykres. Ta metoda nie działa, jeśli dana opcja jest nieprawidłowa.
// Build a column chart with a 1-second animation duration. var builder = Charts.newColumnChart(); builder.setOption('animation.duration', 1000); var chart = builder.build();
Parametry
Nazwa | Typ | Opis |
---|---|---|
option | String | Opcja do ustawienia. |
value | Object | Wartość do ustawienia. |
Powrót
ColumnChartBuilder
– to kreator przydatny w przypadku łańcuchów.
setRange(start, end)
Określa zakres wykresu.
Jeśli jakieś punkty danych wykraczają poza zakres, zakres się powiększa, aby uwzględnić te dane. pkt.
Parametry
Nazwa | Typ | Opis |
---|---|---|
start | Number | Wartość najniższej linii siatki na osi zakresu. |
end | Number | Wartość najwyższej linii siatki na osi zakresu. |
Powrót
ColumnChartBuilder
– to kreator przydatny w przypadku łańcuchów.
setStacked()
Używa linii skumulowanych, co oznacza, że wartości linii i słupków są skumulowane (skumulowane). Domyślnie nie ma więc żadnego sposobu grupowania.
Powrót
ColumnChartBuilder
– to kreator przydatny w przypadku łańcuchów.
setTitle(chartTitle)
Określa tytuł wykresu. Tytuł jest wyświetlany na środku nad wykresem.
// Creates a line chart builder and title to 'My Line Chart'. var builder = Charts.newLineChart(); builder.setTitle('My Line Chart')
Parametry
Nazwa | Typ | Opis |
---|---|---|
chartTitle | String | tytuł wykresu. |
Powrót
ColumnChartBuilder
– to kreator przydatny w przypadku łańcuchów.
setTitleTextStyle(textStyle)
Określa styl tekstu tytułu wykresu.
// Creates a line chart builder and sets it up for a blue, 26-point title. var textStyleBuilder = Charts.newTextStyle().setColor('#0000FF').setFontSize(26); var style = textStyleBuilder.build(); var builder = Charts.newLineChart(); builder.setTitleTextStyle(style);
Parametry
Nazwa | Typ | Opis |
---|---|---|
textStyle | TextStyle | Styl tekstu, który będzie używany jako tytuł wykresu. Obiekt TextStyleBuilder możesz utworzyć, wywołując funkcję Charts.newTextStyle() . |
Powrót
ColumnChartBuilder
– to kreator przydatny w przypadku łańcuchów.
setXAxisTextStyle(textStyle)
Określa styl tekstu osi poziomej.
// Creates a line chart builder and sets the X-axis text style to blue, 18-point font. var textStyle = Charts.newTextStyle().setColor('blue').setFontSize(18).build(); var builder = Charts.newLineChart(); builder.setXAxisTextStyle(textStyle);
Parametry
Nazwa | Typ | Opis |
---|---|---|
textStyle | TextStyle | Styl tekstu, który będzie używany jako tytuł osi poziomej. Obiekt TextStyleBuilder możesz utworzyć, wywołując funkcję Charts.newTextStyle() . |
Powrót
ColumnChartBuilder
– to kreator przydatny w przypadku łańcuchów.
setXAxisTitle(title)
Dodaje tytuł do osi poziomej. Tytuł jest wyśrodkowany i wyświetla się pod wartością osi. etykiety.
// Creates a line chart builder and sets the X-axis title. var builder = Charts.newLineChart(); builder.setTitle('X-axis Title')
Parametry
Nazwa | Typ | Opis |
---|---|---|
title | String | Tytuł osi X. |
Powrót
ColumnChartBuilder
– to kreator przydatny w przypadku łańcuchów.
setXAxisTitleTextStyle(textStyle)
Określa styl tekstu tytułu na osi poziomej.
// Creates a line chart builder and sets the X-axis title text style to blue, 18-point font. var textStyle = Charts.newTextStyle().setColor('blue').setFontSize(18).build(); var builder = Charts.newLineChart(); builder.setXAxisTitleTextStyle(textStyle);
Parametry
Nazwa | Typ | Opis |
---|---|---|
textStyle | TextStyle | Styl tekstu, który będzie używany jako tytuł osi poziomej. Obiekt TextStyleBuilder możesz utworzyć, wywołując funkcję Charts.newTextStyle() . |
Powrót
ColumnChartBuilder
– to kreator przydatny w przypadku łańcuchów.
setYAxisTextStyle(textStyle)
Określa styl tekstu osi pionowej.
// Creates a line chart builder and sets the Y-axis text style to blue, 18-point font. var textStyle = Charts.newTextStyle().setColor('blue').setFontSize(18).build(); var builder = Charts.newLineChart(); builder.setYAxisTextStyle(textStyle);
Parametry
Nazwa | Typ | Opis |
---|---|---|
textStyle | TextStyle | Styl tekstu, który będzie używany jako tytuł osi poziomej. Obiekt TextStyleBuilder możesz utworzyć, wywołując funkcję Charts.newTextStyle() . |
Powrót
ColumnChartBuilder
– to kreator przydatny w przypadku łańcuchów.
setYAxisTitle(title)
Dodaje tytuł do osi pionowej. Tytuł jest wyśrodkowany i wyświetla się po lewej stronie wartości. etykiety.
// Creates a line chart builder and sets the Y-axis title. var builder = Charts.newLineChart(); builder.setYAxisTitle('Y-axis Title')
Parametry
Nazwa | Typ | Opis |
---|---|---|
title | String | Tytuł osi Y. |
Powrót
ColumnChartBuilder
– to kreator przydatny w przypadku łańcuchów.
setYAxisTitleTextStyle(textStyle)
Określa styl tekstu tytułu osi pionowej.
// Creates a line chart builder and sets the Y-axis title text style to blue, 18-point font. var textStyle = Charts.newTextStyle().setColor('blue').setFontSize(18).build(); var builder = Charts.newLineChart(); builder.setYAxisTitleTextStyle(textStyle);
Parametry
Nazwa | Typ | Opis |
---|---|---|
textStyle | TextStyle | Styl tekstu, który będzie używany jako tytuł osi poziomej. Obiekt TextStyleBuilder możesz utworzyć, wywołując funkcję Charts.newTextStyle() . |
Powrót
ColumnChartBuilder
– to kreator przydatny w przypadku łańcuchów.
useLogScale()
Przekształca oś zakresu w skalę logarytmiczną (wszystkie wartości muszą być dodatnie). Zakres są osią pionową dla wykresów pionowych (np. liniowe, warstwowe lub kolumnowe). oś pozioma w przypadku wykresów poziomych (np. słupkowych).
Powrót
ColumnChartBuilder
– to kreator przydatny w przypadku łańcuchów.