Class LineChartBuilder

LineChartBuilder

Çizgi grafikleri için oluşturucu. Daha fazla bilgi için Google Charts belgelerini inceleyin.

Aşağıda, çizgi grafik oluşturma işleminin nasıl yapılacağını gösteren bir örnek verilmiştir. Veriler bir Google e-tablosundan içe aktarılır. 

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

Yöntemler

YöntemDönüş türüKısa açıklama
build()ChartGrafiği oluşturur.
reverseCategories()LineChartBuilderAlan eksenindeki serilerin çizimini tersine çevirir.
setBackgroundColor(cssValue)LineChartBuilderGrafiğin arka plan rengini ayarlar.
setColors(cssValues)LineChartBuilderGrafikteki çizgilerin renklerini ayarlar.
setCurveStyle(style)LineChartBuilderGrafikteki eğriler için kullanılacak stili ayarlar.
setDataSourceUrl(url)LineChartBuilderVerileri Google E-Tablolar gibi harici bir kaynaktan çekmek için kullanılan veri kaynağı URL'sini ayarlar.
setDataTable(tableBuilder)LineChartBuilderDataTableBuilder kullanarak grafik için kullanılacak veri tablosunu ayarlar.
setDataTable(table)LineChartBuilderGrafiğin çizgilerini ve X ekseni etiketlerini içeren veri tablosunu ayarlar.
setDataViewDefinition(dataViewDefinition)LineChartBuilderGrafik için kullanılacak veri görünümü tanımını ayarlar.
setDimensions(width, height)LineChartBuilderGrafiğin boyutlarını ayarlar.
setLegendPosition(position)LineChartBuilderGrafiğe göre açıklamanın konumunu ayarlar.
setLegendTextStyle(textStyle)LineChartBuilderGrafik açıklamasının metin stilini ayarlar.
setOption(option, value)LineChartBuilderBu grafik için gelişmiş seçenekleri ayarlar.
setPointStyle(style)LineChartBuilderÇizgideki noktaların stilini belirler.
setRange(start, end)LineChartBuilderGrafiğin aralığını ayarlar.
setTitle(chartTitle)LineChartBuilderGrafiğin başlığını ayarlar.
setTitleTextStyle(textStyle)LineChartBuilderGrafik başlığının metin stilini ayarlar.
setXAxisTextStyle(textStyle)LineChartBuilderYatay eksen metin stilini ayarlar.
setXAxisTitle(title)LineChartBuilderYatay eksene başlık ekler.
setXAxisTitleTextStyle(textStyle)LineChartBuilderYatay eksen başlığı metin stilini ayarlar.
setYAxisTextStyle(textStyle)LineChartBuilderDikey eksen metin stilini ayarlar.
setYAxisTitle(title)LineChartBuilderDikey eksene başlık ekler.
setYAxisTitleTextStyle(textStyle)LineChartBuilderDikey eksen başlığı metin stilini ayarlar.
useLogScale()LineChartBuilderAralık eksenini logaritmik ölçek yapar (tüm değerlerin pozitif olması gerekir).

Ayrıntılı belgeler

build()

Grafiği oluşturur.

Return

Chart: Belgelere, kullanıcı arayüzü öğelerine yerleştirilebilen veya statik resim olarak kullanılabilen bir grafik nesnesi.

reverseCategories()

Alan eksenindeki serilerin çizimini tersine çevirir. Dikey aralıklı grafiklerde (ör. çizgi, alan veya sütun grafikleri) bu, yatay eksenin sağdan sola doğru çizildiği anlamına gelir. Yatay aralıklı grafiklerde (ör. çubuk grafikler) dikey eksenin yukarıdan aşağıya doğru çizildiği anlamına gelir. Pasta grafiklerde dilimler saat yönünün tersine çizilir. 

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

Return

LineChartBuilder: Zincirleme için kullanışlı olan bu oluşturucu.

setBackgroundColor(cssValue)

Grafiğin arka plan rengini ayarlar. 

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

Parametreler

AdTürAçıklama
cssValueStringRengin CSS değeri (ör. "blue" veya "#00f").

Return

LineChartBuilder: Zincirleme için kullanışlı olan bu oluşturucu.

setColors(cssValues)

Grafikteki çizgilerin renklerini ayarlar. 

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

Parametreler

AdTürAçıklama
cssValuesString[]["red", "#acf"] gibi renk CSS değerleri dizisi. Dizideki n. öğe, grafikteki n. satırın rengini temsil eder.

Return

LineChartBuilder: Zincirleme için kullanışlı olan bu oluşturucu.

setCurveStyle(style)

Grafikteki eğriler için kullanılacak stili ayarlar. İzin verilen eğri stilleri için CurveStyle bölümüne bakın. 

// Creates a line chart builder and curves the lines in the chart.
const builder = Charts.newLineChart();
builder.setCurveStyle(Charts.CurveStyle.SMOOTH);

Parametreler

AdTürAçıklama
styleCurveStyleGrafikteki eğrilerin stili.

Return

LineChartBuilder: Zincirleme için kullanışlı olan bu oluşturucu.

Aşağıdaki kaynakları da incelemenizi öneririz:

setDataSourceUrl(url)

Verileri Google E-Tablolar gibi harici bir kaynaktan çekmek için kullanılan veri kaynağı URL'sini ayarlar. Veri kaynağı URL'si ve DataTable sağlanırsa veri kaynağı URL'si yoksayılır.

Veri kaynaklarına sorgu gönderme hakkında daha fazla bilgi için Google Grafikler dokümanlarını inceleyin.

Parametreler

AdTürAçıklama
urlStringSorgu parametreleri de dahil olmak üzere veri kaynağı URL'si.

Return

LineChartBuilder: Zincirleme için kullanışlı olan bu oluşturucu.

setDataTable(tableBuilder)

DataTableBuilder kullanarak grafik için kullanılacak veri tablosunu ayarlar. Bu, build() işlevini çağırmaya gerek kalmadan veri tablosunu ayarlamak için kullanılan kolaylık sağlayan bir yöntemdir.

Parametreler

AdTürAçıklama
tableBuilderDataTableBuilderVeri tablosu oluşturucu. Bu çağrı kapsamında anında yeni bir veri tablosu oluşturulur. Bu nedenle, oluşturucuda yapılan diğer güncellemeler grafiğe yansıtılmaz.

Return

LineChartBuilder: Zincirleme için kullanışlı olan bu oluşturucu.

setDataTable(table)

Grafiğin çizgilerini ve X ekseni etiketlerini içeren veri tablosunu ayarlar. İlk sütun bir dize olmalı ve yatay eksen etiketlerini içermelidir. İstenen sayıda sütun eklenebilir. Bu sütunların tümü sayısal olmalıdır. Her sütun ayrı bir satır olarak gösterilir.

Parametreler

AdTürAçıklama
tableDataTableSourceGrafik için kullanılacak veri tablosu.

Return

LineChartBuilder: Zincirleme için kullanışlı olan bu oluşturucu.

setDataViewDefinition(dataViewDefinition)

Grafik için kullanılacak veri görünümü tanımını ayarlar.

Parametreler

AdTürAçıklama
dataViewDefinitionDataViewDefinitionGrafik çizimi için verilen veri kaynağından türetilmesi gereken görünümü tanımlayan bir veri görünümü tanımı nesnesi.

Return

LineChartBuilder: Zincirleme için kullanışlı olan bu oluşturucu.

setDimensions(width, height)

Grafiğin boyutlarını ayarlar.

Parametreler

AdTürAçıklama
widthIntegerGrafiğin piksel cinsinden genişliği.
heightIntegerGrafiğin piksel cinsinden yüksekliği.

Return

LineChartBuilder: Zincirleme için kullanışlı olan bu oluşturucu.

setLegendPosition(position)

Grafiğe göre açıklamanın konumunu ayarlar. Varsayılan olarak gösterge yoktur. 

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

Parametreler

AdTürAçıklama
positionPositionLejantın konumu.

Return

LineChartBuilder: Zincirleme için kullanışlı olan bu oluşturucu.

setLegendTextStyle(textStyle)

Grafik açıklamasının metin stilini ayarlar. 

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

Parametreler

AdTürAçıklama
textStyleTextStyleGrafik göstergesi için kullanılacak metin stili.

Return

LineChartBuilder: Zincirleme için kullanışlı olan bu oluşturucu.

setOption(option, value)

Bu grafik için gelişmiş seçenekleri ayarlar. Bu grafik için kullanılabilen seçenekleri inceleyin. Belirtilen seçenek geçersizse bu yöntemin hiçbir etkisi olmaz. 

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

Parametreler

AdTürAçıklama
optionStringAyar seçeneği.
valueObjectAyarlanacak değer.

Return

LineChartBuilder: Zincirleme için kullanışlı olan bu oluşturucu.

setPointStyle(style)

Çizgideki noktaların stilini belirler. Varsayılan olarak, noktaların belirli bir stili yoktur ve yalnızca çizgi görünür. 

// Creates a line chart builder and sets large point style.
const builder = Charts.newLineChart();
builder.setPointStyle(Charts.PointStyle.LARGE);

Parametreler

AdTürAçıklama
stylePointStyleÇizgideki noktalar için kullanılacak stil.

Return

LineChartBuilder: Zincirleme için kullanışlı olan bu oluşturucu.

Aşağıdaki kaynakları da incelemenizi öneririz:

setRange(start, end)

Grafiğin aralığını ayarlar.

Aralığın dışında kalan veri noktaları varsa aralık, bu veri noktalarını içerecek şekilde genişletilir.

Parametreler

AdTürAçıklama
startNumberAralık ekseninin en alttaki kılavuz çizgisi için değer.
endNumberAralık ekseninin en yüksek ızgara çizgisine ait değer.

Return

LineChartBuilder: Zincirleme için kullanışlı olan bu oluşturucu.

setTitle(chartTitle)

Grafiğin başlığını ayarlar. Başlık, grafiğin üzerinde ortalanmış şekilde gösterilir. 

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

Parametreler

AdTürAçıklama
chartTitleStringGrafik başlığı

Return

LineChartBuilder: Zincirleme için kullanışlı olan bu oluşturucu.

setTitleTextStyle(textStyle)

Grafik başlığının metin stilini ayarlar. 

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

Parametreler

AdTürAçıklama
textStyleTextStyleGrafik başlığı için kullanılacak metin stili. Charts.newTextStyle() işlevini çağırarak TextStyleBuilder nesnesi oluşturabilirsiniz.

Return

LineChartBuilder: Zincirleme için kullanışlı olan bu oluşturucu.

setXAxisTextStyle(textStyle)

Yatay eksen metin stilini ayarlar. 

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

Parametreler

AdTürAçıklama
textStyleTextStyleYatay eksen başlığı için kullanılacak metin stili. Charts.newTextStyle() işlevini çağırarak TextStyleBuilder nesnesi oluşturabilirsiniz.

Return

LineChartBuilder: Zincirleme için kullanışlı olan bu oluşturucu.

setXAxisTitle(title)

Yatay eksene başlık ekler. Başlık ortalanır ve eksen değeri etiketlerinin altında görünür. 

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

Parametreler

AdTürAçıklama
titleStringX ekseninin başlığı.

Return

LineChartBuilder: Zincirleme için kullanışlı olan bu oluşturucu.

setXAxisTitleTextStyle(textStyle)

Yatay eksen başlığı metin stilini ayarlar. 

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

Parametreler

AdTürAçıklama
textStyleTextStyleYatay eksen başlığı için kullanılacak metin stili. Charts.newTextStyle() işlevini çağırarak TextStyleBuilder nesnesi oluşturabilirsiniz.

Return

LineChartBuilder: Zincirleme için kullanışlı olan bu oluşturucu.

setYAxisTextStyle(textStyle)

Dikey eksen metin stilini ayarlar. 

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

Parametreler

AdTürAçıklama
textStyleTextStyleYatay eksen başlığı için kullanılacak metin stili. Charts.newTextStyle() işlevini çağırarak TextStyleBuilder nesnesi oluşturabilirsiniz.

Return

LineChartBuilder: Zincirleme için kullanışlı olan bu oluşturucu.

setYAxisTitle(title)

Dikey eksene başlık ekler. Başlık ortalanır ve değer etiketlerinin solunda görünür. 

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

Parametreler

AdTürAçıklama
titleStringY ekseninin başlığı.

Return

LineChartBuilder: Zincirleme için kullanışlı olan bu oluşturucu.

setYAxisTitleTextStyle(textStyle)

Dikey eksen başlığı metin stilini ayarlar. 

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

Parametreler

AdTürAçıklama
textStyleTextStyleYatay eksen başlığı için kullanılacak metin stili. Charts.newTextStyle() işlevini çağırarak TextStyleBuilder nesnesi oluşturabilirsiniz.

Return

LineChartBuilder: Zincirleme için kullanışlı olan bu oluşturucu.

useLogScale()

Aralık eksenini logaritmik ölçek yapar (tüm değerlerin pozitif olması gerekir). Değer ekseni, dikey grafikler (ör. çizgi, alan veya sütun) için dikey eksen, yatay grafikler (ör. çubuk) için yatay eksendir.

Return

LineChartBuilder: Zincirleme için kullanışlı olan bu oluşturucu.