Görselleştirme: Alan Grafiği

Genel bakış

Tarayıcıda SVG veya VML kullanılarak oluşturulan alan grafiği. Fareyle noktaların üzerine geldiğinizde ipuçlarını gösterir.

Basit Bir Örnek

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2013',  1000,      400],
          ['2014',  1170,      460],
          ['2015',  660,       1120],
          ['2016',  1030,      540]
        ]);

        var options = {
          title: 'Company Performance',
          hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},
          vAxis: {minValue: 0}
        };

        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 100%; height: 500px;"></div>
  </body>
</html>

Yığma Alanlar

Alan grafiği varsayılan olarak serileri birbirinin üzerine çizer. Bunun yerine, bunları birbirinin üzerine yığabilirsiniz. Böylece her x değerindeki veri değerleri toplanır. Alan grafiğinde her serinin değeri her zaman önceki seri değerine göre yığılır. Negatif ve pozitif değerlerin bir karışımının birikmesi, alanların çakışmasına neden olur. interpolateNulls seçeneğinin yığınlı alan grafikleriyle çalışmadığını unutmayın.

Sol tarafta, isStacked yanlış (varsayılan) ve sağ tarafta ise doğru değerine ayarlanır:

Açıklamalı girişlerin sırası farklıdır. Yığılmış ikinci grafikte sıra, en alta 0 yerleştirilerek dizi öğelerinin yığılmasına daha iyi karşılık gelmesiyle açıklamanın verilere karşılık gelmesine neden olur.

Yığınlı alan grafikleri de% 100 yığınlı biçimi destekler. Burada her alan değerindeki öğe yığınları, %100'e kadar kaldırılacak şekilde yeniden ölçeklendirilir. Seçenekler, her bir değeri %100'ün yüzdesi olarak biçimlendiren isStacked: 'percent' ve her değeri 1'lik kesir olarak biçimlendiren isStacked: 'relative' şeklindedir. Ayrıca, işlevsel olarak isStacked: true özelliğine eşdeğer olan bir isStacked: 'absolute' seçeneği de mevcuttur.

Sağdaki% 100 yığınlı grafikte not değerleri 1'in kesirleri olarak göreli 0-1 ölçeğini temel alır.

Yığınlı
        var options_stacked = {
          isStacked: true,
          height: 300,
          legend: {position: 'top', maxLines: 3},
          vAxis: {minValue: 0}
        };
    
% 100 Yığınlı
        var options_fullStacked = {
          isStacked: 'relative',
          height: 300,
          legend: {position: 'top', maxLines: 3},
          vAxis: {
            minValue: 0,
            ticks: [0, .3, .6, .9, 1]
          }
        };
    

Dizilerinizden birinde x değerlerinizden bazıları için veri olmadığını varsayalım. Örneğin, yukarıdaki grafiklerde, drone'ların 2015'e kadar kullanılamadığını ve Segway'in 2014'te kullanılamadığını varsayalım. Verilerin eksik olduğu boş değerler kullandığımızdan, grafik aşağıdaki gibi görünecektir:

Bu süreksizlikler itiraz etmiyorsa sıfırlar için sıfırların yerine kullanabilir ve/veya interpolateNulls seçeneğini true olarak ayarlayabilirsiniz:

Yükleniyor

google.charts.load paket adı "corechart".

  google.charts.load("current", {packages: ["corechart"]});

Görselleştirmenin sınıf adı: google.visualization.AreaChart.

  var visualization = new google.visualization.AreaChart(container);

Veri Biçimi

Satırlar: Tablodaki her satır, aynı x ekseni konumuna sahip veri noktalarını gösterir.

Sütunlar:

  Sütun 0 1. Sütun ... Sütun N
Amaç: Satır 1 değerleri ... Satır N değerleri
Veri Türü: number (sayı) ... number (sayı)
Rol: alan veri ... veri
İsteğe bağlı sütun rolleri: ...

 

Yapılandırma Seçenekleri

Ad
ToplamaHedefi
Birden fazla veri seçimi, ipuçları şeklinde nasıl birleştirilir?
  • 'category': Seçili verileri x değerine göre gruplandırın.
  • 'series': Seçili verileri seriye göre gruplandırın.
  • 'auto': Tüm seçimlerde aynı x değeri varsa seçili verileri x değerine, aksi takdirde serilere göre gruplandırın.
  • 'none': Seçim başına yalnızca bir ipucu gösterin.
aggregationTarget genellikle selectionMode ve tooltip.trigger ile birlikte kullanılır. Örneğin:
var options = {
  // Allow multiple
  // simultaneous selections.
  selectionMode: 'multiple',
  // Trigger tooltips
  // on selections.
  tooltip: {trigger: 'selection'},
  // Group selections
  // by x-value.
  aggregationTarget: 'category',
};
    
Tür: dize
Varsayılan: "auto"
animasyon.süre

Animasyonun milisaniye cinsinden süresi. Ayrıntılar için animasyon dokümanlarına bakın.

Tür: sayı
Varsayılan: 0
animasyon.yumuşak geçiş

Animasyona uygulanan yumuşak geçiş işlevi. Aşağıdaki seçenekler kullanılabilir:

  • "linear" - Sabit hız.
  • 'in' - Yavaş girin - Yavaş başlayın ve hızınızı artırın.
  • "out" (Çıkış) - Yavaşlatma - Hızlı başlatma ve yavaşlatma.
  • 'inAndOut' - Kolayca giriş ve çıkış - Yavaşlayın, hızlandırın ve ardından yavaşlatın.
Tür: dize
Varsayılan: "doğrusal"
animasyon.başlangıç

Grafiğin ilk çizimde animasyon oluşturup oluşturmayacağını belirler. true değerindeki grafik, başlangıç noktasından başlar ve son durumuna döner.

Tür: boole
Varsayılan yanlış
notlar.boxStyle

Ek açıklamaları destekleyen grafiklerde annotations.boxStyle nesnesi, ek açıklamaları çevreleyen kutuların görünümünü kontrol eder:

var options = {
  annotations: {
    boxStyle: {
      // Color of the box outline.
      stroke: '#888',
      // Thickness of the box outline.
      strokeWidth: 1,
      // x-radius of the corner curvature.
      rx: 10,
      // y-radius of the corner curvature.
      ry: 10,
      // Attributes for linear gradient fill.
      gradient: {
        // Start color for gradient.
        color1: '#fbf6a7',
        // Finish color for gradient.
        color2: '#33b679',
        // Where on the boundary to start and
        // end the color1/color2 gradient,
        // relative to the upper left corner
        // of the boundary.
        x1: '0%', y1: '0%',
        x2: '100%', y2: '100%',
        // If true, the boundary for x1,
        // y1, x2, and y2 is the box. If
        // false, it's the entire chart.
        useObjectBoundingBoxUnits: true
      }
    }
  }
};
    

Bu seçenek şu anda alan, çubuk, sütun, karma, çizgi ve dağılım grafikleri için desteklenmektedir. Ek açıklama Grafiği tarafından desteklenmez.

Tür: nesne
Varsayılan: null
notlar.datum
Ek açıklamaları destekleyen grafiklerde annotations.datum nesnesi, Google Grafikler'in bağımsız veri öğeleri için sağlanan ek açıklamalar (örneğin, çubuk grafikte her çubukla görüntülenen değerler) seçimini geçersiz kılmanıza olanak tanır. Rengi annotations.datum.stem.color ile, kök uzunluğu annotations.datum.stem.length ile ve stili annotations.datum.style ile kontrol edebilirsiniz.
Tür: nesne
Varsayılan: Renk "siyah", uzunluk 12, stil "nokta"dır.
notlar.alanadi
Ek açıklamaları destekleyen grafiklerde annotations.domain nesnesi, Google Domains'in bir alan için sağlanan ek açıklamalar (tercih edilen çizgi çizgisindeki X ekseni gibi) üzerindeki ek tercihi geçersiz kılmanıza olanak tanır. Rengi annotations.domain.stem.color ile, kök uzunluğu annotations.domain.stem.length ile ve stili annotations.domain.style ile kontrol edebilirsiniz.
Tür: nesne
Varsayılan: Renk "siyah", uzunluk 5, stil "nokta"dır.
notlar.boşluk
Ek açıklamaları destekleyen grafiklerde annotations.highContrast boole, Google Grafikler'in ek açıklama rengi seçimini geçersiz kılmanıza olanak tanır. Varsayılan olarak annotations.highContrast ayarı doğrudur. Bu seçenek, Grafiklerin iyi kontrasta sahip bir ek açıklama rengi seçmesine neden olur: Koyu arka planlarda açık renkler, açık renkte ise koyu renk. annotations.highContrast değerini yanlış olarak ayarlarsanız ve kendi ek açıklama renginizi belirtmezseniz Google Listeler, ek açıklama için varsayılan dizi rengini kullanır:
Tür: boole
Varsayılan: true
notlar.kök
Ek açıklamayı destekleyen grafikler için annotations.stem nesnesi, Google Listeler'in kök stili seçimini geçersiz kılmanıza olanak tanır. Rengi annotations.stem.color ile, kök uzunluğunu ise annotations.stem.length ile kontrol edebilirsiniz. Kök uzunluğu seçeneğinin, 'line' stiline sahip ek açıklamalar üzerinde etkisi olmadığını unutmayın: 'line' veri ek açıklamalarında kök uzunluğu her zaman metinle aynıdır. 'line' alan ek açıklamalarında kök, tüm grafiğe yayılır.
Tür: nesne
Varsayılan: Renk "siyah", alan ek açıklamaları için ise 5 ve veri içeren ek açıklamalar için 12'dir.
notlar.stil
Ek açıklamaları destekleyen grafiklerde annotations.style seçeneği, Google Grafikler'in ek açıklama türü seçimini geçersiz kılmanıza olanak tanır. 'line' veya 'point' olabilir.
Tür: dize
Varsayılan: "point"
notlar.metinStil
Ek açıklamaları destekleyen grafiklerde annotations.textStyle nesnesi, ek açıklama metninin görünümünü kontrol eder:
var options = {
  annotations: {
    textStyle: {
      fontName: 'Times-Roman',
      fontSize: 18,
      bold: true,
      italic: true,
      // The color of the text.
      color: '#871b47',
      // The color of the text outline.
      auraColor: '#d799ae',
      // The transparency of the text.
      opacity: 0.8
    }
  }
};
    

Bu seçenek şu anda alan, çubuk, sütun, karma, çizgi ve dağılım grafikleri için desteklenmektedir. Ek açıklama Grafiği tarafından desteklenmez.

Tür: nesne
Varsayılan: null
alan Opaklığı

Alan grafiği serisinde renkli alanın varsayılan opaklığı. 0,0 tamamen şeffaf, 1,0 ise opaktır. Tek bir serinin opaklığını belirtmek için series özelliğinde AreaOpacity değerini ayarlayın.

Tür: sayı, 0,0 - 1,0
Varsayılan: 0,3
ekseniTitleSKonumu

Eksen başlıklarının yerleştirileceği grafik alanı. Desteklenen değerler:

  • in - Eksen başlıklarını grafik alanı içinde çizin.
  • dışarı - Eksen başlıklarını grafik alanının dışında çizin.
  • Yok - Eksen başlıklarını çıkarın.
Tür: dize
Varsayılan: "out"
arka plan rengi

Grafiğin ana alanının arka plan rengi. Basit bir HTML renk dizesi (ör. 'red' veya '#00cc00') ya da aşağıdaki özelliklere sahip bir nesne olabilir.

Tür: dize veya nesne
Varsayılan: "white"
arka plan rengi.fırça

HTML renk dizesi olarak grafik kenarlığının rengi.

Tür: dize
Varsayılan: "#666"
arka plan Rengi.strokeGenişliği

Piksel cinsinden kenarlık genişliği.

Tür: sayı
Varsayılan: 0
arka plan Rengi.dolgu

HTML renk dizesi olarak grafik dolgu rengi.

Tür: dize
Varsayılan: "white"
grafikAlanı

Grafik alanının yerleşimini ve boyutunu yapılandırmak için üyeleri olan bir nesne (eksen ve açıklamalar hariç, grafiğin kendisinin çizildiği yer). İki biçim desteklenir: Sayı veya sayı ve ardından %. Örnek: chartArea:{left:20,top:0,width:'50%',height:'75%'}

Tür: nesne
Varsayılan: null
grafikAlanı.Arkaplan Rengi
Grafik alanı arka plan rengi. Bir dize kullanıldığında, onaltılık bir dize olabilir (ör. "#fdc") veya İngilizce renk adını kullanın. Bir nesne kullanıldığında aşağıdaki özellikler sağlanabilir:
  • stroke: On altılık dize veya İngilizce renk adı olarak sağlanan renk.
  • strokeWidth: Varsa, sağlanan genişliğin (ve stroke rengi) grafik alanının etrafına bir kenarlık çizer.
Tür: dize veya nesne
Varsayılan: "white"
grafikAlanı.sol

Grafiğin sol kenarlıktan ne kadar uzağa çizileceği.

Tür: sayı veya dize
Varsayılan: otomatik
grafikAlanı.top

Grafiğin üst kenarlıktan ne kadar uzağa çizileceği.

Tür: sayı veya dize
Varsayılan: otomatik
grafikAlanı.genişliği

Grafik alanı genişliği.

Tür: sayı veya dize
Varsayılan: otomatik
grafikAlanı.yükseklik

Grafik alanı yüksekliği.

Tür: sayı veya dize
Varsayılan: otomatik
renkler

Grafik öğeleri için kullanılacak renkler. Her bir öğenin HTML renk dizesi olduğu bir dize dizisi. Örneğin: colors:['red','#004411'].

Tür: Dize dizisi
Varsayılan: varsayılan renkler
artı işareti

Grafiğin çapraz özelliklerini içeren bir nesne.

Tür: nesne
Varsayılan: null
artı işareti

Renk rengi, renk adı (ör. "blue") veya RGB değeri (ör. "#adf").

Tür: dize
Tür: varsayılan
artı işareti

Odak noktasında artı özelliklerini içeren bir nesne.
Örnek: crosshair: { focused: { color: '#3bc', opacity: 0.8 } }

Tür: nesne
Varsayılan: varsayılan
Crosshair.opacity

Çapraz opaklık, 0.0 tamamen şeffaf ve 1.0 opaktır.

Tür: sayı
Varsayılan: 1,0
çapraz_yön.orientation

Yalnızca dikey saçlar için "dikey", yalnızca yatay saçlar için "yatay" veya geleneksel artılar için "her ikisi de" olabilecek artı artı yönü.

Tür: dize
Varsayılan: "her ikisi"
artı işareti

Seçildiğinde artı özelliklerini içeren bir nesne.
Örnek: crosshair: { selected: { color: '#3bc', opacity: 0.8 } }

Tür: nesne
Varsayılan: varsayılan
crosshair.trigger

Çapraz artı: 'focus', 'selection' veya 'both' üzerinde.

Tür: dize
Varsayılan: "her ikisi"
dataOpaklık

Veri noktalarının şeffaflığı (1,0 tamamen opak, 0,0 tamamen şeffaf). Dağılım, histogram, çubuk ve sütun grafiklerde bu, görünür veriler anlamına gelir: Dağılım grafiğindeki noktalar ve diğerlerindeki dikdörtgenler. Veri seçmenin nokta oluşturduğu grafiklerde (çizgi ve alan grafikleri gibi) bu, fareyle üzerine gelindiğinde veya seçildiğinde görünen daireleri belirtir. Karma grafik her iki davranışı da gösterir ve bu seçeneğin diğer grafikler üzerinde hiçbir etkisi yoktur. (Trend çizgisinin opaklığını değiştirmek için trend çizgisi opaklığı bölümüne bakın.)

Tür: sayı
Varsayılan: 1,0
Etkileşimi etkinleştir

Grafiğin kullanıcı tabanlı etkinliklerde bulunup bulunmadığı veya kullanıcı etkileşimine tepki verip vermediği. Yanlış değerine ayarlanırsa grafik, "select" (seç) veya diğer etkileşime dayalı etkinlikleri atlar (ancak hazır veya hata etkinliklerini göndermez) ve fareyle üzerine gelindiğinde gösterilen metni görüntülemez veya kullanıcı girişine bağlı olarak başka şekilde değişiklik yapmaz.

Tür: boole
Varsayılan: true
gezgin

explorer seçeneği, kullanıcıların Google grafiklerini kaydırmasına ve yakınlaştırmasına olanak tanır. explorer: {}, varsayılan gezgin davranışı sağlar. Kullanıcılar bu şekilde sürükleyerek yatay ve dikey kaydırma yapabilir, kaydırma yaparak yakınlaştırabilir ve uzaklaştırabilir.

Bu özellik deneyseldir ve gelecekteki sürümlerde değişebilir.

Not: Gezgin yalnızca sürekli eksenlerle (ör. sayılar veya tarihler) çalışır.

Tür: nesne
Varsayılan: null
explorer.actions

Google Listeler Gezgini üç işlemi destekler:

  • dragToPan: Grafiğin etrafında yatay ve dikey olarak kaydırmak için sürükleyin. Yalnızca yatay eksende kaydırmak için explorer: { axis: 'horizontal' } özelliğini kullanın. Dikey eksene benzer şekilde.
  • dragToZoom: Gezginin varsayılan davranışı, kullanıcı ekranı kaydırdığında yakınlaştırma ve uzaklaştırma yapmaktır. explorer: { actions: ['dragToZoom', 'rightClickToReset'] } kullanılıyorsa, dikdörtgen bir alan boyunca sürüklemek bu alanı yakınlaştırır. dragToZoom her kullanıldığında rightClickToReset kullanmanızı öneririz. Yakınlaştırma özelleştirmeleri için explorer.maxZoomIn, explorer.maxZoomOut ve explorer.zoomDelta konularına bakın.
  • rightClickToReset: Grafiği sağ tıkladığınızda orijinal kaydırma ve yakınlaştırma düzeyine döndürülür.
Tür: Dize dizisi
Varsayılan: ['dragToPan', 'rightClickToReset']
explorer.eksen

Varsayılan olarak, explorer seçeneği kullanıldığında kullanıcılar yatay ve dikey yönde kaydırma yapabilir. Kullanıcıların yalnızca yatay kaydırma yapmasını isterseniz explorer: { axis: 'horizontal' } özelliğini kullanın. Benzer şekilde explorer: { axis: 'vertical' } yalnızca dikey kaydırmayı etkinleştirir.

Tür: dize
Varsayılan: Hem yatay hem de dikey kaydırma
explorer.keepinBounds

Varsayılan olarak, veriler nerede olursa olsun kullanıcılar her yönde kaydırılabilir. Kullanıcıların orijinal grafiğin ötesine geçmemek için explorer: { keepInBounds: true } özelliğini kullanın.

Tür: boole
Varsayılan: false
gezgin.maxZoom

Gezginin yakınlaştırabileceği maksimum değer. Varsayılan olarak, kullanıcılar orijinal görünümün yalnızca% 25'ini görünecek kadar yakınlaştırma yapabilir. explorer: { maxZoomIn: .5 } ayarlamak, kullanıcıların orijinal görünümün yalnızca yarısını görmek için ekranı yeterince yakınlaştırmasına olanak tanır.

Tür: sayı
Varsayılan: 0,25
explorer.maxZoomout

Gezginin uzaklaşabileceği maksimum değer. Varsayılan olarak, kullanıcılar grafiğin kullanılabilir alanın yalnızca 1/4'ünü kaplayacak kadar uzaklaşabilir. explorer: { maxZoomOut: 8 } ayarlamak, kullanıcıların grafiğin mevcut alanın yalnızca 1/8'ini kaplayacak kadar uzaklaştırmasına olanak tanır.

Tür: sayı
Varsayılan: 4
gezgin.ZoomDelta

Kullanıcılar yakınlaştırdığında veya uzaklaştırdığında, explorer.zoomDelta ne kadar yakınlaştırma yaptıklarını belirler. Sayı küçüldükçe yumuşatılır ve yakınlaştırmayı yavaşlatır.

Tür: sayı
Varsayılan: 1,5
odakHedef

Fareyle üzerine gelindiğinde odağı alan varlığın türü. Ayrıca hangi öğenin fare tıklamasıyla seçileceğini ve hangi veri tablosu öğesinin etkinliklerle ilişkilendirildiğini de etkiler. Aşağıdakilerden biri olabilir:

  • " datum" - Tek bir veri noktasına odaklanın. Veri tablosundaki bir hücreyle ilişkilidir.
  • "kategori" - Ana eksendeki tüm veri noktalarının grubuna odaklanın. Veri tablosundaki bir satırla ilişkilidir.

focusTarget "kategorisi"ndeki ipucu, tüm kategori değerlerini görüntüler. Bu, farklı serilerin değerlerini karşılaştırmak için yararlı olabilir.

Tür: dize
Varsayılan: "datum"
yazı tipi boyutu

Grafikteki tüm metinlerin piksel cinsinden varsayılan yazı tipi boyutu. Belirli grafik öğelerinin özelliklerini kullanarak bunu geçersiz kılabilirsiniz.

Tür: sayı
Varsayılan: otomatik
yazı tipi adı

Grafikteki tüm metinlerin varsayılan yazı tipi yüzü. Belirli grafik öğelerinin özelliklerini kullanarak bunu geçersiz kılabilirsiniz.

Tür: dize
Varsayılan: "score"
Zorunlu iFrame

Grafiği satır içi bir çerçevenin içine çizer. (IE8'de bu seçeneğin yoksayıldığını unutmayın; tüm IE8 grafikleri i-frame'ler ile çizilmiştir.)

Tür: boole
Varsayılan: false
hAxis'ler

Çeşitli yatay eksen öğelerini yapılandırmak için üyeler içeren bir nesne. Bu nesnenin özelliklerini belirtmek için aşağıda gösterildiği gibi nesne değişmez gösterimini kullanabilirsiniz:

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
    
Tür: nesne
Varsayılan: null
hAxis.baseline

Yatay eksenin referans değeri.

Bu seçenek yalnızca continuous ekseni için desteklenir.

Tür: sayı
Varsayılan: otomatik
hAxis.baselineColor

Yatay eksen referans çizgisinin rengi. Herhangi bir HTML renk dizesi olabilir. Örneğin: 'red' veya '#00cc00'.

Bu seçenek yalnızca continuous ekseni için desteklenir.

Tür: sayı
Varsayılan: "siyah"
hAxis.direction

Yatay eksendeki değerlerin büyüme yönü. Değerlerin sırasını tersine çevirmek için -1 özelliğini belirtin.

Tür: 1 veya -1
Varsayılan: 1
hAxis.biçimi

Sayısal veya tarih ekseni etiketleri için bir biçim dizesi.

Sayı ekseni etiketleri için bu, ondalık biçimlendirmenin alt kümesidir ICU kalıbı grubu . Örneğin {format:'#,###%'}, 10, 7,5 ve 0,5 değerleri için "%1.000", "%750" ve "%50" değerlerini gösterir. Aşağıdakilerden birini de sağlayabilirsiniz:

  • {format: 'none'}: Sayıları biçimlendirmeden gösterir (ör. 8000000)
  • {format: 'decimal'}: Binlerce ayırıcı içeren sayıları gösterir (ör. 8.000.000)
  • {format: 'scientific'}: Sayıları bilimsel gösterimle gösterir (ör. 8e6)
  • {format: 'currency'}: Numaraları yerel para biriminde gösterir (ör. 8.000.000,00)
  • {format: 'percent'}: sayıları yüzde olarak görüntüler (ör. %800.000.000)
  • {format: 'short'}: kısaltılmış sayıları gösterir (ör. 8 milyon)
  • {format: 'long'}: Numaraları tam kelime olarak görüntüler (ör. 8 milyon)

Tarih ekseni etiketleri için bu, ICU kalıbı grubu tarih biçiminin bir alt kümesidir. Örneğin {format:'MMM d, y'}, 2011 yılının ilk Temmuz günü için "1 Temmuz 2011" değerini gösterir.

Etikete uygulanan gerçek biçimlendirme, API'nin yüklenmiş olduğu yerel ayardan türetilir. Daha ayrıntılı bilgi için belirli bir yerel ayara sahip grafikler yükleme başlıklı makaleyi inceleyin.

Onay işareti değerleri ve kılavuz çizgileri hesaplanırken, ilgili tüm kılavuz çizgisi seçeneklerinin birkaç alternatif kombinasyonu dikkate alınır ve biçimlendirilmiş işaret etiketlerinin kopyalanması veya örtüşmesi durumunda alternatifler reddedilir. Bu nedenle, yalnızca tam sayı onay işaretinin gösterilmesini istiyorsanız format:"#" değerini belirtebilirsiniz. Ancak bu koşulun alternatifi yoksa, herhangi bir ızgara veya onay işaretinin gösterilmeyeceğini unutmayın.

Bu seçenek yalnızca bir continuous ekseni için desteklenir.

Tür: dize
Varsayılan: otomatik
hAxis.gridlines

Yatay eksendeki ızgara çizgilerini yapılandıracak özelliklere sahip bir nesne. Yatay eksen kılavuz çizgilerinin dikey olarak çizildiğini unutmayın. Bu nesnenin özelliklerini belirtmek için aşağıda gösterildiği gibi nesne değişmez gösterimini kullanabilirsiniz:

{color: '#333', minSpacing: 20}

Bu seçenek yalnızca bir continuous ekseni için desteklenir.

Tür: nesne
Varsayılan: null
hAxis.gridlines.color

Grafik alanı içindeki yatay kılavuz çizgilerinin rengi. Geçerli bir HTML renk dizesi belirtin.

Tür: dize
Varsayılan: "#CCC"
hAxis.gridlines.count

Grafik alanı içindeki yaklaşık yatay kılavuz çizgisi sayısı. gridlines.count için pozitif bir sayı belirtirseniz bu sayı, ızgaralar arasında minSpacing hesaplamak için kullanılır. Yalnızca bir kılavuz çizgisi çizmek için 1 değerini veya hiçbir çizgi çizgisini çizmemek için 0 değerini belirtebilirsiniz. Diğer seçeneklere bağlı olarak kılavuz çizgilerinin sayısını otomatik olarak hesaplamak için varsayılan değer olan -1 değerini belirtin.

Tür: sayı
Varsayılan: -1
hAxis.gridlines.interval

Bitişik kılavuz çizgileri arasındaki boyut dizisi (piksel olarak değil, veri değeri olarak). Bu seçenek şu an için yalnızca eksensel eksenler içindir, ancak yalnızca tarihler ve saatler için kullanılan gridlines.units.<unit>.interval seçeneklerine benzer. Doğrusal ölçekler için varsayılan olarak [1, 2, 2.5, 5] kullanılır.Bu, ızgara çizgisi değerlerinin her birime (1), çift birimlere (2) veya 2,5 veya 5'in katlarına çarpabileceği anlamına gelir. Bu değerlerin 10 katı değeri de geçerlidir (ör. [10, 20, 25, 50] ve [.1, 0,2, 0,55]). Günlük ölçeklendirmeleri için varsayılan olarak [1, 2, 5] değeri kullanılır.

Tür: 10 hariç 1 ile 10 arasında bir sayı.
Varsayılan: hesaplanan
hAxis.gridlines.minSPageSpeed

hAxis ana kılavuz çizgileri arasındaki piksel cinsinden minimum ekran alanı. Büyük kılavuz çizgilerinin varsayılan değeri, doğrusal ölçekler için 40 ve günlük ölçekler için 20 şeklindedir. minSpacing öğesini belirtmezseniz count öğesini belirtirseniz minSPageSpeed sayısı sayımdan hesaplanır. Öte yandan, count yerine minSpacing öğesini belirtirseniz sayı, minSİlerleme hızından hesaplanır. İkisini de belirtirseniz minSpacing geçersiz kılar.

Tür: sayı
Varsayılan: hesaplanan
hAxis.gridlines.Multiple

Tüm kılavuz çizgisi ve onay değerleri, bu seçeneğin değerinin katı olmalıdır. Aralıkların aksine, çarpmanın 10 katı gücünün dikkate alınmadığını unutmayın. Bu nedenle, gridlines.multiple = 1 öğesini belirterek değer işaretlerini tam sayı haline getirmeye veya gridlines.multiple = 1000 belirterek 1.000'in katları olmaya zorlayabilirsiniz.

Tür: sayı
Varsayılan: 1
hAxis.gridlines.units

Grafik hesaplanan ızgaralarla kullanıldığında tarih/tarih/saat/saat veri türlerinin çeşitli yönleri için varsayılan biçimi geçersiz kılar. Yıl, ay, gün, saat, dakika, saniye ve milisaniye biçimlendirmesine izin verir.

Genel biçim şöyledir:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}
    

Daha fazla bilgiyi Tarihler ve Saatler'de bulabilirsiniz.

Tür: nesne
Varsayılan: null
hAxis.minor Izgaralar

hAxis.gridlines seçeneğine benzer olarak, yatay eksendeki alt ızgaraları yapılandırmak için üyeleri olan bir nesne.

Bu seçenek yalnızca bir continuous ekseni için desteklenir.

Tür: nesne
Varsayılan: null
hAxis.minor Izgaralar.renk

Grafik alanı içindeki yatay küçük kılavuz çizgilerinin rengi. Geçerli bir HTML renk dizesi belirtin.

Tür: dize
Varsayılan: Kılavuz çizgisi ve arka plan renklerinin bir karışımı
hAxis.minor Izgaralar.count

Sayısı 0 olarak ayarlanmış küçük kılavuz çizgilerini devre dışı bırakma dışında minorGridlines.count seçeneği çoğunlukla kullanımdan kaldırılmıştır. Küçük kılavuz çizgilerinin sayısı artık ana kılavuz çizgileri (hAxis.gridlines.interval) ile gerekli minimum aralık (hAxis.minorGridlines.minSpacing) arasında tümüyle geçişe bağlıdır.

Tür: sayı
Varsayılan:1
hAxis.minor Izgaralar.interval

reşit olmayan Izgaralar.aralık seçeneği, ana kılavuz çizgisi aralığı seçeneğine benzer ancak seçilen aralık her zaman ana kılavuz çizgisi aralığının eşit bir böleni olacaktır. Doğrusal ölçekler için varsayılan aralık [1, 1.5, 2, 2.5, 5] ve günlük ölçekleri için [1, 2, 5] şeklindedir.

Tür: sayı
Varsayılan:1
hAxis.minorCURlines.minSPageSpeed

Bitişik alt kılavuz çizgileri ile küçük ve ana hatlar arasında piksel cinsinden gereken minimum boşluk. Varsayılan değer, doğrusal ölçekler için ana ızgara çizgilerinin 1/2 min. ilerleme hızı ve günlük ölçekler için minSPageSpeed'in 1/5'idir.

Tür: sayı
Varsayılan: hesaplanan
hAxis.minor Izgaralar.çoklu

Başlıca gridlines.multiple için de durum aynıdır.

Tür: sayı
Varsayılan: 1
hAxis.minorCURlines.units

Grafik cinsinden hesaplanan küçük tablolarla kullanıldığında tarih/tarih/saat/saat veri türlerinin çeşitli yönleri için varsayılan biçimi geçersiz kılar. Yıl, ay, gün, saat, dakika, saniye ve milisaniye biçimlendirmesine izin verir.

Genel biçim şöyledir:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}
    

Daha fazla bilgiyi Tarihler ve Saatler'de bulabilirsiniz.

Tür: nesne
Varsayılan: null
hAxis.logÖlçek

Yatay ekseni logaritmik ölçek yapan hAxis özelliği (tüm değerlerin pozitif olmasını gerektirir). Evet için "true" olarak ayarlayın.

Bu seçenek yalnızca continuous ekseni için desteklenir.

Tür: boole
Varsayılan: false
hAxis.scaleType

Yatay ekseni logaritmik ölçek yapan hAxis özelliği. Aşağıdakilerden biri olabilir:

  • null - Logaritmik ölçeklendirme yapılmaz.
  • 'log' - Logaritmik ölçeklendirme. Negatif ve sıfır değerler çizilemez. Bu seçenek hAxis: { logscale: true } ayarıyla aynıdır.
  • 'mirrorLog' - Negatif ve sıfır değerlerin çizildiği logaritmik ölçeklendirme. Negatif bir sayının çizilmiş değeri, mutlak değerin günlüğünün negatifidir. 0'a yakın değerler doğrusal bir ölçekte gösterilir.

Bu seçenek yalnızca continuous ekseni için desteklenir.

Tür: dize
Varsayılan: null
hAxis.metinKonumu

Yatay eksen metninin grafik alanına göre konumu. Desteklenen değerler: "out", "in", "none".

Tür: dize
Varsayılan: "out"
hAxis.textStil

Yatay eksen metin stilini belirten bir nesne. Nesnenin biçimi şu şekildedir:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color, herhangi bir HTML renk dizesi olabilir. Örneğin: 'red' veya '#00cc00'. fontName ve fontSize hükümlerine de bakın.

Tür: nesne
Varsayılan: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.ticks

Otomatik olarak oluşturulan X ekseni onaylarını belirtilen diziyle değiştirir. Dizinin her bir öğesi geçerli bir onay değeri (sayı, tarih, tarih/saat veya günün saati gibi) ya da bir nesne olmalıdır. Bu nesne bir işaret değeri için v özelliğine ve etiket olarak gösterilecek değişmez dizeyi içeren isteğe bağlı bir f özelliğine sahip olmalıdır.

ViewWindow, geçersiz kılınacak bir viewWindow.min veya viewWindow.max belirtmediğiniz sürece min. ve maks. değer işaretlerini içerecek şekilde otomatik olarak genişletilir.

Örnekler:

  • hAxis: { ticks: [5,10,15,20] }
  • hAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • hAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • hAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }

Bu seçenek yalnızca bir continuous ekseni için desteklenir.

Tür: Öğe dizisi
Varsayılan: otomatik
hAxis.başlığı

Yatay eksenin başlığını belirten hAxis özelliği.

Tür: dize
Varsayılan: null
hAxis.titleTextStil

Yatay eksen başlık metni stilini belirten bir nesne. Nesnenin biçimi şu şekildedir:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color, herhangi bir HTML renk dizesi olabilir. Örneğin: 'red' veya '#00cc00'. fontName ve fontSize hükümlerine de bakın.

Tür: nesne
Varsayılan: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hAxis.allowKapsayıcıBoundaryTextCutoff

Yanlış değerine ayarlanırsa grafik kapsayıcı tarafından kırpılmasına izin vermek yerine en harici etiketleri gizler. Doğru değerine ayarlanırsa etiket kırpmaya izin verir.

Bu seçenek yalnızca discrete ekseni için desteklenir.

Tür: boole
Varsayılan: false
hAxis.slantedText

Doğru değerine ayarlanırsa yatay eksen metnini, eksen üzerinde daha fazla metin sığdırmak için belirli bir açıdan çizin; yanlışsa yatay eksen metnini dik şekilde çizin. Varsayılan davranış, metnin tamamı dik olarak çekildiğinde eğilmemesi durumunda metni eğmektir. Bu seçeneğin yalnızca hAxis.textPosition "out" (varsayılan) değerine ayarlandığında kullanılabildiğini unutmayın. Tarihler ve saatler için varsayılan olarak false kullanılır.

Tür: boole
Varsayılan: otomatik
hAxis.slantedTextAngle

Yatay eksen metninin eğimli olması durumunda açısı. hAxis.slantedText değeri false ise veya otomatik moddaysa ve grafik, metni yatay olarak çizmeye karar verirse yok sayılır. Açı pozitifse dönüş saat yönünün tersine, negatifse saat yönüdür.

Tür: sayı, -90-90
Varsayılan: 30
hAxis.maxAlternasyonu

Maksimum yatay eksen metin seviyesi sayısı. Eksen metin etiketleri çok kalabalık olursa sunucu, etiketleri birbirine yaklaştırmak için komşu etiketleri yukarı veya aşağı kaydırabilir. Bu değer, kullanılacak maksimum düzey sayısını belirtir. Etiketler örtüşmeden sığabiliyorsa sunucu daha az düzey kullanabilir. Tarihler ve saatler için varsayılan değer 1'dir.

Tür: sayı
Varsayılan: 2
hAxis.maxTextÇizgileri

Metin etiketleri için izin verilen maksimum satır sayısı. Etiketler çok uzunsa birden fazla satırı kapsayabilir ve satır sayısı varsayılan olarak kullanılabilir alanın yüksekliğiyle sınırlıdır.

Tür: sayı
Varsayılan: otomatik
hAxis.minTextSİlerleme

Bitişik iki metin etiketi arasında piksel cinsinden minimum yatay boşluk bulunur. Etiketler çok yoğun bir şekilde yerleştirilmişse veya çok uzunsa, aralık bu eşiğin altına düşebilir. Bu durumda, etiket düzenli olmayan önlemlerden biri uygulanır (ör. etiketleri kesip kısaltmak).

Tür: sayı
Varsayılan: hAxis.textStyle.fontSize değeri
hAxis.showTextHer

Gösterilecek yatay eksen etiketi sayısı. 1 işareti her etiketi, 2 değeri ise diğer tüm etiketleri gösterir ve bu şekilde devam eder. Varsayılan ayar, çakışma olmadan mümkün olduğunca fazla etiket göstermeye çalışmaktır.

Tür: sayı
Varsayılan: otomatik
hAxis.maxValue

Yatay eksenin maksimum değerini belirtilen değere taşır. Çoğu grafikte sağ tarafta yer alır. Bu değer, verilerin maksimum x değerinden küçük bir değere ayarlanırsa yoksayılır. hAxis.viewWindow.max bu özelliği geçersiz kılar.

Bu seçenek yalnızca bir continuous ekseni için desteklenir.

Tür: sayı
Varsayılan: otomatik
hAxis.minDeğeri

Yatay eksenin minimum değerini belirtilen değere taşır. Bu, çoğu grafikte sol tarafta kalır. Bu değer, verilerin minimum x değerinden büyük bir değere ayarlanırsa yoksayılır. hAxis.viewWindow.min bu özelliği geçersiz kılar.

Bu seçenek yalnızca bir continuous ekseni için desteklenir.

Tür: sayı
Varsayılan: otomatik
hAxis.viewWindowMode

Değerleri grafik alanı içinde oluşturmak için yatay eksenin nasıl ölçekleneceğini belirtir. Aşağıdaki dize değerleri desteklenir:

  • "pretty" - Yatay değerleri, maksimum ve minimum veri değerleri, grafik alanının solunda ve sağında sağlanacak şekilde ölçeklendirin. ViewWindow, sayılar için en yakın ana hat ya da tarihler ve saatler için en yakın alt geniş ızgara olarak genişletilir.
  • "maximized" (maksimum) - Yatay değerleri ölçeklendirerek maksimum ve minimum veri değerlerinin grafik alanının soluna ve sağına dokunmasını sağlayın. Bu işlem, haxis.viewWindow.min ve haxis.viewWindow.max öğelerinin yoksayılmasına neden olur.
  • "explicit" - Grafik alanının sol ve sağ ölçek değerlerini belirtmek için kullanımdan kaldırılmış bir seçenek. (haxis.viewWindow.min ve haxis.viewWindow.max ile gereksiz olduğundan kullanımdan kaldırıldı.) Bu değerlerin dışındaki veri değerleri kırpılacak. Gösterilecek maksimum ve minimum değerleri açıklayan bir hAxis.viewWindow nesnesi belirtmelisiniz.

Bu seçenek yalnızca bir continuous ekseni için desteklenir.

Tür: dize
Varsayılan: "Güzel"e eşdeğerdir, ancak kullanılırsa haxis.viewWindow.min ve haxis.viewWindow.max öncelikli olur.
hAxis.viewWindow

Yatay eksenin kırpma aralığını belirtir.

Tür: nesne
Varsayılan: null
hAxis.viewWindow.max
  • continuous ekseni için:

    Oluşturulacak maksimum yatay veri değeri.

  • discrete ekseni için:

    Kırpma penceresinin bittiği sıfır tabanlı satır dizini. Bu dizindeki ve daha üst düzeydeki veri noktaları kırpılır. vAxis.viewWindowMode.min ile birlikte, öğenin görüntülenecek dizinlerini belirten yarı açık bir aralığı (min., maks.) tanımlar. Başka bir deyişle, min <= index < max gibi her dizin görüntülenir.

hAxis.viewWindowMode "güzel" veya "maksimum" olduğunda yoksayılır.

Tür: sayı
Varsayılan: otomatik
hAxis.viewWindow.min
  • continuous ekseni için:

    Oluşturulacak minimum yatay veri değeri.

  • discrete ekseni için:

    Kırpma penceresinin başladığı sıfır tabanlı satır dizini. Bundan daha düşük dizinlerdeki veri noktaları kırpılır. vAxis.viewWindowMode.max ile birlikte, öğenin görüntülenecek dizinlerini belirten yarı açık bir aralığı (min., maks.) tanımlar. Diğer bir deyişle, min <= index < max gibi her dizin görüntülenir.

hAxis.viewWindowMode "güzel" veya "maksimum" olduğunda yoksayılır.

Tür: sayı
Varsayılan: otomatik
yükseklik

Grafiğin piksel cinsinden yüksekliği.

Tür: sayı
Varsayılan: kapsayıcı öğenin yüksekliği
InterpolateNulls

Eksik noktaların değerini tahmin etme. Doğruysa, eksik verilerin değerini yanlarındaki noktalara göre tahmin eder. Yanlış değerine ayarlanırsa yanlış yerde, çizgide bir ara oluşturur.

Bu, isStacked: true/'percent'/'relative'/'absolute' seçeneği bulunan Alan grafikleri tarafından desteklenmez.

Tür: boole
Varsayılan: false
Yığınlı

Doğru değerine ayarlanırsa her alan değerinde tüm serilerin öğelerini gruplandırır. Not: Sütun, Alan ve Adım Bu, Çubuk Grafikleri için geçerli değildir.

isStacked seçeneği de% 100 yığınlamayı destekler. Burada her alan değerindeki öğe yığınları, %100'e kadar eklenecek şekilde yeniden ölçeklendirilir.

isStacked seçenekleri şunlardır:

  • false — öğeler yığılmaz. Bu, varsayılan seçenektir.
  • true: Her alan değerinde tüm serilerin öğelerini gruplandırır.
  • 'percent': Her alan değerindeki tüm diziler için öğeleri gruplandırır ve her bir öğenin değeri %100 yüzdesi olarak hesaplanarak öğeleri en fazla %100 olacak şekilde yeniden ölçeklendirir.
  • 'relative': Her alan değerindeki tüm diziler için öğeleri gruplandırır ve her öğenin değeri 1'in kesiri olarak hesaplanarak öğeleri 1'e kadar ölçeklendirir.
  • 'absolute', isStacked: true ile aynı işleve sahiptir.

%100 yığınlamada her öğenin hesaplanmış değeri ipucunun gerçek değerinin ardından gösterilir.

Hedef eksenin varsayılan değeri, göreli 0-1 ölçeğine göre 'relative' için 1, 'percent' için ise% 0-100'dür. (Not: 'percent' seçeneği kullanılırken eksen/bilet değerleri yüzde olarak gösterilir ancak gerçek değerler göreli 0-1 ölçek değerleridir. Bunun nedeni, yüzde ekseni çizgilerinin göreli 0-1 ölçek değerlerine "%#####" biçiminin uygulanması sonucunda elde edilir. isStacked: 'percent' kullanırken, göreli 0-1 ölçeklendirme değerlerini kullanarak tüm kene veya çizgileri belirttiğinizden emin olun.) Kılavuz çizgilerinin/onay değerlerinin ve biçimlendirmesinin uygun hAxis/vAxis seçeneklerini kullanarak özelleştirebilirsiniz.

%100 yığınlama yalnızca number türündeki veri değerlerini destekler ve temeli sıfır olmalıdır.

Tür: boole/dize
Varsayılan: false
açıklama

Açıklamaların çeşitli yönlerini yapılandırmak için üyelerden oluşan bir nesne. Bu nesnenin özelliklerini belirtmek için aşağıda gösterildiği gibi nesne değişmez gösterimini kullanabilirsiniz:

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Tür: nesne
Varsayılan: null
açıklama.hizalama

Açıklamaların hizalaması. Aşağıdakilerden biri olabilir:

  • "start": Açıklama için ayrılan alanın başlangıcına hizalanır.
  • "center" - Ortasında gösterge için ayrılmış alan.
  • 'end' - Açıklama için ayrılmış alanın sonuna hizalanır.

Başlangıç, orta ve bitiş, açıklamanın stiline (dikey veya yatay) göre belirlenir. Örneğin, "sağ" açıklamasındaki "başlangıç" ve "bitiş" sırasıyla üst ve alt kısımda yer alır. "Üst" açıklama için ise "başlangıç" ve "bitiş", alanın sol ve sağ tarafında sırasıyla yer alır.

Varsayılan değer, göstergenin konumuna bağlıdır. "Alt" açıklamalar için varsayılan değer "center", diğer açıklamalar ise "start"tır.

Tür: dize
Varsayılan: otomatik
Legend.maxLines

Açıklamalardaki maksimum satır sayısı. Açıklamalarınıza satır eklemek için bunu birden büyük bir sayıya ayarlayın. Not: Oluşturulan gerçek satır sayısını belirlemek için kullanılan mantığın devamlılığı değişmedi.

Bu seçenek şu anda yalnızcaLegend.position, "top" olduğunda çalışır.

Tür: sayı
Varsayılan: 1
açıklama.sayfaDizini

Açıklamanın ilk seçtiğiniz sıfır tabanlı sayfa dizini.

Tür: sayı
Varsayılan: 0
açıklama.konumu

Açıklamaların konumu. Aşağıdakilerden biri olabilir:

  • "bottom" - Grafiğin altında.
  • "left" (sol): Grafikte sol eksenle ilişkili seri bulunmadığı sürece sol tarafta yer alır. Açıklamaların sol tarafta olmasını istiyorsanız targetAxisIndex: 1 seçeneğini kullanın.
  • 'in' - Grafiğin içinde, sol üst köşede.
  • "none" - Açıklama yok.
  • "sağ" - Grafiğin sağ tarafında. vAxes seçeneğiyle uyumlu değil.
  • "top" (üst) - Grafiğin üzerinde.
Tür: dize
Varsayılan: "sağ"
Legend.textStil

Açıklama metni stilini belirten bir nesne. Nesnenin biçimi şu şekildedir:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color, herhangi bir HTML renk dizesi olabilir. Örneğin: 'red' veya '#00cc00'. fontName ve fontSize hükümlerine de bakın.

Tür: nesne
Varsayılan: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
çizgiDashStyle

Kesikli çizgiler için açma/kapatma deseni. Örneğin, [4, 4] 4 uzun çizgi ve ardından 4 uzunluklu boşlukları tekrar eder. [5, 1, 3] 5 karakterli kısa çizgiyi, 1 uzunluklu boşluğu, 3 karakterli kısa çizgiyi, 5 karakterli boşluku, 1 karakterli boşluku ve 3 uzunluktaki boşluğu yineler. Daha fazla bilgi için Kısa çizgi bölümünü inceleyin.

Tür: Sayı dizisi
Varsayılan: null
çizgiGenişliği

Piksel cinsinden veri satırı genişliği. Tüm satırları gizlemek ve yalnızca noktaları göstermek için sıfır kullanın. series özelliğini kullanarak her bir dizinin değerlerini geçersiz kılabilirsiniz.

Tür: sayı
Varsayılan: 2
yön

Grafiğin yönü. 'vertical' değerine ayarlandığında, grafiğin eksenlerini döndürerek (ör.) bir sütun grafiğin çubuk grafik haline gelmesi ve alan grafiğinin yukarı doğru değil, sağa doğru artması için şunları yapmanız gerekir:

Tür: dize
Varsayılan: "yatay"
Nokta Şekli

Bağımsız veri öğelerinin şekli: "daire", "üçgen", "kare", "elmas", "yıldız" veya "poligon". Örnekler için puan belgelerine bakın.

Tür: dize
Varsayılan: "daire"
puntoBoyutu

Gösterilen noktaların piksel cinsinden çapı. Tüm noktaları gizlemek için sıfır kullanın. series özelliğini kullanarak her bir dizinin değerlerini geçersiz kılabilirsiniz. Trend çizgisi kullanıyorsanız pointSize seçeneği, trendlines.n.pointsize seçeneğiyle geçersiz kılmadığınız sürece trend çizgisinin genişliğini etkiler.

Tür: sayı
Varsayılan: 0
puanlar Görünür

Puanların gösterilip gösterilmeyeceğini belirler. Tüm noktaları gizlemek için false değerine ayarlayın. series özelliğini kullanarak her bir dizinin değerlerini geçersiz kılabilirsiniz. Trend çizgisi kullanıyorsanız trendlines.n.pointsVisible seçeneğini geçersiz kılmadığınız sürece pointsVisible seçeneği, tüm trend çizgilerindeki noktaların görünürlüğünü etkiler.

Bu işlem, biçim rolü kullanılarak "point {visible: true}" biçiminde geçersiz kılınabilir.

Tür: boole
Varsayılan: true
geri kategoriler

Doğru değerine ayarlanırsa serileri sağdan sola çizer. Varsayılan olarak soldan sağa doğru çizim yapılır.

Bu seçenek yalnızca bir discrete major ekseni için desteklenir.

Tür: boole
Varsayılan: false
seçimModu

selectionMode 'multiple' olduğunda kullanıcılar birden fazla veri noktası seçebilir.

Tür: dize
Varsayılan: "tek"
series

Her biri, grafikteki ilgili serinin biçimini açıklayan nesne dizisi. Bir serinin varsayılan değerlerini kullanmak için boş bir nesne {} belirtin. Bir seri veya değer belirtilmezse global değer kullanılır. Her nesne aşağıdaki özellikleri destekler:

  • annotations - Bu serinin ek açıklamalarına uygulanacak bir nesne. Bu, örneğin dizideki textStyle öğesini kontrol etmek için kullanılabilir:

    series: {
      0: {
        annotations: {
          textStyle: {fontSize: 12, color: 'red' }
        }
      }
    }
              

    Özelleştirilebilen seçeneklerin daha kapsamlı bir listesi için çeşitli annotations seçeneklerine göz atın.

  • areaOpacity - Bu seri için genel areaOpacity politikasını geçersiz kılar.
  • color - Bu seri için kullanılacak renk. Geçerli bir HTML renk dizesi belirtin.
  • labelInLegend - Grafik açıklamasında gösterilecek dizi açıklaması.
  • lineDashStyle - Bu dizinin genel lineDashStyle değerini geçersiz kılar.
  • lineWidth - Bu dizinin genel lineWidth değerini geçersiz kılar.
  • pointShape - Bu dizinin genel pointShape değerini geçersiz kılar.
  • pointSize - Bu dizinin genel pointSize değerini geçersiz kılar.
  • pointsVisible - Bu dizinin genel pointsVisible değerini geçersiz kılar.
  • targetAxisIndex - Bu serinin atanacağı eksen; 0 varsayılan eksen, 1 ise ters eksendir. Varsayılan değer 0'dır; farklı serilerin farklı eksenlere göre oluşturulduğu bir grafiği tanımlamak için 1 olarak ayarlanır. Varsayılan eksene en az bir dizi ayrılacaktır. Farklı eksenler için farklı ölçek tanımlayabilirsiniz.
  • visibleInLegend: Boole değeri. Doğru, serinin açıklama girişi olması gerekirken yanlış olmaması gerekir. Varsayılan değer, doğru değeridir.

Bir dizi diziyi veya her biri, verilen sırayla seriyi uygulayabilir veya her bir alt öğenin hangi diziye uygulanacağını belirten sayısal bir anahtara sahip olduğu bir nesne belirtebilirsiniz. Örneğin, aşağıdaki iki beyan aynıdır ve ilk seriyi efsanede siyah ve eksik olarak, dördüncü serinin efsanede kırmızı olarak ve eksik olduğunu ifade eder:

series: [
  {color: 'black', visibleInLegend: false}, {}, {},
  {color: 'red', visibleInLegend: false}
]
series: {
  0:{color: 'black', visibleInLegend: false},
  3:{color: 'red', visibleInLegend: false}
}
    
Tür: Nesne dizisi veya iç içe yerleştirilmiş nesneler içeren nesne
Varsayılan: {}
tema

Tema, belirli bir grafik davranışı veya görsel efekt sağlamak için birlikte çalışan, önceden tanımlanmış bir dizi seçenek değeridir. Şu anda yalnızca bir tema kullanılabilir:

  • "maximed" - Grafik alanını en üst düzeye çıkarır, grafik alanının içindeki efsaneyi ve tüm etiketleri çizer. Aşağıdaki seçenekleri ayarlar:
    chartArea: {width: '100%', height: '100%'},
    legend: {position: 'in'},
    titlePosition: 'in', axisTitlesPosition: 'in',
    hAxis: {textPosition: 'in'}, vAxis: {textPosition: 'in'}
            
Tür: dize
Varsayılan: null
başlık

Grafiğin üzerinde görüntülenecek metin.

Tür: dize
Varsayılan: başlık yok
başlıkKonumu

Grafik alanına kıyasla grafik başlığı nereye yerleştirilmelidir? Desteklenen değerler:

  • in - Başlığı grafik alanının içine çizin.
  • dışarı - Başlığı grafik alanının dışında çizin.
  • Yok - Başlığı atlayın.
Tür: dize
Varsayılan: "out"
başlıkMetin Stili

Başlık metin stilini belirten bir nesne. Nesnenin biçimi şu şekildedir:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color, herhangi bir HTML renk dizesi olabilir. Örneğin: 'red' veya '#00cc00'. fontName ve fontSize hükümlerine de bakın.

Tür: nesne
Varsayılan: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
ipucu

Çeşitli ipucu öğelerini yapılandırmak için üyeleri olan bir nesne. Bu nesnenin özelliklerini belirtmek için aşağıda gösterildiği gibi nesne değişmez gösterimini kullanabilirsiniz:

{textStyle: {color: '#FF0000'}, showColorCode: true}
Tür: nesne
Varsayılan: null
araç ipucu.ignoreBounds

true olarak ayarlandığında, tüm kenarlarda grafiğin sınırlarının dışına ipucu ipucu çizilmesine izin verir.

Not: Bu yalnızca HTML ipuçları için geçerlidir. Bu ayar SVG ipuçlarıyla etkinleştirilirse grafik sınırlarının dışındaki taşma işlemleri kırpılır. Daha fazla ayrıntı için İpucu İçeriğini Özelleştirme bölümüne bakın.

Tür: boole
Varsayılan: false
ipucu.ishtml

Doğru değerine ayarlanırsa HTML tarafından oluşturulan (SVG ile oluşturulan yerine) ipuçlarını kullanın. Daha fazla ayrıntı için İpucu İçeriğini Özelleştirme bölümüne bakın.

Not: HTML araç ipucu içeriğinin ipuçu sütunu veri rolü aracılığıyla özelleştirilmesi, Balon Listesi görselleştirmesi tarafından desteklenmez.

Tür: boole
Varsayılan: false
İpucu.ShowRenkKodu

Doğru değerine ayarlanırsa ipucunda seri bilgilerinin yanında renkli kareler gösterin. focusTarget "category" olarak ayarlandığında varsayılan değer "true" (doğru), aksi takdirde "false" (yanlış) değerini alır.

Tür: boole
Varsayılan: otomatik
ipucu.metinStil

İpucu metin stilini belirten bir nesne. Nesnenin biçimi şu şekildedir:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color, herhangi bir HTML renk dizesi olabilir. Örneğin: 'red' veya '#00cc00'. fontName ve fontSize hükümlerine de bakın.

Tür: nesne
Varsayılan: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
ipucu.tetikleyici

İpucunun gösterilmesine neden olan kullanıcı etkileşimi:

  • "odak" - Kullanıcı, öğenin üzerine geldiğinde ipucu görünür.
  • "hiçbiri" - İpucu gösterilmez.
  • "seçim" - Kullanıcı öğeyi seçtiğinde ipucu gösterilir.
Tür: dize
Varsayılan: "odak"
vAx'lar

Grafikte birden fazla dikey eksen varsa tek tek eksen eksenlerinin özelliklerini belirtir. Her alt nesne bir vAxis nesnesidir ve vAxis tarafından desteklenen tüm özellikleri içerebilir. Bu özellik değerleri aynı mülk için genel ayarları geçersiz kılar.

Birden fazla dikey eksene sahip bir grafik belirtmek için önce series.targetAxisIndex özelliğini kullanarak yeni bir eksen tanımlayın, ardından ekseni vAxes kullanarak yapılandırın. Aşağıdaki örnekte seri 2, sağ eksene atanmıştır ve bunun için özel bir başlık ve metin stili belirtilir:

{
  series: {
    2: {
      targetAxisIndex:1
    }
  },
  vAxes: {
    1: {
      title:'Losses',
      textStyle: {color: 'red'}
    }
  }
}
    

Bu özellik bir nesne veya dizi olabilir. Nesne, her biri tanımladığı ekseni belirten sayısal bir etikete sahip nesne koleksiyonudur. Bu, yukarıda gösterilen biçimdir; dizi, eksen başına bir nesne dizisidir. Örneğin, aşağıdaki dizi stili gösterimi, yukarıda gösterilen vAxis nesnesiyle aynıdır:

vAxes: [
  {}, // Nothing specified for axis 0
  {
    title:'Losses',
    textStyle: {color: 'red'} // Axis 1
  }
]
    
Tür: Nesne dizisi veya alt nesneleri olan nesne
Varsayılan: null
vAxis

Çeşitli dikey eksen öğelerini yapılandırmak için üyeler içeren bir nesne. Bu nesnenin özelliklerini belirtmek için aşağıda gösterildiği gibi nesne değişmez gösterimini kullanabilirsiniz:

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}
Tür: nesne
Varsayılan: null
vAxis.baseline

Dikey eksen tabanını belirten vAxis özelliği. Referans değeri, en yüksek kılavuz çizgisinden büyük veya en düşük kılavuz çizgisinden küçükse en yakın kılavuz çizgisine yuvarlanır.

Tür: sayı
Varsayılan: otomatik
vAxis.baselineColor

Dikey eksen referans çizgisinin rengini belirtir. Herhangi bir HTML renk dizesi olabilir. Örneğin: 'red' veya '#00cc00'.

Tür: sayı
Varsayılan: "siyah"
vAxis.direction

Dikey eksendeki değerlerin büyüme yönü. Varsayılan olarak düşük değerler grafiğin altında yer alır. Değerlerin sırasını tersine çevirmek için -1 özelliğini belirtin.

Tür: 1 veya -1
Varsayılan: 1
vAxis.biçimi

Sayısal eksen etiketleri için bir biçim dizesi. Bu, ICU desen kümesi'nin bir alt kümesidir. Örneğin {format:'#,###%'}, 10, 7,5 ve 0,5 değerleri için "%1.000", "%750" ve "%50" değerlerini gösterir. Aşağıdakilerden birini de sağlayabilirsiniz:

  • {format: 'none'}: Sayıları biçimlendirmeden gösterir (ör. 8000000)
  • {format: 'decimal'}: Binlerce ayırıcı içeren sayıları gösterir (ör. 8.000.000)
  • {format: 'scientific'}: Sayıları bilimsel gösterimle gösterir (ör. 8e6)
  • {format: 'currency'}: Numaraları yerel para biriminde gösterir (ör. 8.000.000,00)
  • {format: 'percent'}: sayıları yüzde olarak görüntüler (ör. %800.000.000)
  • {format: 'short'}: kısaltılmış sayıları gösterir (ör. 8 milyon)
  • {format: 'long'}: Numaraları tam kelime olarak görüntüler (ör. 8 milyon)

Etikete uygulanan gerçek biçimlendirme, API'nin yüklenmiş olduğu yerel ayardan türetilir. Daha ayrıntılı bilgi için belirli bir yerel ayara sahip grafikler yükleme başlıklı makaleyi inceleyin.

Onay işareti değerleri ve kılavuz çizgileri hesaplanırken, ilgili tüm kılavuz çizgisi seçeneklerinin birkaç alternatif kombinasyonu dikkate alınır ve biçimlendirilmiş işaret etiketlerinin kopyalanması veya örtüşmesi durumunda alternatifler reddedilir. Bu nedenle, yalnızca tam sayı onay işaretinin gösterilmesini istiyorsanız format:"#" değerini belirtebilirsiniz. Ancak bu koşulun alternatifi yoksa, herhangi bir ızgara veya onay işaretinin gösterilmeyeceğini unutmayın.

Tür: dize
Varsayılan: otomatik
vAxis.gridlines

Dikey eksendeki ızgara çizgilerini yapılandırmak için üyeleri olan bir nesne. Dikey eksen kılavuz çizgilerinin yatay olarak çizildiğini unutmayın. Bu nesnenin özelliklerini belirtmek için aşağıda gösterildiği gibi nesne değişmez gösterimini kullanabilirsiniz:

{color: '#333', minSpacing: 20}
Tür: nesne
Varsayılan: null
vAxis.gridlines.renk

Grafik alanı içindeki dikey kılavuz çizgilerinin rengi. Geçerli bir HTML renk dizesi belirtin.

Tür: dize
Varsayılan: "#CCC"
vAxis.gridlines.count

Grafik alanı içindeki yaklaşık yatay kılavuz çizgisi sayısı. gridlines.count için pozitif bir sayı belirtirseniz bu sayı, ızgaralar arasında minSpacing hesaplamak için kullanılır. Yalnızca bir kılavuz çizgisi çizmek için 1 değerini veya hiçbir çizgi çizgisini çizmemek için 0 değerini belirtebilirsiniz. Diğer seçeneklere bağlı olarak kılavuz çizgilerinin sayısını otomatik olarak hesaplamak için varsayılan değer olan -1 değerini belirtin.

Tür: sayı
Varsayılan: -1
vAxis.gridlines.interval

Bitişik kılavuz çizgileri arasındaki boyut dizisi (piksel olarak değil, veri değeri olarak). Bu seçenek şu an için yalnızca eksensel eksenler içindir, ancak yalnızca tarihler ve saatler için kullanılan gridlines.units.<unit>.interval seçeneklerine benzer. Doğrusal ölçekler için varsayılan olarak [1, 2, 2.5, 5] kullanılır.Bu, ızgara çizgisi değerlerinin her birime (1), çift birimlere (2) veya 2,5 veya 5'in katlarına çarpabileceği anlamına gelir. Bu değerlerin 10 katı değeri de geçerlidir (ör. [10, 20, 25, 50] ve [.1, 0,2, 0,55]). Günlük ölçeklendirmeleri için varsayılan olarak [1, 2, 5] değeri kullanılır.

Tür: 10 hariç 1 ile 10 arasında bir sayı.
Varsayılan: hesaplanan
vAxis.gridlines.minSPageSpeed

hAxis ana kılavuz çizgileri arasındaki piksel cinsinden minimum ekran alanı. Büyük kılavuz çizgilerinin varsayılan değeri, doğrusal ölçekler için 40 ve günlük ölçekler için 20 şeklindedir. minSpacing öğesini belirtmezseniz count öğesini belirtirseniz minSPageSpeed sayısı sayımdan hesaplanır. Öte yandan, count yerine minSpacing öğesini belirtirseniz sayı, minSİlerleme hızından hesaplanır. İkisini de belirtirseniz minSpacing geçersiz kılar.

Tür: sayı
Varsayılan: hesaplanan
vAxis.gridlines.Multiple

Tüm kılavuz çizgisi ve onay değerleri, bu seçeneğin değerinin katı olmalıdır. Aralıkların aksine, çarpmanın 10 katı gücünün dikkate alınmadığını unutmayın. Bu nedenle, gridlines.multiple = 1 öğesini belirterek değer işaretlerini tam sayı haline getirmeye veya gridlines.multiple = 1000 belirterek 1.000'in katları olmaya zorlayabilirsiniz.

Tür: sayı
Varsayılan: 1
vAxis.gridlines.units

Grafik hesaplanan ızgaralarla kullanıldığında tarih/tarih/saat/saat veri türlerinin çeşitli yönleri için varsayılan biçimi geçersiz kılar. Yıl, ay, gün, saat, dakika, saniye ve milisaniye biçimlendirmesine izin verir.

Genel biçim şöyledir:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]},
    hours: {format: [/*format strings here*/]},
    minutes: {format: [/*format strings here*/]},
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]}
  }
}
    

Daha fazla bilgiyi Tarihler ve Saatler'de bulabilirsiniz.

Tür: nesne
Varsayılan: null
vAxis.minor Izgaralar

vAxis.gridlines seçeneğine benzer şekilde, dikey eksende alt ızgaraları yapılandırmak için üyeleri olan bir nesne.

Tür: nesne
Varsayılan: null
vAxis.minor Izgaralar.renk

Grafik alanı içindeki dikey alt kılavuz çizgilerinin rengi. Geçerli bir HTML renk dizesi belirtin.

Tür: dize
Varsayılan: Kılavuz çizgisi ve arka plan renklerinin bir karışımı
vAxis.minor Izgaralar.interval

reşit olmayan Izgaralar.aralık seçeneği, ana kılavuz çizgisi aralığı seçeneğine benzer ancak seçilen aralık her zaman ana kılavuz çizgisi aralığının eşit bir böleni olacaktır. Doğrusal ölçekler için varsayılan aralık [1, 1.5, 2, 2.5, 5] ve günlük ölçekleri için [1, 2, 5] şeklindedir.

Tür: sayı
Varsayılan:1
vAxis.minor Izgaralar.minSPageSpeed

Bitişik alt kılavuz çizgileri ile küçük ve ana hatlar arasında piksel cinsinden gereken minimum boşluk. Varsayılan değer, doğrusal ölçekler için ana ızgara çizgilerinin 1/2 min. ilerleme hızı ve günlük ölçekler için minSPageSpeed'in 1/5'idir.

Tür: sayı
Varsayılan: hesaplanan
vAxis.minor Izgaralar.çoklu

Başlıca gridlines.multiple için de durum aynıdır.

Tür: sayı
Varsayılan: 1
vAxis.minor Izgaralar.count

reşit olmayan kılavuz çizgileri sayısı, 0 olarak ayarlanarak hariç tutulan küçük ızgaraların devre dışı bırakılması hariç çoğunlukla kullanımdan kaldırılır. Küçük kılavuz çizgilerinin sayısı, ana kılavuz çizgileri (vAxis.gridlines.interval) ve gerekli minimum aralık (vAxis.minor Izgaralar.minSCPM) arasındaki aralığa bağlıdır.

Tür: sayı
Varsayılan: 1
vAxis.minor Izgaralar.units

Grafik cinsinden hesaplanan küçük tablolarla kullanıldığında tarih/tarih/saat/saat veri türlerinin çeşitli yönleri için varsayılan biçimi geçersiz kılar. Yıl, ay, gün, saat, dakika, saniye ve milisaniye biçimlendirmesine izin verir.

Genel biçim şöyledir:

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}
    

Daha fazla bilgiyi Tarihler ve Saatler'de bulabilirsiniz.

Tür: nesne
Varsayılan: null
vAxis.logÖlçek

Doğru ise dikey ekseni logaritmik ölçek yapar. Not: Tüm değerler pozitif olmalıdır.

Tür: boole
Varsayılan: false
vAxis.ölçekTürü

Dikey ekseni logaritmik ölçek yapan vAxis özelliği. Aşağıdakilerden biri olabilir:

  • null - Logaritmik ölçeklendirme yapılmaz.
  • 'log' - Logaritmik ölçeklendirme. Negatif ve sıfır değerler çizilemez. Bu seçenek vAxis: { logscale: true } ayarıyla aynıdır.
  • 'mirrorLog' - Negatif ve sıfır değerlerin çizildiği logaritmik ölçeklendirme. Negatif bir sayının çizilmiş değeri, mutlak değerin günlüğünün negatifidir. 0'a yakın değerler doğrusal bir ölçekte gösterilir.

Bu seçenek yalnızca continuous ekseni için desteklenir.

Tür: dize
Varsayılan: null
vAxis.metinKonumu

Dikey eksen metninin grafik alanına göre konumu. Desteklenen değerler: "out", "in", "none".

Tür: dize
Varsayılan: "out"
vAxis.metinStil

Dikey eksen metin stilini belirten bir nesne. Nesnenin biçimi şu şekildedir:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
    

color, herhangi bir HTML renk dizesi olabilir. Örneğin: 'red' veya '#00cc00'. fontName ve fontSize hükümlerine de bakın.

Tür: nesne
Varsayılan: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.ticks

Otomatik olarak oluşturulan Y ekseni onay işaretlerini belirtilen diziyle değiştirir. Dizinin her bir öğesi geçerli bir onay değeri (sayı, tarih, tarih/saat veya günün saati gibi) ya da bir nesne olmalıdır. Bu nesne bir işaret değeri için v özelliğine ve etiket olarak gösterilecek değişmez dizeyi içeren isteğe bağlı bir f özelliğine sahip olmalıdır.

ViewWindow, geçersiz kılınacak bir viewWindow.min veya viewWindow.max belirtmediğiniz sürece min. ve maks. değer işaretlerini içerecek şekilde otomatik olarak genişletilir.

Örnekler:

  • vAxis: { ticks: [5,10,15,20] }
  • vAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • vAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • vAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }
Tür: Öğe dizisi
Varsayılan: otomatik
vAxis.başlık

Dikey eksen için bir başlık belirten vAxis özelliği.

Tür: dize
Varsayılan: başlık yok
vAxis.başlıkMetin Stili

Dikey eksen başlık metni stilini belirten bir nesne. Nesnenin biçimi şu şekildedir:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }
  

color, herhangi bir HTML renk dizesi olabilir. Örneğin: 'red' veya '#00cc00'. fontName ve fontSize hükümlerine de bakın.

Tür: nesne
Varsayılan: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
vAxis.maxValue

Dikey eksenin maksimum değerini, belirtilen değere taşır. Bu, çoğu grafikte yukarı yönde olacaktır. Bu değer, verilerin maksimum y değerinden küçük bir değere ayarlanırsa yoksayılır. vAxis.viewWindow.max bu özelliği geçersiz kılar.

Tür: sayı
Varsayılan: otomatik
vAxis.minDeğeri

Dikey eksenin minimum değerini belirtilen değere taşır. Bu, çoğu grafikte aşağı yönlü olacaktır. Bu değer, verilerin minimum y değerinden büyük bir değere ayarlanırsa yoksayılır. vAxis.viewWindow.min bu özelliği geçersiz kılar.

Tür: sayı
Varsayılan: null
vAxis.viewWindowMode

Değerleri grafik alanında oluşturmak için dikey eksenin nasıl ölçekleneceğini belirtir. Aşağıdaki dize değerleri desteklenir:

  • "güzel": Dikey değerleri, maksimum ve minimum veri değerleri grafik alanının alt ve üst kısmında gösterilecek şekilde ölçeklendirin. ViewWindow, sayılar için en yakın ana hat ya da tarihler ve saatler için en yakın alt geniş ızgara olarak genişletilir.
  • "maks." - Dikey değerleri, maksimum ve minimum veri değerleri grafik alanının üst ve alt kısmına dokunacak şekilde ölçeklendirin. Bu işlem, vaxis.viewWindow.min ve vaxis.viewWindow.max öğelerinin yoksayılmasına neden olur.
  • "explicit" - Grafik alanının üst ve alt ölçek değerlerini belirtmek için kullanımdan kaldırılmış bir seçenek. (vaxis.viewWindow.min ve vaxis.viewWindow.max ile gereksiz olduğundan kullanımdan kaldırıldı. Bu değerlerin dışındaki veri değerleri kırpılır. Gösterilecek maksimum ve minimum değerleri açıklayan bir vAxis.viewWindow nesnesi belirtmelisiniz.
Tür: dize
Varsayılan: "Güzel"e eşdeğerdir, ancak kullanılırsa vaxis.viewWindow.min ve vaxis.viewWindow.max öncelikli olur.
vAxis.viewWindow

Dikey eksenin kırpma aralığını belirtir.

Tür: nesne
Varsayılan: null
vAxis.viewWindow.max

Oluşturulacak maksimum dikey veri değeri.

vAxis.viewWindowMode "güzel" veya "maksimum" olduğunda yoksayılır.

Tür: sayı
Varsayılan: otomatik
vAxis.viewWindow.min

Oluşturulacak minimum dikey veri değeri.

vAxis.viewWindowMode "güzel" veya "maksimum" olduğunda yoksayılır.

Tür: sayı
Varsayılan: otomatik
genişlik

Grafiğin piksel cinsinden genişliği.

Tür: sayı
Varsayılan: kapsayıcı öğenin genişliği

Yöntemler

Yöntem
draw(data, options)

Grafiği çizer. Grafik, yalnızca readyetkinliği tetiklendikten sonra gerçekleştirilen diğer yöntem çağrılarını kabul eder. Extended description dokunun.

Dönüş Türü: yok
getAction(actionID)

İstenen actionID değerini içeren ipucu işlem nesnesini döndürür.

Dönüş Türü: nesne
getBoundingBox(id)

id grafik öğesinin sol, üst, genişlik ve yüksekliğini içeren bir nesne döndürür. id biçimi henüz belgelenmemiş (etkinlik işleyicilerin döndürme değerleridir), ancak bazı örnekler aşağıda verilmiştir:

var cli = chart.getChartLayoutInterface();

Grafik alanının yüksekliği
cli.getBoundingBox('chartarea').height
Çubuk veya sütun grafiğin ilk serisindeki üçüncü çubuğun genişliği
cli.getBoundingBox('bar#0#2').width
Pasta grafiğin beşinci takozunun sınırlayıcı kutusu
cli.getBoundingBox('slice#4')
Dikey (ör. sütun) grafiğin grafik verilerindeki sınır kutusu:
cli.getBoundingBox('vAxis#0#gridline')
Yatay (ör. çubuk) grafiğin veri grafiklerinin sınırlayıcı kutusu:
cli.getBoundingBox('hAxis#0#gridline')

Değerler, grafiğin kapsayıcısıyla ilgilidir. Bunu, grafik çizildikten sonra çağırın.

Dönüş Türü: nesne
getChartAreaBoundingBox()

Grafik içeriğinin sol, üst, genişlik ve yüksekliğini içeren bir nesne döndürür (yani etiketler ve açıklama hariç):

var cli = chart.getChartLayoutInterface();

cli.getChartAreaBoundingBox().left
cli.getChartAreaBoundingBox().top
cli.getChartAreaBoundingBox().height
cli.getChartAreaBoundingBox().width

Değerler, grafiğin kapsayıcısıyla ilgilidir. Bunu, grafik çizildikten sonra çağırın.

Dönüş Türü: nesne
getChartLayoutInterface()

Grafiğin ve yerleşimin öğelerinin ekran yerleşimi hakkında bilgi içeren bir nesne döndürür.

Döndürülen nesnede aşağıdaki yöntemler çağrılabilir:

  • getBoundingBox
  • getChartAreaBoundingBox
  • getHAxisValue
  • getVAxisValue
  • getXLocation
  • getYLocation

Bunu, grafik çizildikten sonra çağırın.

Dönüş Türü: nesne
getHAxisValue(xPosition, optional_axis_index)

xPosition konumundaki yatay veri değerini döndürür. Bu, grafik kapsayıcısının sol kenarından bir piksel ofsetidir. Negatif olabilir.

Örnek: chart.getChartLayoutInterface().getHAxisValue(400).

Bunu, grafik çizildikten sonra çağırın.

İade Türü: numara
getImageURI()

Grafiği resim URI'si olarak serileştirilmiş olarak döndürür.

Bunu, grafik çizildikten sonra çağırın.

PNG Grafiklerini Yazdırma konusuna bakın.

Dönüş Türü: dize
getSelection()

Seçilen grafik varlıklarından oluşan bir diziyi döndürür. Seçilebilir öğeler puanlar, ek açıklamalar, açıklama girişi ve kategorilerdir. Nokta veya ek açıklama, veri tablosundaki bir hücreye, bir sütuna ait açıklama girişine (satır dizini null) ve bir satıra ait bir kategoriye (sütun dizini null) karşılık gelir. Bu grafik için herhangi bir zamanda yalnızca bir varlık seçilebilir. Extended description .

Dönüş Türü: Seçim öğeleri dizisi
getVAxisValue(yPosition, optional_axis_index)

yPosition konumundaki dikey veri değerini döndürür. Bu, grafik kapsayıcısının üst kenarından bir piksel aşağı kaydırmadır. Negatif olabilir.

Örnek: chart.getChartLayoutInterface().getVAxisValue(300).

Bunu, grafik çizildikten sonra çağırın.

İade Türü: numara
getXLocation(dataValue, optional_axis_index)

Grafik kapsayıcısının sol kenarına göre dataValue piksel x koordinatı değerini döndürür.

Örnek: chart.getChartLayoutInterface().getXLocation(400).

Bunu, grafik çizildikten sonra çağırın.

İade Türü: numara
getYLocation(dataValue, optional_axis_index)

Grafik kapsayıcısının üst kenarına göre dataValue piksel y koordinatı döndürür.

Örnek: chart.getChartLayoutInterface().getYLocation(300).

Bunu, grafik çizildikten sonra çağırın.

İade Türü: numara
removeAction(actionID)

İstenen actionID ile ilgili ipucu işlemini grafikten kaldırır.

İade Türü: none
setAction(action)

Kullanıcı işlem metnini tıkladığında yürütülecek bir ipucu işlemi belirler.

setAction yöntemi, bir nesneyi işlem parametresi olarak alır. Bu nesnede 3 özellik belirtilmelidir: id - ayarlanan işlemin kimliği, text - işlem için ipucunda görünmesi gereken metin ve action - bir kullanıcı işlem metnini tıkladığında çalışması gereken işlev.

İpucu işlemlerinin tümü, grafiğin draw() yöntemini çağırmadan önce ayarlanmalıdır. Genişletilmiş açıklama.

İade Türü: none
setSelection()

Belirtilen grafik öğelerini seçer. Önceki seçimleri iptal eder. Seçilebilir öğeler puanlar, ek açıklamalar, açıklama girişi ve kategorilerdir. Nokta veya ek açıklama, veri tablosundaki bir hücreye, bir sütuna ait açıklama girişine (satır dizini null) ve bir satıra ait bir kategoriye (sütun dizini null) karşılık gelir. Bu grafik için tek seferde yalnızca bir öğe seçilebilir. Extended description .

Dönüş Türü: yok
clearChart()

Grafiği temizler ve ayrılan tüm kaynaklarını serbest bırakır.

Dönüş Türü: yok

Etkinlikler

Bu etkinliklerin nasıl kullanılacağı hakkında daha fazla bilgi için Temel Etkileşim, Etkinlikleri Kullanma ve Etkinleştirme Etkinlikleri başlıklı makalelere bakın.

Ad
animationfinish

Geçiş animasyonu tamamlandığında tetiklenir.

Özellikler: yok
click

Kullanıcı grafiğin içini tıkladığında tetiklenir. Başlık, veri öğeleri, gösterge girişleri, eksenler, kılavuz çizgileri veya etiketlerin ne zaman tıklandığını belirlemek için kullanılabilir.

Özellikler: targetID
error

Grafik oluşturulmaya çalışılırken bir hata oluştuğunda tetiklenir.

Özellikler: kimlik, mesaj
legendpagination

Kullanıcı, sayfalara ayırma göstergelerini tıkladığında tetiklenir. Mevcut sıfır tabanlı sayfa dizinini ve toplam sayfa sayısını geri verir.

Özellikler: currentPageIndex, totalPages
onmouseover

Kullanıcı görsel bir varlığın üzerine geldiğinde tetiklenir. İlgili veri tablosu öğesinin satır ve sütun dizinlerini geri verir.

Özellikler: satır, sütun
onmouseout

Kullanıcı görsel varlıktan fareyi uzaklaştırdığında tetiklenir. İlgili veri tablosu öğesinin satır ve sütun dizinlerini geri verir.

Özellikler: satır, sütun
ready

Grafik, harici yöntem çağrıları için hazır. Grafik ve çizim yöntemlerinden sonra etkileşimde bulunmak isterseniz draw yöntemini çağırmadan önce bu etkinlik için bir dinleyici oluşturmanız ve bunları yalnızca etkinlik tetiklendikten sonra kullanmanız gerekir.

Özellikler: yok
select

Kullanıcı bir görsel öğeyi tıkladığında tetiklenir. Nelerin seçildiğini öğrenmek için getSelection() numaralı telefonu arayın.

Özellikler: yok

Veri Politikası

Tüm kod ve veriler tarayıcıda işlenir ve oluşturulur. Hiçbir sunucuya veri gönderilmez.