Görselleştirme: Kabarcık Grafik

Genel bakış

SVG veya VML kullanılarak tarayıcıda oluşturulan bir kabarcık grafik. Baloncukların üzerine geldiğinizde ipuçlarını görüntüler.

Kabarcık grafik, veri kümesini iki ila dört boyutlu görselleştirmek için kullanılır. İlk iki boyut koordinat olarak, üçüncüsü renk ve dördüncü boyut olarak görselleştirilir.

Ö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(drawSeriesChart);

    function drawSeriesChart() {

      var data = google.visualization.arrayToDataTable([
        ['ID', 'Life Expectancy', 'Fertility Rate', 'Region',     'Population'],
        ['CAN',    80.66,              1.67,      'North America',  33739900],
        ['DEU',    79.84,              1.36,      'Europe',         81902307],
        ['DNK',    78.6,               1.84,      'Europe',         5523095],
        ['EGY',    72.73,              2.78,      'Middle East',    79716203],
        ['GBR',    80.05,              2,         'Europe',         61801570],
        ['IRN',    72.49,              1.7,       'Middle East',    73137148],
        ['IRQ',    68.09,              4.77,      'Middle East',    31090763],
        ['ISR',    81.55,              2.96,      'Middle East',    7485600],
        ['RUS',    68.6,               1.54,      'Europe',         141850000],
        ['USA',    78.09,              2.05,      'North America',  307007000]
      ]);

      var options = {
        title: 'Fertility rate vs life expectancy in selected countries (2010).' +
          ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
        hAxis: {title: 'Life Expectancy'},
        vAxis: {title: 'Fertility Rate'},
        bubble: {textStyle: {fontSize: 11}}
      };

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

Sayılarla Boyama

Aşağıdaki örnekte gösterildiği gibi kabarcıkları bir değerle orantılı olarak renklendirmek için colorAxis seçeneğini kullanabilirsiniz.

<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([
          ['ID', 'X', 'Y', 'Temperature'],
          ['',   80,  167,      120],
          ['',   79,  136,      130],
          ['',   78,  184,      50],
          ['',   72,  278,      230],
          ['',   81,  200,      210],
          ['',   72,  170,      100],
          ['',   68,  477,      80]
        ]);

        var options = {
          colorAxis: {colors: ['yellow', 'red']}
        };

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

Etiketleri Özelleştirme

Balonun yazı tipini, yazı tipini ve rengini bubble.textStyle seçeneğiyle kontrol edebilirsiniz:

Seçenekler
  var options = {
    title: 'Fertility rate vs life expectancy in selected countries (2010).' +
      ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
    hAxis: {title: 'Life Expectancy'},
    vAxis: {title: 'Fertility Rate'},
    bubble: {
      textStyle: {
        fontSize: 12,
        fontName: 'Times-Roman',
        color: 'green',
        bold: true,
        italic: true
      }
    }
  };
Tam Web Sayfası
<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([
        ['ID', 'Life Expectancy', 'Fertility Rate', 'Region',     'Population'],
        ['CAN',    80.66,              1.67,      'North America',  33739900],
        ['DEU',    79.84,              1.36,      'Europe',         81902307],
        ['DNK',    78.6,               1.84,      'Europe',         5523095],
        ['EGY',    72.73,              2.78,      'Middle East',    79716203],
        ['GBR',    80.05,              2,         'Europe',         61801570],
        ['IRN',    72.49,              1.7,       'Middle East',    73137148],
        ['IRQ',    68.09,              4.77,      'Middle East',    31090763],
        ['ISR',    81.55,              2.96,      'Middle East',    7485600],
        ['RUS',    68.6,               1.54,      'Europe',         141850000],
        ['USA',    78.09,              2.05,      'North America',  307007000]
      ]);

      var options = {
        title: 'Fertility rate vs life expectancy in selected countries (2010).' +
          ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
        hAxis: {title: 'Life Expectancy'},
        vAxis: {title: 'Fertility Rate'},
        bubble: {
          textStyle: {
            fontSize: 12,
            fontName: 'Times-Roman',
            color: 'green',
            bold: true,
            italic: true
          }
        }
      };

      var chart = new google.visualization.BubbleChart(document.getElementById('textstyle'));

      chart.draw(data, options);
    }
  </script>
</head>
<body>
  <div id="textstyle" style="width: 900px; height: 500px;"></div>
</body>
</html>

Yukarıdaki grafikte yer alan etiketlerin okunması zordur. Bunun nedenlerinden biri de etiketlerin etraflarındaki beyaz boşluklardır. Buna aura denir. Grafiklerinizin olmamasını tercih ederseniz bubble.textStyle.auraColor öğesini 'none' olarak ayarlayabilirsiniz.

Seçenekler
  var options = {
    title: 'Fertility rate vs life expectancy in selected countries (2010).' +
      ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
    hAxis: {title: 'Life Expectancy'},
    vAxis: {title: 'Fertility Rate'},
    bubble: {
      textStyle: {
        auraColor: 'none'
      }
    }
  };
Tam Web Sayfası
<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([
        ['ID', 'Life Expectancy', 'Fertility Rate', 'Region',     'Population'],
        ['CAN',    80.66,              1.67,      'North America',  33739900],
        ['DEU',    79.84,              1.36,      'Europe',         81902307],
        ['DNK',    78.6,               1.84,      'Europe',         5523095],
        ['EGY',    72.73,              2.78,      'Middle East',    79716203],
        ['GBR',    80.05,              2,         'Europe',         61801570],
        ['IRN',    72.49,              1.7,       'Middle East',    73137148],
        ['IRQ',    68.09,              4.77,      'Middle East',    31090763],
        ['ISR',    81.55,              2.96,      'Middle East',    7485600],
        ['RUS',    68.6,               1.54,      'Europe',         141850000],
        ['USA',    78.09,              2.05,      'North America',  307007000]
      ]);

      var options = {
        title: 'Fertility rate vs life expectancy in selected countries (2010).' +
          ' X=Life Expectancy, Y=Fertility, Bubble size=Population, Bubble color=Region',
        hAxis: {title: 'Life Expectancy'},
        vAxis: {title: 'Fertility Rate'},
        bubble: {
          textStyle: {
            auraColor: 'none',
          }
        }
      };

      var chart = new google.visualization.BubbleChart(document.getElementById('noAura'));

      chart.draw(data, options);
    }
  </script>
</head>
<body>
  <div id="noAura" style="width: 900px; height: 500px;"></div>
</body>
</html>

Yükleniyor

google.charts.load paketinin adı: "corechart". 

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

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

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

Veri Biçimi

Satırlar: Tablodaki her satır tek bir balonu temsil eder.

Sütunlar:

  Sütun 0 1. Sütun 2. Sütun 3. Sütun (isteğe bağlı) 4. Sütun (isteğe bağlı)
Amaç: Balonun kimliği (adı) X koordinatı Y koordinatı Sütun türüne bağlı olarak, seri kimliği veya gradyan ölçeğindeki bir rengi temsil eden değer:
  • string
    Aynı serideki baloncukları tanımlayan bir dize. Aynı seriye ait olan tüm baloncukları tanımlamak için aynı değeri kullanın. Aynı serideki baloncuklara aynı renk atanır. Seriler, series seçeneği kullanılarak yapılandırılabilir.
  • sayı
    colorAxis seçeneği kullanılarak gradyan ölçeğinde gerçek bir renkle eşlenen değerdir.
Boyut; bu sütundaki değerler, sizeAxis seçeneği kullanılarak gerçek piksel değerleriyle eşlenir.
Veri Türü: dize sayı sayı dize veya sayı sayı

Yapılandırma Seçenekleri

Ad
animation.duration

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

Tür: numara
Varsayılan: 0
animation.easing

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

  • "doğrusal" - Sabit hız.
  • 'in' - Yavaş gir - Yavaşça başlayıp hızlan.
  • 'out' - Yumuşak çıkış - Hızlı başlayın ve yavaşlayın.
  • 'inAndOut' - Yumuşak giriş ve çıkış - Yavaş başlayın, hızla başlayın, daha sonra yavaşlayın.
Tür: dize
Varsayılan: 'Doğrusal'
animation.startup

Grafikteki ilk çizimde animasyonun gösterilip gösterilmeyeceğini belirler. Değer true ise grafik, referans değerden başlar ve son durumuna kadar canlandırılır.

Tür: boole
Varsayılan false
axisTitlesPosition

Grafik alanına kıyasla eksen başlıklarının yerleştirileceği yer. Desteklenen değerler:

  • içinde - Eksen başlıklarını grafik alanı içine çizin.
  • dışa - Eksen başlıklarını grafik alanının dışına çizin.
  • yok - Eksen başlıklarını atlayın.
Tür: dize
Varsayılan: 'out'
backgroundColor

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

Tür: dize veya nesne
Varsayılan: 'white'
backgroundColor.stroke

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

Tür: dize
Varsayılan: '#666'
backgroundColor.strokeWidth

Piksel cinsinden kenarlık genişliği.

Tür: numara
Varsayılan: 0
backgroundColor.fill

HTML renk dizesi olarak grafik dolgu rengi.

Tür: dize
Varsayılan: 'white'
balon

Balonların görsel özelliklerini yapılandıran üyelere sahip bir nesne.

Tür: nesne
Varsayılan: null
bubble.opacity

Balonların opaklığı. 0 değeri tamamen şeffaf, 1 değeri tamamen opaktır.

Tür: 0,0 ile 1,0 arasında bir sayı
Varsayılan: 0,8
bubble.stroke

Baloncuk fırçasının rengi.

Tür: dize
Varsayılan: '#ccc'
bubble.textStyle

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

{color: <string>, fontName: <string>, fontSize: <number>}

color, herhangi bir HTML renk dizesi olabilir. Örneğin: 'red' veya '#00cc00'. Ayrıca bkz. fontName ve fontSize.

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

Grafik alanının yerleşimini ve boyutunu yapılandırmak için üyelere sahip bir nesne (eksen ve göstergeler hariç, grafiğin kendisinin çizildiği yer). İki biçim desteklenir: bir sayı veya ardından % gelen sayı. Basit bir sayı, piksel cinsinden bir değerdir, ardından % gelen sayının ardından gelen bir yüzdedir. Örnek: chartArea:{left:20,top:0,width:'50%',height:'75%'}

Tür: nesne
Varsayılan: null
chartArea.backgroundColor
Grafik alanının arka plan rengi. Kullanılan dizeler onaltılık dize (ör. "#fdc") veya İngilizce renk adı. Bir nesne kullanıldığında aşağıdaki özellikler sağlanabilir:
  • stroke: Onaltılık dize veya İngilizce renk adı olarak sağlanan renk.
  • strokeWidth: Varsa belirtilen genişlikteki (ve stroke rengiyle) grafik alanının etrafına bir kenarlık çizer.
Tür: dize veya nesne
Varsayılan: 'white'
chartArea.left

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

Tür: sayı veya dize
Varsayılan: auto
chartArea.top

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

Tür: sayı veya dize
Varsayılan: auto
chartArea.width

Grafik alanı genişliği.

Tür: sayı veya dize
Varsayılan: auto
chartArea.height

Grafik alanı yüksekliği.

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

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

Tür: Dize dizisi
Varsayılan: varsayılan renkler
colorAxis

Renk sütunu değerleri ile renkler veya gradyan ölçeği arasında eşleme belirten bir nesne. Bu nesnenin özelliklerini belirtmek için burada gösterildiği gibi nesne değişmez değer gösterimini kullanabilirsiniz: 

 {minValue: 0,  colors: ['#FF0000', '#00FF00']}
Tür: nesne
Varsayılan: null
colorAxis.minValue

Varsa grafik renk verileri için minimum değeri belirtir. Bu değerin ve altındaki renk verisi değerleri, colorAxis.colors aralığındaki ilk renk olarak oluşturulur.

Tür: numara
Varsayılan: Grafik verilerindeki minimum renk sütunu değeri
colorAxis.maxValue

Varsa grafik rengi verileri için maksimum değer belirtir. Bu değer ve daha yüksek olan renk verisi değerleri, colorAxis.colors aralığındaki son renk olarak oluşturulur.

Tür: numara
Varsayılan: Grafik verilerindeki maksimum renk sütunu değeri
colorAxis.values

Varsa değerlerin renklerle nasıl ilişkilendirileceğini kontrol eder. Her değer, colorAxis.colors dizisindeki karşılık gelen renkle ilişkilendirilir. Bu değerler, grafik renk verileri için geçerlidir. Renklendirme, burada belirtilen değerlerin bir gradyanına göre yapılır. Bu seçenek için bir değer belirtmemek, [minValue, maxValue] belirtmekle eşdeğerdir.

Tür: sayı dizisi
Varsayılan: null
colorAxis.colors

Görselleştirmedeki değerlere atanacak renkler. Her öğenin bir HTML renk dizesi olduğu bir dize dizisi. Örneğin: colorAxis: {colors:['red','#004411']}. En az iki değere sahip olmanız gerekir. Renk geçişi, tüm değerlerinizi ve ilk renk en küçük, son renk en yüksek değer olacak şekilde hesaplanan ara değerleri içerir.

Tür: renk dizelerinden oluşan dizi
Varsayılan: null
colorAxis.legend

Gradyan renk açıklamalarının stilini belirten bir nesne.

Tür: nesne
Varsayılan: null
colorAxis.legend.position

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

  • "top" (üstte): Grafiğin üstünde.
  • "bottom": Grafiğin altında.
  • 'in' - Grafiğin içinde, üstte.
  • "none" (hiçbiri) - Açıklama gösterilmez.
Tür: nesne
Varsayılan: 'top'
colorAxis.legend.textStyle

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

{color: <string>, fontName: <string>, fontSize: <number>}

color, herhangi bir HTML renk dizesi olabilir. Örneğin: 'red' veya '#00cc00'. Ayrıca bkz. fontName ve fontSize.

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

Sayısal etiketler için bir biçim dizesi. Bu, ICU kalıbı grubunun bir alt kümesidir. Örneğin {numberFormat:'.##'}; 10,666, 10,6 ve 10 değerleri için "10,66", "10,6" ve "10,0" değerlerini gösterir.

Tür: dize
Varsayılan: auto
enableInteractivity

Grafiğin kullanıcı tabanlı etkinlikler yayınlaması veya kullanıcı etkileşimine tepki verip vermemesi. False (yanlış) değerine ayarlanırsa grafik, "select" ya da diğer etkileşime dayalı etkinlikleri bildirmez (ancak "hazır" veya hata etkinlikleri ayarlamaz) ve fareyle üzerine gelindiğinde görüntülenen metni görüntülemez veya kullanıcı girişine bağlı olarak başka bir şekilde değişmez.

Tür: boole
Varsayılan: true
kaşif

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

Bu özellik deneme aşamasındadır ve gelecekteki sürümlerde değişebilir.

Not: Gezgin yalnızca kesintisiz eksenlerle (sayılar veya tarihler gibi) çalışır.

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

Google Grafikler gezgini üç işlemi destekler:

  • dragToPan: Grafikte yatay ve dikey olarak kaydırmak için sürükleyin. Yalnızca yatay eksende kaydırmak için explorer: { axis: 'horizontal' } tuşunu kullanın. Benzer bir şekilde, dikey eksen için de geçerlidir.
  • dragToZoom: Gezginin varsayılan davranışı, kullanıcı sayfayı kaydırdığında yakınlaştırma ve uzaklaştırmadır. explorer: { actions: ['dragToZoom', 'rightClickToReset'] } kullanılıyorsa dikdörtgen bir alan boyunca sürüklemek söz konusu alanı yakınlaştırır. dragToZoom her kullanıldığında rightClickToReset kullanmanızı öneririz. Yakınlaştırma özelleştirmeleri için bkz. explorer.maxZoomIn, explorer.maxZoomOut ve explorer.zoomDelta.
  • rightClickToReset: Grafiği sağ tıkladığınızda orijinal kaydırma ve yakınlaştırma düzeyine dönersiniz.
Tür: Dize dizisi
Varsayılan: ['dragToPan', 'rightClickToReset']
explorer.axis

Varsayılan olarak, explorer seçeneği kullanıldığında kullanıcılar hem yatay hem de dikey kaydırma yapabilir. Kullanıcıların yalnızca yatay olarak kaydırmasını istiyorsanız 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, kullanıcılar verilerin nerede olduğundan bağımsız olarak yatay kaydırma yapabilir. Kullanıcıların orijinal grafiğin ötesine geçmelerini önlemek için explorer: { keepInBounds: true } kullanın.

Tür: boole
Varsayılan: false
explorer.maxZoomIn

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örecek kadar yakınlaştırma yapabilir. explorer: { maxZoomIn: .5 } ayarlanırsa kullanıcılar orijinal görünümün yarısını görecek kadar yakınlaştırma yapabilir.

Tür: numara
Varsayılan: 0,25
explorer.maxZoomOut

Gezginin uzaklaştırabileceği maksimum değer. Kullanıcılar, varsayılan olarak grafiğin mevcut alanın yalnızca 1/4'ünü kaplayacağı kadar uzaklaştırabilirler. explorer: { maxZoomOut: 8 } ayarlanırsa kullanıcılar, grafiğin mevcut alanın yalnızca 1/8'ini kaplayacağı kadar uzaklaştırabilir.

Tür: numara
Varsayılan: 4
explorer.zoomDelta

Kullanıcılar yakınlaştırdığında veya uzaklaştırdığında explorer.zoomDelta, ne kadar yakınlaştırma yapacaklarını belirler. Sayı ne kadar küçükse, yakınlaştırma o kadar düzgün ve yavaş olur.

Tür: numara
Varsayılan: 1,5
fontSize

Grafikteki tüm metnin piksel cinsinden varsayılan yazı tipi boyutu. Belirli grafik öğelerine ait özellikleri kullanarak bunu geçersiz kılabilirsiniz.

Tür: numara
Varsayılan: auto
fontName

Grafikteki tüm metinler için varsayılan yazı tipi yüzü. Belirli grafik öğelerine ait özellikleri kullanarak bunu geçersiz kılabilirsiniz.

Tür: dize
Varsayılan: "SFTP"
forceIFrame

Grafiği bir satır içi çerçevenin içine çizer. (IE8'de bu seçeneğin yoksayıldığını unutmayın. Tüm IE8 grafikleri, iç çerçeveler kullanılarak çizilir.)

Tür: boole
Varsayılan: false
hAxis

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

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

Yatay eksen için referans değer.

Tür: numara
Varsayılan: auto
hAxis.baselineColor

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

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

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

Tür: 1 veya -1
Varsayılan: 1
hAxis.format

Sayısal eksen etiketleri için bir biçim dizesi. Bu, ICU kalıbı grubunun 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 herhangi birini de sağlayabilirsiniz:

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

Etikete uygulanan gerçek biçimlendirme, API'nin yüklendiği yerel ayardan türetilir. Daha fazla ayrıntı için belirli bir yerel ayara sahip grafikleri yükleme bölümüne bakın.

İşaret değerlerini ve kılavuz çizgilerini hesaplarken, ilgili tüm kılavuz çizgisi seçeneklerinin çeşitli alternatif kombinasyonları dikkate alınır ve biçimlendirilmiş onay etiketlerinin yinelenmesi veya çakışması durumunda alternatifler reddedilir. Dolayısıyla, yalnızca tam sayı onay işareti değerlerini göstermek istiyorsanız format:"#" öğesini belirtebilirsiniz ancak bu koşulu karşılayan hiçbir alternatif yoksa kılavuz çizgisi veya değer çizgisinin gösterilmeyeceğini unutmayın.

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

Yatay eksende kılavuz çizgilerini yapılandırmaya yönelik özelliklere sahip bir nesne. Yatay eksen kılavuz çizgilerinin dikey olarak çizildiğini unutmayın. Bu nesnenin özelliklerini belirtmek için burada gösterildiği gibi nesne değişmez değer gösterimini kullanabilirsiniz: 

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

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

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

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

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

Grafik olarak hesaplanan kılavuz çizgileriyle birlikte kullanıldığında tarih/tarih/saat/günün belirli özellikleri için varsayılan biçimi geçersiz kılar. Yıl, ay, gün, saat, dakika, saniye ve milisaniye için biçimlendirmeye 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 bilgiye Tarihler ve Saatler bölümünden ulaşabilirsiniz.

Tür: nesne
Varsayılan: null
hAxis.minorGridlines

hAxis.gridlines seçeneğine benzer şekilde, yatay eksende alt kılavuz çizgilerini yapılandırmak için üyelere sahip bir nesne.

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

Grafik alanındaki 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.minorGridlines.count

Sayısı 0'a ayarlanarak küçük kılavuz çizgilerinin devre dışı bırakılması dışında, minorGridlines.count seçeneği çoğunlukla kullanımdan kaldırılmıştır. Alt kılavuz çizgilerinin sayısı artık tamamen ana kılavuz çizgileri (bkz. hAxis.gridlines.interval) ile gerekli minimum alan (bkz. hAxis.minorGridlines.minSpacing) arasındaki aralığa bağlıdır.

Tür: numara
Varsayılan: 1
hAxis.minorGridlines.units

Grafik olarak hesaplanan alt kılavuz çizgileriyle birlikte kullanıldığında tarih/tarih/saat/günün saati 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 için biçimlendirmeye olanak tanır.

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 bilgiye Tarihler ve Saatler bölümünden ulaşabilirsiniz.

Tür: nesne
Varsayılan: null
hAxis.logScale

Yatay ekseni logaritmik ölçeğe dönüştüren hAxis özelliği (tüm değerlerin pozitif olması gerekir). Evet için doğru değerine ayarlanır.

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

Yatay ekseni logaritmik ölçeğe dönüştüren hAxis özelliği. Aşağıdakilerden biri olabilir:

  • null - Logaritmik ölçeklendirme yapılmaz.
  • "log": Logaritmik ölçeklendirme. Negatif ve sıfır değerleri çizilmez. Bu seçenek, hAxis: { logscale: true } ayarlamasıyla aynıdır.
  • "ayrorLog" - Negatif ve sıfır değerlerinin çizildiği logaritmik ölçeklendirme. Negatif bir sayının gösterilen değeri, mutlak değer günlüğünün negatifidir. 0'a yakın değerler doğrusal bir ölçekte çizilir.
Tür: dize
Varsayılan: null
hAxis.textPosition

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

Tür: dize
Varsayılan: 'out'
hAxis.textStyle

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'. Ayrıca bkz. fontName ve fontSize.

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

Otomatik olarak oluşturulan X ekseni değer işaretlerini belirtilen diziyle değiştirir. Dizinin her öğesi, geçerli bir değer işareti (sayı, tarih, tarih, saat veya günün saati gibi) veya bir nesne olmalıdır. Söz konusu nesne bir nesneyse etiket olarak gösterilecek sabit dizeyi içeren isteğe bağlı bir f özelliği, onay değeri için v özelliğine sahip olmalıdır.

ViewWindow, geçersiz kılmak için bir viewWindow.min veya viewWindow.max belirtmediğiniz sürece otomatik olarak minimum ve maksimum değeri içerecek şekilde 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] }
Tür: Öğe dizisi
Varsayılan: auto
hAxis.title

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

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

Yatay eksen başlığı 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'. Ayrıca bkz. fontName ve fontSize.

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

Yatay eksenin maksimum değerini belirtilen değere taşır. Bu, çoğu grafikte sağa doğru olacaktır. Bu, 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.

Tür: numara
Varsayılan: auto
hAxis.minValue

Yatay eksenin minimum değerini belirtilen değere taşır; bu, çoğu grafikte sola doğru olur. Bu, 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.

Tür: numara
Varsayılan: auto
hAxis.viewWindowMode

Grafik alanındaki değerleri oluşturmak için yatay eksenin nasıl ölçeklendirileceğini belirtir. Aşağıdaki dize değerleri desteklenir:

  • "güzel": Yatay değerleri, maksimum ve minimum veri değerleri grafik alanının sol ve sağ tarafında biraz oluşturulacak şekilde ölçeklendirin. ViewWindow, sayılar için en yakın ana kılavuz çizgisine veya tarihler ve saatler için en yakın alt kılavuz çizgisine genişletilir.
  • "maximized": Yatay değerleri, maksimum ve minimum veri değerleri grafik alanının sol ve sağına dokunacak şekilde ölçeklendirin. 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 desteği sonlandırılmış seçenek. (haxis.viewWindow.min ve haxis.viewWindow.max ile gereksiz olduğu için 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 belirtmeniz gerekir.
Tür: dize
Varsayılan: "pretty" ile 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

Oluşturulacak maksimum yatay veri değeri.

hAxis.viewWindowMode "güzel" veya "büyütülmüş" olduğunda yoksayılır.

Tür: numara
Varsayılan: auto
hAxis.viewWindow.min

Oluşturulacak minimum yatay veri değeri.

hAxis.viewWindowMode "güzel" veya "büyütülmüş" olduğunda yoksayılır.

Tür: numara
Varsayılan: auto
yükseklik

Grafiğin piksel cinsinden yüksekliği.

Tür: numara
Varsayılan: kapsayıcı öğenin yüksekliği
harita açıklamaları

Açıklamanın çeşitli yönlerini yapılandıran üyeleri içeren bir nesne. Bu nesnenin özelliklerini belirtmek için burada gösterildiği gibi nesne değişmez değer gösterimini kullanabilirsiniz: 

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Tür: nesne
Varsayılan: null
legend.alignment

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

  • 'start' - Açıklama için ayrılan alanın başlangıcına hizalanır.
  • "center": Açıklama için ayrılan alanın ortasındadır.
  • 'end' - Açıklama için ayrılan alanın sonuna hizalanır.

Başlangıcı, ortası ve bitişi, göstergenin stiline (dikey veya yatay) bağlıdır. Örneğin, "sağ" açıklamalarda "start" ve "end" öğeleri sırasıyla üst ve aşağıda yer alır. "Üst" gösterge için "start" ve "end" sırasıyla alanın sol ve sağında yer alır.

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

Tür: dize
Varsayılan: auto
legend.maxLines

Göstergedeki maksimum satır sayısı. Açıklamanı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 kesin mantık hâlâ değişkendir.

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

Tür: numara
Varsayılan: 1
legend.pageIndex

Açıklamanın ilk seçilen sıfır tabanlı sayfa dizini.

Tür: numara
Varsayılan: 0
legend.position

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

  • "bottom": Grafiğin altında.
  • "left" - Sol eksenle ilişkili seri olmadığı sürece grafiğin solunda. Göstergenin sol tarafta olmasını istiyorsanız targetAxisIndex: 1 seçeneğini kullanın.
  • 'in' - Grafiğin içinde, sol üst köşede.
  • "none" (hiçbiri) - Açıklama gösterilmez.
  • "right" (sağ): Grafiğin sağında. vAxes seçeneği ile uyumlu değildir.
  • "top" (üstte): Grafiğin üstünde.
Tür: dize
Varsayılan: 'right'
legend.textStyle

Açıklama 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'. Ayrıca bkz. fontName ve fontSize.

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

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

Tür: dize
Varsayılan: "single"
seri

Anahtarların seri adları (Renk sütunundaki değerler) ve her bir nesnenin, grafikteki karşılık gelen serinin biçimini açıklayan bir nesne nesnesi. Seri veya değer belirtilmezse genel değer kullanılır. Her nesne aşağıdaki özellikleri destekler:

  • color - Bu seri için kullanılacak renk. Geçerli bir HTML renk dizesi belirtin.
  • visibleInLegend: Boole değeri; true, serinin bir gösterge girişine sahip olması gerektiği, false (yanlış) değerine sahip olması gerektiği anlamına gelir. Varsayılan değer, doğru değeridir.
Örnek: 
series: {'Europe': {color: 'green'}}
Tür: İç içe yerleştirilmiş nesneler içeren nesne
Varsayılan: {}
sizeAxis

Değerlerin balon boyutuyla ilişkilendirilme şeklini yapılandıran üyelere sahip bir nesne. Bu nesnenin özelliklerini belirtmek için burada gösterildiği gibi nesne değişmez değer gösterimini kullanabilirsiniz: 

 {minValue: 0,  maxSize: 20}
Tür: nesne
Varsayılan: null
sizeAxis.maxSize

Olası en büyük balonun piksel cinsinden maksimum yarıçapı.

Tür: numara
Varsayılan: 30
sizeAxis.maxValue

sizeAxis.maxSize ile eşlenecek beden değeri (grafik verilerinde göründüğü şekliyle). Daha büyük değerler bu değere kırpılır.

Tür: numara
Varsayılan: Grafik verilerindeki maksimum boyut sütunu değeri
sizeAxis.minSize

Olası en küçük balonun piksel cinsinden minimum yarıçapı.

Tür: numara
Varsayılan: 5
sizeAxis.minValue

sizeAxis.minSize ile eşlenecek beden değeri (grafik verilerinde göründüğü şekliyle). Daha küçük değerler bu değere kırpılır.

Tür: numara
Varsayılan: Grafik verilerindeki minimum boyut sütunu değeri
sortBubblesBySize

Doğru değerine ayarlanmışsa küçük baloncukların daha büyük baloncukların üzerinde görünmesi için balonları boyuta göre sıralar. Yanlış değerine ayarlanırsa baloncuklar DataTable'daki sıralarına göre sıralanır.

Tür: boole
Varsayılan: true
tema

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

  • "maximized" - Grafiğin alanını en üst düzeye çıkarır, açıklamayı ve tüm etiketleri grafik alanı içinde ç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
title

Grafiğin üzerinde gösterilecek metin.

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

Grafik alanına kıyasla grafik başlığının yerleştirileceği yer. Desteklenen değerler:

  • in - Başlığı grafik alanı içine çizin.
  • dışa - Başlığı grafik alanının dışına çizin.
  • none (hiçbiri) - Başlığı atlayın.
Tür: dize
Varsayılan: 'out'
titleTextStyle

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'. Ayrıca bkz. fontName ve fontSize.

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 üyeler içeren bir nesne. Bu nesnenin özelliklerini belirtmek için burada gösterildiği gibi nesne değişmez değer gösterimini kullanabilirsiniz: 

{textStyle: {color: '#FF0000'}, showColorCode: true}
Tür: nesne
Varsayılan: null
tooltip.isHtml

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

Not: HTML ipucu içeriğinin ipucu sütunu veri rolü aracılığıyla özelleştirilmesi balon grafik görselleştirmesi tarafından desteklenmez.

Tür: boole
Varsayılan: false
tooltip.textStyle

İ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'. Ayrıca bkz. fontName ve fontSize.

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

İpucunun görüntülenmesine neden olan kullanıcı etkileşimi:

  • "Odak": Kullanıcı, öğenin üzerine geldiğinde ipucu gösterilir.
  • "none" (hiçbiri): İpucu gösterilmez.
  • "seçim": İpucu, kullanıcı öğeyi seçtiğinde gösterilir.
Tür: dize
Varsayılan: 'focus'
vAxis

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

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

Dikey eksen için referans değeri belirten vAxis özelliği. Referans çizgi en yüksek kılavuz çizgisinden daha büyük veya en alt ızgara çizgisinden küçükse en yakın kılavuz çizgisine yuvarlanır.

Tür: numara
Varsayılan: auto
vAxis.baselineColor

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

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

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

Tür: 1 veya -1
Varsayılan: 1
vAxis.format

Sayısal eksen etiketleri için bir biçim dizesi. Bu, ICU kalıbı grubunun 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 herhangi birini de sağlayabilirsiniz:

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

Etikete uygulanan gerçek biçimlendirme, API'nin yüklendiği yerel ayardan türetilir. Daha fazla ayrıntı için belirli bir yerel ayara sahip grafikleri yükleme bölümüne bakın.

İşaret değerlerini ve kılavuz çizgilerini hesaplarken, ilgili tüm kılavuz çizgisi seçeneklerinin çeşitli alternatif kombinasyonları dikkate alınır ve biçimlendirilmiş onay etiketlerinin yinelenmesi veya çakışması durumunda alternatifler reddedilir. Dolayısıyla, yalnızca tam sayı onay işareti değerlerini göstermek istiyorsanız format:"#" öğesini belirtebilirsiniz ancak bu koşulu karşılayan hiçbir alternatif yoksa kılavuz çizgisi veya değer çizgisinin gösterilmeyeceğini unutmayın.

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

Dikey eksende kılavuz çizgilerini yapılandırmak için üyelere sahip bir nesne. Dikey eksen kılavuz çizgilerinin yatay olarak çizildiğini unutmayın. Bu nesnenin özelliklerini belirtmek için burada gösterildiği gibi nesne değişmez değer gösterimini kullanabilirsiniz: 

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

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

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

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

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

Grafik olarak hesaplanan kılavuz çizgileriyle birlikte kullanıldığında tarih/tarih/saat/günün belirli özellikleri için varsayılan biçimi geçersiz kılar. Yıl, ay, gün, saat, dakika, saniye ve milisaniye için biçimlendirmeye 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 bilgiye Tarihler ve Saatler bölümünden ulaşabilirsiniz.

Tür: nesne
Varsayılan: null
vAxis.minorGridlines

vAxis.gridlines seçeneğine benzer şekilde, dikey eksende alt kılavuz çizgilerini yapılandırmak için üyelere sahip bir nesne.

Tür: nesne
Varsayılan: null
vAxis.minorGridlines.color

Grafik alanındaki 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.minorGridlines.count

Azınlık Gridlines.count seçeneğinin çoğu kullanımdan kaldırılmıştır. Bunun tek istisnası, sayının 0'a ayarlanmasıyla küçük kılavuz çizgilerinin devre dışı bırakılmasıdır. Alt kılavuz çizgilerinin sayısı, ana kılavuz çizgilerinin sayısı (bkz. vAxis.gridlines.interval) ile gerekli minimum alan (vAxis.minorGridlines.minSpacing) arasındaki aralığa bağlıdır.

Tür: numara
Varsayılan: 1
vAxis.minorGridlines.units

Grafik olarak hesaplanan alt kılavuz çizgileriyle birlikte kullanıldığında tarih/tarih/saat/günün saati 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 için biçimlendirmeye olanak tanır.

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 bilgiye Tarihler ve Saatler bölümünden ulaşabilirsiniz.

Tür: nesne
Varsayılan: null
vAxis.logScale

Doğru değerine ayarlanırsa dikey ekseni logaritmik ölçek haline getirir. Not: Tüm değerler pozitif olmalıdır.

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

Dikey ekseni logaritmik ölçeğe dönüştüren vAxis özelliği. Aşağıdakilerden biri olabilir:

  • null - Logaritmik ölçeklendirme yapılmaz.
  • "log": Logaritmik ölçeklendirme. Negatif ve sıfır değerleri çizilmez. Bu seçenek, vAxis: { logscale: true } ayarlamasıyla aynıdır.
  • "ayrorLog" - Negatif ve sıfır değerlerinin çizildiği logaritmik ölçeklendirme. Negatif bir sayının gösterilen değeri, mutlak değer günlüğünün negatifidir. 0'a yakın değerler doğrusal bir ölçekte çizilir.
Tür: dize
Varsayılan: null
vAxis.textPosition

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

Tür: dize
Varsayılan: 'out'
vAxis.textStyle

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'. Ayrıca bkz. fontName ve fontSize.

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

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

ViewWindow, geçersiz kılmak için bir viewWindow.min veya viewWindow.max belirtmediğiniz sürece otomatik olarak minimum ve maksimum değeri içerecek şekilde 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: auto
vAxis.title

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

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

Dikey eksen 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'. Ayrıca bkz. fontName ve fontSize.

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ı olacaktır. Bu, 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: numara
Varsayılan: auto
vAxis.minValue

Dikey eksenin minimum değerini belirtilen değere taşır. Bu, çoğu grafikte aşağı doğru olacaktır. 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: numara
Varsayılan: null
vAxis.viewWindowMode

Grafik alanındaki değerleri oluşturmak için dikey eksenin nasıl ölçeklendirileceğ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 biraz oluşturulacak şekilde ölçeklendirin. ViewWindow, sayılar için en yakın ana kılavuz çizgisine veya tarihler ve saatler için en yakın alt kılavuz çizgisine genişletilir.
  • "maximized": Dikey değerleri, maksimum ve minimum veri değerleri grafik alanının üst ve alt kısmına temas edecek ş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 desteği sonlandırılmış 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 belirtmeniz gerekir.
Tür: dize
Varsayılan: "pretty" ile 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 "büyütülmüş" olduğunda yoksayılır.

Tür: numara
Varsayılan: auto
vAxis.viewWindow.min

Oluşturulacak minimum dikey veri değeri.

vAxis.viewWindowMode "güzel" veya "büyütülmüş" olduğunda yoksayılır.

Tür: numara
Varsayılan: auto
genişlik

Grafiğin piksel cinsinden genişliği.

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

Yöntemler

Yöntem
draw(data, options)

Grafiği çizer. Grafik, yalnızca ready etkinliği etkinleştikten sonra başka yöntem çağrılarını kabul eder. Extended description.

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

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

Return Type: 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ştir (bunlar, etkinlik işleyicilerin döndürülen değerleridir). Aşağıda bazı örnekler verilmiştir:

var cli = chart.getChartLayoutInterface();

Grafik alanının yüksekliği
cli.getBoundingBox('chartarea').height
Bir ç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 dilimindeki sınırlayıcı kutu
cli.getBoundingBox('slice#4')
Bir dikey (ör. sütun) grafiğin grafik verileri için sınırlayıcı kutu:
cli.getBoundingBox('vAxis#0#gridline')
Yatay (ör. çubuk) bir grafiğin grafik verileri için sınırlayıcı kutu:
cli.getBoundingBox('hAxis#0#gridline')

Değerler, grafiğin kapsayıcısına bağlıdır. Grafik çizildikten sonra bunu çağırın.

Return Type: nesne
getChartAreaBoundingBox()

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

var cli = chart.getChartLayoutInterface();

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

Değerler, grafiğin kapsayıcısına bağlıdır. Grafik çizildikten sonra bunu çağırın.

Return Type: nesne
getChartLayoutInterface()

Grafiğin ve öğelerinin ekrandaki yerleşimiyle ilgili bilgileri içeren bir nesneyi döndürür.

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

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

Grafik çizildikten sonra bunu çağırın.

Return Type: nesne
getHAxisValue(xPosition, optional_axis_index)

Grafik kapsayıcısının sol kenarından piksel uzaklığı olan xPosition yatay veri değerini döndürür. Negatif olabilir.

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

Grafik çizildikten sonra bunu çağırın.

İade Türü: numara
getImageURI()

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

Grafik çizildikten sonra bunu çağırın.

Bkz. PNG Grafiklerini Yazdırma.

Return Type: dize
getSelection()

Seçilen grafik varlıklarından oluşan bir dizi döndürür. Seçilebilir öğeler baloncuklardır. Bu grafik için aynı anda yalnızca bir öğe 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 değer, grafik kapsayıcısının üst kenarından aşağı doğru piksel uzaklığıdır. Negatif olabilir.

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

Grafik çizildikten sonra bunu ç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ını döndürür.

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

Grafik çizildikten sonra bunu ç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ını döndürür.

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

Grafik çizildikten sonra bunu çağırın.

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

İstenen actionID değerini içeren 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 ayarlar.

setAction yöntemi, bir nesneyi işlem parametresi olarak alır. Bu nesne 3 özellik belirtmelidir: id - ayarlanan işlemin kimliği, text —işleme ilişkin ipucunda görünmesi gereken metin ve action - kullanıcı işlem metnini tıkladığında çalıştırılması gereken işlev.

Tüm ipucu işlemleri, grafiğin draw() yöntemi çağrılmadan önce ayarlanmalıdır. Genişletilmiş açıklama.

İade Türü: none
setSelection()

Belirtilen grafik varlıklarını seçer. Önceki seçimleri iptal eder. Seçilebilir öğeler baloncuklardır. Bu grafik için aynı anda yalnızca bir öğe seçilebilir. Extended description .

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

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

Return Type (Dönüş Türü): yok

Etkinlikler

Bu etkinliklerin nasıl kullanılacağı hakkında daha fazla bilgi için Temel Etkileşim, Etkinlikleri Yönetme ve Etkinleşme Etkinliklerini inceleyin.

Ad
animationfinish

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

Özellikler: yok
click

Kullanıcı grafiğin içini tıkladığında tetiklenir. Başlığın, veri öğelerinin, gösterge girişlerinin, eksenlerin, kılavuz çizgilerinin veya etiketlerin ne zaman tıklandığını tanımlamak 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ı, sayfa açıklaması oklarını tıkladığında tetiklenir. Açıklamaların sıfır tabanlı mevcut sayfa dizinini ve toplam sayfa sayısını geri verir.

Özellikler: currentPageIndex, totalPages
onmouseover

Kullanıcı fareyle bir görsel öğenin üzerine geldiğinde tetiklenir. İlgili veri tablosu öğesinin satır ve sütun dizinlerini geri verir. Balon, veri tablosundaki bir satırla ilişkilidir (sütun dizini boştur).

Özellikler: satır, sütun
onmouseout

Kullanıcı faresini görsel bir öğeden uzaklaştırdığında tetiklenir. İlgili veri tablosu öğesinin satır ve sütun dizinlerini geri verir. Balon, veri tablosundaki bir satırla ilişkilidir (sütun dizini boştur).

Özellikler: satır, sütun
ready

Grafik, harici yöntem çağrıları için hazır. Grafikle etkileşim kurmak ve çizdikten sonra yöntemleri çağırmak isterseniz draw yöntemini çağırmadan önce bu etkinlik için bir işleyici ayarlamalı ve bunları yalnızca etkinlik tetiklendikten sonra çağırmalısınız.

Özellikler: yok
select

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

Özellikler: yok

Veri Politikası

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