Class ColumnChartBuilder

Kolumnawykresbudowca

Generator wykresów kolumnowych. Więcej informacji znajdziesz w dokumentacji Google Charts.

Ten przykład pokazuje, jak utworzyć wykres kolumnowy na podstawie danych z tabeli danych.

const 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();

const chart = Charts.newColumnChart()
                  .setTitle('Sales & Expenses')
                  .setXAxisTitle('Year')
                  .setYAxisTitle('Amount (USD)')
                  .setDimensions(600, 500)
                  .setDataTable(sampleData)
                  .build();

Metody

MetodaZwracany typKrótki opis
build()ChartTworzy wykres.
reverseCategories()ColumnChartBuilderOdwraca kolejność rysowania serii na osi domeny.
setBackgroundColor(cssValue)ColumnChartBuilderUstawia kolor tła wykresu.
setColors(cssValues)ColumnChartBuilderUstawia kolory linii na wykresie.
setDataSourceUrl(url)ColumnChartBuilderUstawia adres URL źródła danych, który służy do pobierania danych z zewnętrznego źródła, np. z Arkuszy Google.
setDataTable(tableBuilder)ColumnChartBuilderZa pomocą klasy DataTableBuilder ustawia tabelę danych, która ma być używana na potrzeby wykresu.
setDataTable(table)ColumnChartBuilderUstawia tabelę danych zawierającą linie wykresu oraz etykiety osi X.
setDataViewDefinition(dataViewDefinition)ColumnChartBuilderOkreśla definicję widoku danych używanego na wykresie.
setDimensions(width, height)ColumnChartBuilderOkreśla wymiary wykresu.
setLegendPosition(position)ColumnChartBuilderOkreśla położenie legendy względem wykresu.
setLegendTextStyle(textStyle)ColumnChartBuilderUstawia styl tekstu legendy wykresu.
setOption(option, value)ColumnChartBuilderUstawia zaawansowane opcje wykresu.
setRange(start, end)ColumnChartBuilderOkreśla zakres wykresu.
setStacked()ColumnChartBuilderUżywa nakładanych linii, co oznacza, że wartości linii i pasków są nakładane (kumulowane).
setTitle(chartTitle)ColumnChartBuilderUstawia tytuł wykresu.
setTitleTextStyle(textStyle)ColumnChartBuilderUstawia styl tekstu tytułu wykresu.
setXAxisTextStyle(textStyle)ColumnChartBuilderUstawia styl tekstu osi poziomej.
setXAxisTitle(title)ColumnChartBuilderDodaje tytuł do osi poziomej.
setXAxisTitleTextStyle(textStyle)ColumnChartBuilderUstawia styl tekstu tytułu osi poziomej.
setYAxisTextStyle(textStyle)ColumnChartBuilderUstawia styl tekstu osi pionowej.
setYAxisTitle(title)ColumnChartBuilderDodaje tytuł do osi pionowej.
setYAxisTitleTextStyle(textStyle)ColumnChartBuilderUstawia styl tekstu tytułu osi pionowej.
useLogScale()ColumnChartBuilderPrzekształca oś zakresu w skalę logarytmiczną (wymaga, aby wszystkie wartości były dodatnie).

Szczegółowa dokumentacja

build()

Tworzy wykres.

Powrót

Chart – obiekt wykresu, który można umieszczać w dokumentach i elementach interfejsu lub używać jako statyczny obraz.


reverseCategories()

Odwraca kolejność rysowania serii na osi domeny. W przypadku wykresów z zakresem pionowym (np. wykresów liniowych, powierzchniowych lub słupkowych) oznacza to, że oś pozioma jest rysowana od prawej do lewej. W przypadku wykresów z zakresem poziomym (np. wykresów słupkowych) oznacza to, że oś pionowa jest rysowana od góry do dołu. W przypadku wykresów kołowych oznacza to, że sektory są rysowane w przeciwnym kierunku do ruchu wskazówek zegara.

// Creates a pie chart builder and sets drawing of the slices in a
// counter-clockwise manner.
const builder = Charts.newPieChart();
builder.reverseCategories();

Powrót

ColumnChartBuilder – ten kreator jest przydatny do łańcuchowania.


setBackgroundColor(cssValue)

Ustawia kolor tła wykresu.

// Creates a line chart builder and sets the background color to gray
const builder = Charts.newLineChart();
builder.setBackgroundColor('gray');

Parametry

NazwaTypOpis
cssValueStringWartość CSS koloru (np. "blue" lub "#00f").

Powrót

ColumnChartBuilder – ten kreator jest przydatny do łańcuchowania.


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.
const builder = Charts.newLineChart();
builder.setColors(['green', 'red']);

Parametry

NazwaTypOpis
cssValuesString[]Tablica wartości kolorów CSS, np. ["red", "#acf"]. Element n tablicy reprezentuje kolor linii n na wykresie.

Powrót

ColumnChartBuilder – ten kreator jest przydatny do łańcuchowania.


setDataSourceUrl(url)

Ustawia adres URL źródła danych, który służy do pobierania danych z zewnętrznego źródła, np. z Arkuszy Google. Jeśli podasz URL źródła danych i tabelę danych, adres URL źródła danych zostanie zignorowany.

Więcej informacji o wysyłaniu zapytań do źródeł danych znajdziesz w dokumentacji Google Charts.

Parametry

NazwaTypOpis
urlStringAdres URL źródła danych, w tym parametry zapytania.

Powrót

ColumnChartBuilder – ten kreator jest przydatny do łańcuchowania.


setDataTable(tableBuilder)

Za pomocą klasy DataTableBuilder ustawia tabelę danych, która ma być używana na potrzeby wykresu. Jest to wygodna metoda ustawiania tabeli danych bez konieczności wywoływania funkcji build().

Parametry

NazwaTypOpis
tableBuilderDataTableBuilderKreator tabeli danych. W ramach tego wywołania tworzona jest nowa tabela danych, więc wszelkie dalsze zmiany w kreatorze nie będą odzwierciedlane na wykresie.

Powrót

ColumnChartBuilder – ten kreator jest przydatny do łańcuchowania.


setDataTable(table)

Ustawia tabelę danych zawierającą linie wykresu oraz etykiety osi X. Pierwsza kolumna powinna być ciągiem znaków i zawierać etykiety osi poziomej. Może być dowolna liczba kolumn, które muszą zawierać dane liczbowe. Każda kolumna jest wyświetlana jako osobna linijka.

Parametry

NazwaTypOpis
tableDataTableSourceTabela danych, której chcesz użyć na wykresie.

Powrót

ColumnChartBuilder – ten kreator jest przydatny do łańcuchowania.


setDataViewDefinition(dataViewDefinition)

Określa definicję widoku danych używanego na wykresie.

Parametry

NazwaTypOpis
dataViewDefinitionDataViewDefinitionObiekt definicji widoku danych, który definiuje widok, który powinien zostać utworzony na podstawie danego źródła danych na potrzeby rysowania wykresu.

Powrót

ColumnChartBuilder – ten kreator jest przydatny do łańcuchowania.


setDimensions(width, height)

Określa wymiary wykresu.

Parametry

NazwaTypOpis
widthIntegerSzerokość wykresu w pikselach.
heightIntegerWysokość wykresu w pikselach.

Powrót

ColumnChartBuilder – ten kreator jest przydatny do łańcuchowania.


setLegendPosition(position)

Określa położenie legendy względem wykresu. Domyślnie legenda nie jest wyświetlana.

// Creates a line chart builder and sets the legend position to right.
const builder = Charts.newLineChart();
builder.setLegendPosition(Charts.Position.RIGHT);

Parametry

NazwaTypOpis
positionPositionPozycja legendy.

Powrót

ColumnChartBuilder – ten kreator jest przydatny do łańcuchowania.


setLegendTextStyle(textStyle)

Ustawia styl tekstu legendy wykresu.

// 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);

Parametry

NazwaTypOpis
textStyleTextStyleStyl tekstu używany w legendzie wykresu.

Powrót

ColumnChartBuilder – ten kreator jest przydatny do łańcuchowania.


setOption(option, value)

Ustawia zaawansowane opcje wykresu. Zobacz dostępne opcje tego wykresu. Ta metoda nie działa, jeśli dana opcja jest nieprawidłowa.

// Build a column chart with a 1-second animation duration.
const builder = Charts.newColumnChart();
builder.setOption('animation.duration', 1000);
const chart = builder.build();

Parametry

NazwaTypOpis
optionStringOpcja do ustawienia.
valueObjectWartość do ustawienia.

Powrót

ColumnChartBuilder – ten kreator jest przydatny do łańcuchowania.


setRange(start, end)

Określa zakres wykresu.

Jeśli jakiekolwiek punkty danych znajdują się poza zakresem, zakres jest rozszerzany, aby obejmował te punkty danych.

Parametry

NazwaTypOpis
startNumberWartość odpowiadająca najniższej linii siatki osi zakresu.
endNumberWartość najwyższej linii siatki osi zakresu.

Powrót

ColumnChartBuilder – ten kreator jest przydatny do łańcuchowania.


setStacked()

Używa nakładanych linii, co oznacza, że wartości linii i pasków są nakładane (kumulowane). Domyślnie nie ma nakładania.

Powrót

ColumnChartBuilder – ten kreator jest przydatny do łańcuchowania.


setTitle(chartTitle)

Ustawia tytuł wykresu. Tytuł jest wyświetlany na środku nad wykresem.

// Creates a line chart builder and title to 'My Line Chart'.
const builder = Charts.newLineChart();
builder.setTitle('My Line Chart');

Parametry

NazwaTypOpis
chartTitleStringtytuł wykresu.

Powrót

ColumnChartBuilder – ten kreator jest przydatny do łańcuchowania.


setTitleTextStyle(textStyle)

Ustawia styl tekstu tytułu wykresu.

// 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);

Parametry

NazwaTypOpis
textStyleTextStyleStyl tekstu, który ma być używany w tytule wykresu. Obiekt TextStyleBuilder możesz utworzyć, wywołując funkcję Charts.newTextStyle().

Powrót

ColumnChartBuilder – ten kreator jest przydatny do łańcuchowania.


setXAxisTextStyle(textStyle)

Ustawia styl tekstu osi poziomej.

// 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);

Parametry

NazwaTypOpis
textStyleTextStyleStyl tekstu, który ma być używany w tytule osi poziomej. Obiekt TextStyleBuilder możesz utworzyć, wywołując funkcję Charts.newTextStyle().

Powrót

ColumnChartBuilder – ten kreator jest przydatny do łańcuchowania.


setXAxisTitle(title)

Dodaje tytuł do osi poziomej. Tytuł jest wyśrodkowany i wyświetlany pod etykietami wartości osi.

// Creates a line chart builder and sets the X-axis title.
const builder = Charts.newLineChart();
builder.setTitle('X-axis Title');

Parametry

NazwaTypOpis
titleStringTytuł osi X.

Powrót

ColumnChartBuilder – ten kreator jest przydatny do łańcuchowania.


setXAxisTitleTextStyle(textStyle)

Ustawia styl tekstu tytułu osi poziomej.

// 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);

Parametry

NazwaTypOpis
textStyleTextStyleStyl tekstu, który ma być używany w tytule osi poziomej. Obiekt TextStyleBuilder możesz utworzyć, wywołując funkcję Charts.newTextStyle().

Powrót

ColumnChartBuilder – ten kreator jest przydatny do łańcuchowania.


setYAxisTextStyle(textStyle)

Ustawia styl tekstu osi pionowej.

// 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);

Parametry

NazwaTypOpis
textStyleTextStyleStyl tekstu, który ma być używany w tytule osi poziomej. Obiekt TextStyleBuilder możesz utworzyć, wywołując funkcję Charts.newTextStyle().

Powrót

ColumnChartBuilder – ten kreator jest przydatny do łańcuchowania.


setYAxisTitle(title)

Dodaje tytuł do osi pionowej. Tytuł jest wyśrodkowany i pojawia się po lewej stronie etykiet wartości.

// Creates a line chart builder and sets the Y-axis title.
const builder = Charts.newLineChart();
builder.setYAxisTitle('Y-axis Title');

Parametry

NazwaTypOpis
titleStringTytuł osi Y.

Powrót

ColumnChartBuilder – ten kreator jest przydatny do łańcuchowania.


setYAxisTitleTextStyle(textStyle)

Ustawia styl tekstu tytułu osi pionowej.

// 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);

Parametry

NazwaTypOpis
textStyleTextStyleStyl tekstu, który ma być używany w tytule osi poziomej. Obiekt TextStyleBuilder możesz utworzyć, wywołując funkcję Charts.newTextStyle().

Powrót

ColumnChartBuilder – ten kreator jest przydatny do łańcuchowania.


useLogScale()

Przekształca oś zakresu w skalę logarytmiczną (wymaga, aby wszystkie wartości były dodatnie). Zakres osi to oś pionowa w przypadku wykresów pionowych (np. liniowych, warstwowych lub kolumnowych) oraz oś pozioma w przypadku wykresów poziomych (np. słupkowych).

Powrót

ColumnChartBuilder – ten kreator jest przydatny do łańcuchowania.