Kreator wykresów punktowych Więcej informacji znajdziesz w dokumentacji Google Charts.
Poniżej przedstawiamy przykład tworzenia wykresu punktowego. Dane są importowane z arkusza kalkulacyjnego Google.
// Get sample data from a spreadsheet. const dataSourceUrl = 'https://docs.google.com/spreadsheet/tq?range=C1%3AD' + '&key=0Aq4s9w_HxMs7dHpfX05JdmVSb1FpT21sbXd4NVE3UEE&gid=4&headers=-1'; const chartBuilder = Charts.newScatterChart() .setTitle('Adjusted GDP & U.S. Population') .setXAxisTitle('U.S. Population (millions)') .setYAxisTitle('Adjusted GDP ($ billions)') .setDimensions(600, 500) .setLegendPosition(Charts.Position.NONE) .setDataSourceUrl(dataSourceUrl); const chart = chartBuilder.build();
Metody
Metoda | Zwracany typ | Krótki opis |
---|---|---|
build() | Chart | Tworzy wykres. |
set | Scatter | Ustawia kolor tła wykresu. |
set | Scatter | Ustawia kolory linii na wykresie. |
set | Scatter | 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. |
set | Scatter | Za pomocą klasy DataTableBuilder ustawia tabelę danych, która ma być używana na potrzeby wykresu. |
set | Scatter | Ustawia tabelę danych zawierającą linie wykresu oraz etykiety osi X. |
set | Scatter | Określa definicję widoku danych używanego na wykresie. |
set | Scatter | Określa wymiary wykresu. |
set | Scatter | Określa położenie legendy względem wykresu. |
set | Scatter | Ustawia styl tekstu legendy wykresu. |
set | Scatter | Ustawia zaawansowane opcje wykresu. |
set | Scatter | Ustawia styl punktów na linii. |
set | Scatter | Ustawia tytuł wykresu. |
set | Scatter | Ustawia styl tekstu tytułu wykresu. |
set | Scatter | Przekształca oś poziomą w skalę logarytmiczną (wymaga, aby wszystkie wartości były dodatnie). |
set | Scatter | Określa zakres osi poziomej wykresu. |
set | Scatter | Ustawia styl tekstu osi poziomej. |
set | Scatter | Dodaje tytuł do osi poziomej. |
set | Scatter | Ustawia styl tekstu tytułu osi poziomej. |
set | Scatter | Przekształca oś pionową w skalę logarytmiczną (wymaga, aby wszystkie wartości były dodatnie). |
set | Scatter | Ustawia zakres osi pionowej wykresu. |
set | Scatter | Ustawia styl tekstu osi pionowej. |
set | Scatter | Dodaje tytuł do osi pionowej. |
set | Scatter | Ustawia styl tekstu tytułu osi pionowej. |
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.
set Background Color(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
Nazwa | Typ | Opis |
---|---|---|
css | String | Wartość CSS koloru (np. "blue" lub "#00f" ). |
Powrót
Scatter
– ten kreator jest przydatny do łańcuchowania.
set Colors(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
Nazwa | Typ | Opis |
---|---|---|
css | String[] | Tablica wartości kolorów CSS, np. ["red", "#acf"] . Element n tablicy reprezentuje kolor linii n na wykresie. |
Powrót
Scatter
– ten kreator jest przydatny do łańcuchowania.
set Data Source Url(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
Nazwa | Typ | Opis |
---|---|---|
url | String | Adres URL źródła danych, w tym parametry zapytania. |
Powrót
Scatter
– ten kreator jest przydatny do łańcuchowania.
set Data Table(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
Nazwa | Typ | Opis |
---|---|---|
table | Data | Kreator 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
Scatter
– ten kreator jest przydatny do łańcuchowania.
set Data Table(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
Nazwa | Typ | Opis |
---|---|---|
table | Data | Tabela danych, której chcesz użyć na wykresie. |
Powrót
Scatter
– ten kreator jest przydatny do łańcuchowania.
set Data View Definition(dataViewDefinition)
Określa definicję widoku danych używanego na wykresie.
Parametry
Nazwa | Typ | Opis |
---|---|---|
data | Data | Obiekt 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
Scatter
– ten kreator jest przydatny do łańcuchowania.
set Dimensions(width, height)
Określa wymiary wykresu.
Parametry
Nazwa | Typ | Opis |
---|---|---|
width | Integer | Szerokość wykresu w pikselach. |
height | Integer | Wysokość wykresu w pikselach. |
Powrót
Scatter
– ten kreator jest przydatny do łańcuchowania.
set Legend Position(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
Nazwa | Typ | Opis |
---|---|---|
position | Position | Pozycja legendy. |
Powrót
Scatter
– ten kreator jest przydatny do łańcuchowania.
set Legend Text Style(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
Nazwa | Typ | Opis |
---|---|---|
text | Text | Styl tekstu używany w legendzie wykresu. |
Powrót
Scatter
– ten kreator jest przydatny do łańcuchowania.
set Option(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 scatter chart with a 1-second animation duration. const builder = Charts.newScatterChart(); builder.setOption('animation.duration', 1000); const chart = builder.build();
Parametry
Nazwa | Typ | Opis |
---|---|---|
option | String | Opcja do ustawienia. |
value | Object | Wartość do ustawienia. |
Powrót
Scatter
– ten kreator jest przydatny do łańcuchowania.
set Point Style(style)
Ustawia styl punktów na linii. Domyślnie punkty nie mają określonych stylów i widoczna jest tylko linia.
// Creates a line chart builder and sets large point style. const builder = Charts.newLineChart(); builder.setPointStyle(Charts.PointStyle.LARGE);
Parametry
Nazwa | Typ | Opis |
---|---|---|
style | Point | Styl używany dla punktów na linii. |
Powrót
Scatter
– ten kreator jest przydatny do łańcuchowania.
Zobacz też
set Title(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
Nazwa | Typ | Opis |
---|---|---|
chart | String | tytuł wykresu. |
Powrót
Scatter
– ten kreator jest przydatny do łańcuchowania.
set TitleTextStyle(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
Nazwa | Typ | Opis |
---|---|---|
text | Text | Styl tekstu, który ma być używany w tytule wykresu. Obiekt Text możesz utworzyć, wywołując funkcję Charts.newTextStyle() . |
Powrót
Scatter
– ten kreator jest przydatny do łańcuchowania.
set XAxis Log Scale()
Przekształca oś poziomą w skalę logarytmiczną (wymaga, aby wszystkie wartości były dodatnie).
Powrót
Scatter
– ten kreator jest przydatny do łańcuchowania.
set XAxis Range(start, end)
Określa zakres osi poziomej wykresu.
Jeśli jakiekolwiek punkty danych znajdują się poza zakresem, zakres jest rozszerzany, aby obejmował te punkty danych.
// Creates a scatter chart builder and sets the X-axis range to be 0 to 100. const builder = Charts.newTableChart(); builder.setXAxisRange(0, 100);
Parametry
Nazwa | Typ | Opis |
---|---|---|
start | Number | Wartość dla najniższej linii siatki osi poziomej. |
end | Number | Wartość najwyższej linii siatki osi poziomej. |
Powrót
Scatter
– ten kreator jest przydatny do łańcuchowania.
set XAxis Text Style(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
Nazwa | Typ | Opis |
---|---|---|
text | Text | Styl tekstu, który ma być używany w tytule osi poziomej. Obiekt Text możesz utworzyć, wywołując funkcję Charts.newTextStyle() . |
Powrót
Scatter
– ten kreator jest przydatny do łańcuchowania.
set XAxis Title(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
Nazwa | Typ | Opis |
---|---|---|
title | String | Tytuł osi X. |
Powrót
Scatter
– ten kreator jest przydatny do łańcuchowania.
set XAxis TitleTextStyle(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
Nazwa | Typ | Opis |
---|---|---|
text | Text | Styl tekstu, który ma być używany w tytule osi poziomej. Obiekt Text możesz utworzyć, wywołując funkcję Charts.newTextStyle() . |
Powrót
Scatter
– ten kreator jest przydatny do łańcuchowania.
set YAxis Log Scale()
Przekształca oś pionową w skalę logarytmiczną (wymaga, aby wszystkie wartości były dodatnie).
Powrót
Scatter
– ten kreator jest przydatny do łańcuchowania.
set YAxis Range(start, end)
Ustawia zakres osi pionowej wykresu. Jeśli jakiekolwiek punkty danych znajdują się poza zakresem, zakres jest rozszerzany, aby obejmował te punkty danych.
// Creates a scatter chart builder and sets the Y-axis range to be 0 to 100. const builder = Charts.newTableChart(); builder.setYAxisRange(0, 100);
Parametry
Nazwa | Typ | Opis |
---|---|---|
start | Number | Wartość dla najniższej linii siatki osi pionowej. |
end | Number | Wartość najwyższej linii siatki osi pionowej. |
Powrót
Scatter
– ten kreator jest przydatny do łańcuchowania.
set YAxis Text Style(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
Nazwa | Typ | Opis |
---|---|---|
text | Text | Styl tekstu, który ma być używany w tytule osi poziomej. Obiekt Text możesz utworzyć, wywołując funkcję Charts.newTextStyle() . |
Powrót
Scatter
– ten kreator jest przydatny do łańcuchowania.
set YAxis Title(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
Nazwa | Typ | Opis |
---|---|---|
title | String | Tytuł osi Y. |
Powrót
Scatter
– ten kreator jest przydatny do łańcuchowania.
set YAxis TitleTextStyle(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
Nazwa | Typ | Opis |
---|---|---|
text | Text | Styl tekstu, który ma być używany w tytule osi poziomej. Obiekt Text możesz utworzyć, wywołując funkcję Charts.newTextStyle() . |
Powrót
Scatter
– ten kreator jest przydatny do łańcuchowania.