Class AreaChartBuilder

AreaChartBuilder

Builder untuk diagram area. Untuk mengetahui detail selengkapnya, lihat dokumentasi Google Chart.

Berikut ini adalah contoh yang menampilkan cara membuat sebuah diagram area.

  // Create a data table with some sample data.
  var sampleData = Charts.newDataTable()
      .addColumn(Charts.ColumnType.STRING, "Month")
      .addColumn(Charts.ColumnType.NUMBER, "Dining")
      .addColumn(Charts.ColumnType.NUMBER, "Total")
      .addRow(["Jan", 60, 520])
      .addRow(["Feb", 50, 430])
      .addRow(["Mar", 53, 440])
      .addRow(["Apr", 70, 410])
      .addRow(["May", 80, 390])
      .addRow(["Jun", 60, 500])
      .addRow(["Jul", 100, 450])
      .addRow(["Aug", 140, 431])
      .addRow(["Sep", 75, 488])
      .addRow(["Oct", 70, 521])
      .addRow(["Nov", 58, 388])
      .addRow(["Dec", 63, 400])
      .build();

  var chart = Charts.newAreaChart()
      .setTitle('Yearly Spending')
      .setXAxisTitle('Month')
      .setYAxisTitle('Spending (USD)')
      .setDimensions(600, 500)
      .setStacked()
      .setColors(['red', 'green'])
      .setDataTable(sampleData)
      .build();

Metode

MetodeJenis hasil yang ditampilkanDeskripsi singkat
build()ChartMembuat diagram.
reverseCategories()AreaChartBuilderMembalikkan gambar deret dalam sumbu domain.
setBackgroundColor(cssValue)AreaChartBuilderMenetapkan warna latar belakang untuk diagram.
setColors(cssValues)AreaChartBuilderMenetapkan warna untuk garis dalam diagram.
setDataSourceUrl(url)AreaChartBuilderMenetapkan URL sumber data yang digunakan untuk mengambil data dari sumber eksternal, seperti Google Spreadsheet.
setDataTable(tableBuilder)AreaChartBuilderMenetapkan tabel data yang akan digunakan untuk diagram dengan DataTableBuilder.
setDataTable(table)AreaChartBuilderMenetapkan tabel data yang berisi garis untuk diagram, serta label sumbu X.
setDataViewDefinition(dataViewDefinition)AreaChartBuilderMenetapkan definisi tampilan data yang akan digunakan untuk diagram.
setDimensions(width, height)AreaChartBuilderMenetapkan dimensi untuk diagram.
setLegendPosition(position)AreaChartBuilderMenetapkan posisi legenda terhadap diagram.
setLegendTextStyle(textStyle)AreaChartBuilderMenetapkan gaya teks legenda diagram.
setOption(option, value)AreaChartBuilderMenetapkan opsi lanjutan untuk diagram ini.
setPointStyle(style)AreaChartBuilderMenetapkan gaya untuk titik dalam garis.
setRange(start, end)AreaChartBuilderMenetapkan rentang untuk diagram.
setStacked()AreaChartBuilderMenggunakan garis bertumpuk, artinya nilai garis dan batang ditumpuk (terakumulasi).
setTitle(chartTitle)AreaChartBuilderMenetapkan judul diagram.
setTitleTextStyle(textStyle)AreaChartBuilderMenetapkan gaya teks judul diagram.
setXAxisTextStyle(textStyle)AreaChartBuilderMenetapkan gaya teks sumbu horizontal.
setXAxisTitle(title)AreaChartBuilderMenambahkan judul ke sumbu horizontal.
setXAxisTitleTextStyle(textStyle)AreaChartBuilderMenetapkan gaya teks judul sumbu horizontal.
setYAxisTextStyle(textStyle)AreaChartBuilderMenetapkan gaya teks sumbu vertikal.
setYAxisTitle(title)AreaChartBuilderMenambahkan judul ke sumbu vertikal.
setYAxisTitleTextStyle(textStyle)AreaChartBuilderMenetapkan gaya teks judul sumbu vertikal.
useLogScale()AreaChartBuilderMembuat sumbu rentang menjadi skala logaritmik (mengharuskan semua nilai menjadi positif).

Dokumentasi mendetail

build()

Membuat diagram.

Pulang pergi

Chart — Objek Diagram, yang dapat disematkan ke dalam dokumen, elemen UI, atau digunakan sebagai elemen statis gambar.


reverseCategories()

Membalikkan gambar deret dalam sumbu domain. Untuk diagram rentang vertikal (seperti garis, diagram area atau kolom), ini berarti sumbu horizontal digambar dari kanan ke kiri. Sebagai diagram rentang horizontal (seperti diagram batang), ini berarti sumbu vertikal digambar dari atas ke ke bawah. Untuk diagram lingkaran, ini berarti irisan digambar berlawanan arah jarum jam.

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

Pulang pergi

AreaChartBuilder — Builder ini, berguna untuk perantaian.


setBackgroundColor(cssValue)

Menetapkan warna latar belakang untuk diagram.

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

Parameter

NamaJenisDeskripsi
cssValueStringNilai CSS untuk warna (seperti "blue" atau "#00f").

Pulang pergi

AreaChartBuilder — Builder ini, berguna untuk perantaian.


setColors(cssValues)

Menetapkan warna untuk garis dalam diagram.

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

Parameter

NamaJenisDeskripsi
cssValuesString[]Array nilai CSS warna, seperti ["red", "#acf"]. Elemen ke-n dalam array mewakili warna baris ke-n dalam diagram.

Pulang pergi

AreaChartBuilder — Builder ini, berguna untuk perantaian.


setDataSourceUrl(url)

Menetapkan URL sumber data yang digunakan untuk mengambil data dari sumber eksternal, seperti Google Spreadsheet. Jika URL sumber data dan DataTable diberikan, URL sumber data akan diabaikan.

Untuk mengetahui informasi selengkapnya tentang mengkueri sumber data, lihat dokumentasi Diagram Google.

Parameter

NamaJenisDeskripsi
urlStringURL sumber data, termasuk parameter kueri.

Pulang pergi

AreaChartBuilder — Builder ini, berguna untuk perantaian.


setDataTable(tableBuilder)

Menetapkan tabel data yang akan digunakan untuk diagram dengan DataTableBuilder. Ini adalah metode praktis untuk mengatur tabel data tanpa perlu memanggil build().

Parameter

NamaJenisDeskripsi
tableBuilderDataTableBuilderPembuat tabel data. Tabel data baru dibuat secara instan sebagai bagian dari dipanggil, sehingga setiap pembaruan lebih lanjut pada builder tidak akan tercermin dalam diagram.

Pulang pergi

AreaChartBuilder — Builder ini, berguna untuk perantaian.


setDataTable(table)

Menetapkan tabel data yang berisi garis untuk diagram, serta label sumbu X. Tujuan kolom pertama harus berupa string, dan berisi label sumbu horizontal. Berapa pun jumlah kolom bisa diikuti, semua harus numerik. Setiap kolom ditampilkan sebagai baris terpisah.

Parameter

NamaJenisDeskripsi
tableDataTableSourceTabel data yang akan digunakan untuk diagram.

Pulang pergi

AreaChartBuilder — Builder ini, berguna untuk perantaian.


setDataViewDefinition(dataViewDefinition)

Menetapkan definisi tampilan data yang akan digunakan untuk diagram.

Parameter

NamaJenisDeskripsi
dataViewDefinitionDataViewDefinitionObjek definisi tampilan data yang mendefinisikan tampilan yang harus yang berasal dari sumber data yang diberikan untuk gambar diagram.

Pulang pergi

AreaChartBuilder — Builder ini, berguna untuk perantaian.


setDimensions(width, height)

Menetapkan dimensi untuk diagram.

Parameter

NamaJenisDeskripsi
widthIntegerLebar diagram, dalam piksel.
heightIntegerTinggi diagram, dalam piksel.

Pulang pergi

AreaChartBuilder — Builder ini, berguna untuk perantaian.


setLegendPosition(position)

Menetapkan posisi legenda terhadap diagram. Secara default, tidak ada legenda.

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

Parameter

NamaJenisDeskripsi
positionPositionPosisi legenda.

Pulang pergi

AreaChartBuilder — Builder ini, berguna untuk perantaian.


setLegendTextStyle(textStyle)

Menetapkan gaya teks legenda diagram.

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

Parameter

NamaJenisDeskripsi
textStyleTextStyleGaya teks yang akan digunakan untuk legenda diagram.

Pulang pergi

AreaChartBuilder — Builder ini, berguna untuk perantaian.


setOption(option, value)

Menetapkan opsi lanjutan untuk diagram ini. Lihat opsi yang tersedia untuk diagram ini. Metode ini tidak berpengaruh jika opsi yang diberikan tidak valid.

// Build an area chart with a 1-second animation duration.
var builder = Charts.newAreaChart();
builder.setOption('animation.duration', 1000);
var chart = builder.build();

Parameter

NamaJenisDeskripsi
optionStringOpsi yang perlu ditetapkan.
valueObjectNilai yang akan ditetapkan.

Pulang pergi

AreaChartBuilder — Builder ini, berguna untuk perantaian.


setPointStyle(style)

Menetapkan gaya untuk titik dalam garis. Secara default, titik tidak memiliki gaya tertentu, dan hanya garis tersebut terlihat.

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

Parameter

NamaJenisDeskripsi
stylePointStyleGaya yang akan digunakan untuk titik dalam garis.

Pulang pergi

AreaChartBuilder — Builder ini, berguna untuk perantaian.

Lihat juga


setRange(start, end)

Menetapkan rentang untuk diagram.

Jika ada titik data di luar rentang, rentang akan diperluas untuk menyertakan data tersebut poin.

Parameter

NamaJenisDeskripsi
startNumberNilai untuk garis petak terendah dari sumbu rentang.
endNumberNilai untuk garis petak tertinggi dari sumbu rentang.

Pulang pergi

AreaChartBuilder — Builder ini, berguna untuk perantaian.


setStacked()

Menggunakan garis bertumpuk, artinya nilai garis dan batang ditumpuk (terakumulasi). Secara {i>default<i}, tidak ada penumpukan.

Pulang pergi

AreaChartBuilder — Builder ini, berguna untuk perantaian.


setTitle(chartTitle)

Menetapkan judul diagram. Judul ditampilkan di tengah diagram.

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

Parameter

NamaJenisDeskripsi
chartTitleStringjudul bagan.

Pulang pergi

AreaChartBuilder — Builder ini, berguna untuk perantaian.


setTitleTextStyle(textStyle)

Menetapkan gaya teks judul diagram.

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

Parameter

NamaJenisDeskripsi
textStyleTextStyleGaya teks yang akan digunakan untuk judul diagram. Anda dapat membuat objek TextStyleBuilder dengan memanggil Charts.newTextStyle().

Pulang pergi

AreaChartBuilder — Builder ini, berguna untuk perantaian.


setXAxisTextStyle(textStyle)

Menetapkan gaya teks sumbu horizontal.

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

Parameter

NamaJenisDeskripsi
textStyleTextStyleGaya teks yang akan digunakan untuk judul sumbu horizontal. Anda dapat membuat objek TextStyleBuilder dengan memanggil Charts.newTextStyle().

Pulang pergi

AreaChartBuilder — Builder ini, berguna untuk perantaian.


setXAxisTitle(title)

Menambahkan judul ke sumbu horizontal. Judul berada di tengah dan muncul di bawah nilai sumbu label.

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

Parameter

NamaJenisDeskripsi
titleStringJudul untuk sumbu X.

Pulang pergi

AreaChartBuilder — Builder ini, berguna untuk perantaian.


setXAxisTitleTextStyle(textStyle)

Menetapkan gaya teks judul sumbu horizontal.

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

Parameter

NamaJenisDeskripsi
textStyleTextStyleGaya teks yang akan digunakan untuk judul sumbu horizontal. Anda dapat membuat objek TextStyleBuilder dengan memanggil Charts.newTextStyle().

Pulang pergi

AreaChartBuilder — Builder ini, berguna untuk perantaian.


setYAxisTextStyle(textStyle)

Menetapkan gaya teks sumbu vertikal.

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

Parameter

NamaJenisDeskripsi
textStyleTextStyleGaya teks yang akan digunakan untuk judul sumbu horizontal. Anda dapat membuat objek TextStyleBuilder dengan memanggil Charts.newTextStyle().

Pulang pergi

AreaChartBuilder — Builder ini, berguna untuk perantaian.


setYAxisTitle(title)

Menambahkan judul ke sumbu vertikal. Judul berada di tengah dan muncul di sebelah kiri nilai label.

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

Parameter

NamaJenisDeskripsi
titleStringJudul untuk sumbu Y.

Pulang pergi

AreaChartBuilder — Builder ini, berguna untuk perantaian.


setYAxisTitleTextStyle(textStyle)

Menetapkan gaya teks judul sumbu vertikal.

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

Parameter

NamaJenisDeskripsi
textStyleTextStyleGaya teks yang akan digunakan untuk judul sumbu horizontal. Anda dapat membuat objek TextStyleBuilder dengan memanggil Charts.newTextStyle().

Pulang pergi

AreaChartBuilder — Builder ini, berguna untuk perantaian.


useLogScale()

Membuat sumbu rentang menjadi skala logaritmik (mengharuskan semua nilai menjadi positif). Rentang sel adalah sumbu vertikal untuk diagram vertikal (seperti garis, area, atau kolom) dan sumbu horizontal untuk diagram horizontal (misalnya batang).

Pulang pergi

AreaChartBuilder — Builder ini, berguna untuk perantaian.