Görselleştirme: Sütun Grafik

Genel bakış

Sütun grafik, kullanıcının tarayıcısı için uygun olan SVG veya VML kullanılarak tarayıcıda oluşturulan dikey çubuk grafiktir. Tüm Google grafiklerinde olduğu gibi, sütun grafiklerde de kullanıcı verilerin üzerine geldiğinde ipuçları gösterilir. Bu grafiğin yatay bir sürümü için çubuk grafiğe bakın.

Örnekler

Sütunları renklendirme

Dört değerli metalin yoğunluğunu grafik haline getirelim:

Yukarıda, tüm renkler varsayılan mavi renktedir. Çünkü hepsi aynı serinin parçaları. İkinci bir seri olsaydı bu kırmızı renkte olacaktı. Bu renkleri stil rolüyle özelleştirebiliriz:

Renkleri seçmenin üç farklı yolu vardır ve veri tablomuzda hepsi gösterilir: RGB değerleri, İngilizce renk adları ve CSS benzeri bir bildirim: 

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }],
         ['Copper', 8.94, '#b87333'],            // RGB value
         ['Silver', 10.49, 'silver'],            // English color name
         ['Gold', 19.30, 'gold'],

       ['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration
      ]);

Sütun stilleri

Stil rolü, CSS benzeri bildirimlerle sütun görünümünün çeşitli özelliklerini kontrol etmenizi sağlar:

  • color
  • opacity
  • fill-color
  • fill-opacity
  • stroke-color
  • stroke-opacity
  • stroke-width

Bir grafik içinde stilleri çok serbest bir şekilde karıştırmanızı, yani bir stil seçmenizi ve tarzı sürdürmenizi önermeyiz. Ancak, tüm stil özelliklerini göstermek için aşağıda bir örnek verilmiştir:

İlk iki sütunun her biri belirli bir color kullanır (ilki İngilizce ad, ikincisi ise RGB değerine sahiptir). opacity seçilmedi. Bu nedenle, varsayılan değer olan 1.0 (tamamen opak) kullanıldı. Bu nedenle, ikinci sütun arkadaki kılavuz çizgisini gizler. Üçüncü sütunda 0,2 değerindeki opacity değeri kullanılmıştır. Dördüncüde üç stil özelliği kullanılır: kenarlığı çizmek için stroke-color ve stroke-width ve içindeki dikdörtgenin rengini belirtmek için fill-color. En sağdaki sütun ayrıca kenarlık ve dolgu için opaklıkları seçmek amacıyla stroke-opacity ve fill-opacity değerlerini kullanır: 

   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Visitations', { role: 'style' } ],
        ['2010', 10, 'color: gray'],
        ['2020', 14, 'color: #76A7FA'],
        ['2030', 16, 'opacity: 0.2'],
        ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
        ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
      ]);

Sütunları etiketleme

Grafiklerin onay etiketleri, gösterge etiketleri ve araç ipuçlarındaki etiketler gibi çeşitli etiketleri vardır. Bu bölümde, etiketlerin sütun grafikteki sütunların içine (veya yakınına) nasıl yerleştirileceğine göz atacağız.

Her bir sütuna uygun kimyasal simgeyle açıklama eklemek istediğimizi varsayalım. Bunu notation rolüyle yapabiliriz:

Veri tablomuzda, sütun etiketlerimizi tutmak için { role: 'annotation' } ile yeni bir sütun tanımlıyoruz: 

       var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['Copper', 8.94, '#b87333', 'Cu' ],
         ['Silver', 10.49, 'silver', 'Ag' ],
         ['Gold', 19.30, 'gold', 'Au' ],
         ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ]
      ]);

Kullanıcılar veri değerlerini görmek için fareyle sütunların üzerine gelebilir ancak bunları sütunlara eklemek isteyebilirsiniz:

Bu, olması gerekenden biraz daha karmaşıktır. Çünkü her bir sütuna ilişkin ek açıklamayı belirtmek üzere bir DataView oluşturduğumuzdan. 

  <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([
        ["Element", "Density", { role: "style" } ],
        ["Copper", 8.94, "#b87333"],
        ["Silver", 10.49, "silver"],
        ["Gold", 19.30, "gold"],
        ["Platinum", 21.45, "color: #e5e4e2"]
      ]);

      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1,
                       { calc: "stringify",
                         sourceColumn: 1,
                         type: "string",
                         role: "annotation" },
                       2]);

      var options = {
        title: "Density of Precious Metals, in g/cm^3",
        width: 600,
        height: 400,
        bar: {groupWidth: "95%"},
        legend: { position: "none" },
      };
      var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
      chart.draw(view, options);
  }
  </script>
<div id="columnchart_values" style="width: 900px; height: 300px;"></div>

Değeri farklı bir şekilde biçimlendirmek isteseydik bir biçimlendirici tanımlayabilir ve bunu şu şekilde bir işleve sarmalayabiliriz: 

      function getValueAt(column, dataTable, row) {
        return dataTable.getFormattedValue(row, column);
      }

Daha sonra calc: getValueAt.bind(undefined, 1) olarak adlandırabiliriz.

Etiket, sütunun içine tamamen sığmayacak kadar büyükse dışında görüntülenir:

Yığınlı sütun grafikler

Yığınlı sütun grafik, ilgili değerleri birbirinin üzerine yerleştiren bir sütun grafiktir. Negatif değerler varsa bunlar, grafiğin taban çizgisinin altında ters sırada yığılır. Genellikle bir kategori doğal olarak bileşenlere bölündüğünde kullanılır. Örneğin, bazı varsayımsal kitap satışlarının türe göre ayrılmış ve zamanla karşılaştırıldığı bir bölümü düşünün:

isStacked seçeneğini true olarak ayarlayarak yığınlı sütun grafik oluşturabilirsiniz: 

      var data = google.visualization.arrayToDataTable([
        ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General',
         'Western', 'Literature', { role: 'annotation' } ],
        ['2010', 10, 24, 20, 32, 18, 5, ''],
        ['2020', 16, 22, 23, 30, 16, 9, ''],
        ['2030', 28, 19, 29, 30, 12, 13, '']
      ]);

      var options = {
        width: 600,
        height: 400,
        legend: { position: 'top', maxLines: 3 },
        bar: { groupWidth: '75%' },
        isStacked: true,
      };

Yığınlı sütun grafikler, her bir alan değerindeki öğe yığınlarının toplamı% 100'e eşit olacak şekilde yeniden ölçeklendirilen %100 yığınlamayı da destekler. Bununla ilgili seçenekler, her bir değeri %100 olarak biçimlendiren isStacked: 'percent' ve her bir değeri 1'in kesirli bir şekilde biçimlendiren isStacked: 'relative' şeklindedir. Ayrıca, işlevsel olarak isStacked: true ile eşdeğer olan bir isStacked: 'absolute' seçeneği de mevcuttur.

Sağdaki% 100 yığınlı grafikte, onay işareti değerlerinin 1'in kesirleri halinde göreli 0-1 ölçeğini temel aldığını, eksen değerlerinin yüzde olarak gösterildiğini unutmayın. Bunun nedeni, yüzde eksenindeki değer işaretlerinin, göreli 0-1 ölçek değerlerine "%#.##" biçiminde bir biçim uygulanması sonucunda elde edilmesidir. isStacked: 'percent' kullanırken göreli 0-1 ölçeğini kullanarak tüm çizgi/eksen değerlerini belirttiğinizden emin olun.

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

Materyal sütun grafikleri oluşturma

2014'te Google, Google platformlarında çalışan mülklerinde ve uygulamalarında (Android uygulamaları gibi) ortak bir görünümü ve tarzı desteklemeyi amaçlayan yönergeler duyurdu. Bu çalışmaya Materyal Tasarım diyoruz. Tüm temel grafiklerimizin "Materyal" versiyonlarını sağlayacağız. Görünüşlerini beğenirseniz bunları kullanabilirsiniz.

Malzeme Sütun Grafiği oluşturmak, artık "Klasik" Sütun Grafiği olarak adlandıracağımız sütuna benzer. Google Görselleştirme API'sini yüklersiniz (ancak 'corechart' paketi yerine 'bar' paketiyle), veri tablonuzu tanımlar ve ardından bir nesne oluşturursunuz (ancak google.visualization.ColumnChart yerine google.charts.Bar sınıfını).

Çubuk grafikler ve sütun grafikler temelde aynı olduğundan, yön için çubukların dikey (sınıflı olarak, sütun grafik) veya yatay (çubuk grafik) olup olmadığına bakılmaksızın her iki Malzeme Çubuk Grafiği olarak adlandırılır. Material'daki tek fark bars seçeneğidir. 'horizontal' olarak ayarlandığında yön, geleneksel Klasik Çubuk Grafik'e benzer; aksi takdirde, çubuklar dikey olur.

Not: Malzeme Grafikleri, Internet Explorer'ın eski sürümlerinde çalışmaz. (IE8 ve önceki sürümler, Materyal Grafikler'in gerektirdiği SVG'yi desteklemez.)

Malzeme Sütun Grafikleri, Klasik Sütun Grafiklerine kıyasla iyileştirilmiş renk paleti, yuvarlatılmış köşeler, daha net etiket biçimlendirmesi, seriler arasında daha dar varsayılan boşluklar, daha yumuşak kılavuz çizgileri ve başlıklar (ve altyazıların eklenmesi) gibi birçok küçük iyileştirme sunar.

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

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

        var options = {
          chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: 2014-2017',
          }
        };

        var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    </script>
  </head>
  <body>
    <div id="columnchart_material" style="width: 800px; height: 500px;"></div>
  </body>
</html>

Materyal Grafikleri beta sürümündedir. Görünüm ve etkileşim büyük ölçüde nihaidir ancak Klasik Grafikler'deki seçeneklerin birçoğu henüz bu seçeneklerde kullanıma sunulmamıştır. Henüz desteklenmeyen seçeneklerin listesini bu sorunda bulabilirsiniz.







chart.draw(data, options);chart.draw(data, google.charts.Bar.convertOptions(options));

google.charts.Bar.convertOptions() kullanılması, hAxis/vAxis.format hazır ayar seçenekleri gibi belirli özelliklerden yararlanmanızı sağlar.

Çift Y grafikleri

Bazen bir sütun grafikte iki bağımsız Y ekseniyle iki seri göstermek istersiniz: bir dizi için bir sol eksen ve başka bir seri için bir sağ eksen:

İki y eksenimizin de farklı şekilde ("parsecler" ve "görünür büyüklük") etiketlenmesinin yanı sıra her birinin kendi bağımsız ölçekleri ve kılavuz çizgileri olduğunu unutmayın. Bu davranışı özelleştirmek isterseniz vAxis.gridlines seçeneklerini kullanın.

Aşağıdaki kodda, axes ve series seçenekleri birlikte grafiğin çift Y görünümünü belirtir. series seçeneği, her biri için hangi eksenin kullanılacağını belirtir ('distance' ve 'brightness'; bunların veri tablosundaki sütun adlarıyla herhangi bir ilişkileri yoktur). Daha sonra axes seçeneği, 'distance' eksenini sola ("parseks" olarak adlandırılır) ve 'brightness' eksenini ("görünür büyüklük" olarak etiketlenir) sağa yerleştirerek grafiği çift Y grafiği haline getirir. 

<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', 'bar']});
      google.charts.setOnLoadCallback(drawStuff);

      function drawStuff() {

        var button = document.getElementById('change-chart');
        var chartDiv = document.getElementById('chart_div');

        var data = google.visualization.arrayToDataTable([
          ['Galaxy', 'Distance', 'Brightness'],
          ['Canis Major Dwarf', 8000, 23.3],
          ['Sagittarius Dwarf', 24000, 4.5],
          ['Ursa Major II Dwarf', 30000, 14.3],
          ['Lg. Magellanic Cloud', 50000, 0.9],
          ['Bootes I', 60000, 13.1]
        ]);

        var materialOptions = {
          width: 900,
          chart: {
            title: 'Nearby galaxies',
            subtitle: 'distance on the left, brightness on the right'
          },
          series: {
            0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'.
            1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'.
          },
          axes: {
            y: {
              distance: {label: 'parsecs'}, // Left y-axis.
              brightness: {side: 'right', label: 'apparent magnitude'} // Right y-axis.
            }
          }
        };

        var classicOptions = {
          width: 900,
          series: {
            0: {targetAxisIndex: 0},
            1: {targetAxisIndex: 1}
          },
          title: 'Nearby galaxies - distance on the left, brightness on the right',
          vAxes: {
            // Adds titles to each axis.
            0: {title: 'parsecs'},
            1: {title: 'apparent magnitude'}
          }
        };

        function drawMaterialChart() {
          var materialChart = new google.charts.Bar(chartDiv);
          materialChart.draw(data, google.charts.Bar.convertOptions(materialOptions));
          button.innerText = 'Change to Classic';
          button.onclick = drawClassicChart;
        }

        function drawClassicChart() {
          var classicChart = new google.visualization.ColumnChart(chartDiv);
          classicChart.draw(data, classicOptions);
          button.innerText = 'Change to Material';
          button.onclick = drawMaterialChart;
        }

        drawMaterialChart();
    };
    </script>
  </head>
  <body>
    <button id="change-chart">Change to Classic</button>
    <br><br>
    <div id="chart_div" style="width: 800px; height: 500px;"></div>
  </body>
</html>

Top-X listeleri

Not: Üst X eksenleri yalnızca Malzeme grafikleri (yani bar paketi olanlar) için kullanılabilir.

X ekseni etiketlerini ve başlığını grafiğinizin alt kısmı yerine üzerine yerleştirmek isterseniz bunu axes.x seçeneğiyle Materyal grafiklerinde yapabilirsiniz:

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

      function drawStuff() {
        var data = new google.visualization.arrayToDataTable([
          ['Move', 'Percentage'],
          ["King's pawn (e4)", 44],
          ["Queen's pawn (d4)", 31],
          ["Knight to King 3 (Nf3)", 12],
          ["Queen's bishop pawn (c4)", 10],
          ['Other', 3]
        ]);

        var options = {
          width: 800,
          legend: { position: 'none' },
          chart: {
            title: 'Chess opening moves',
            subtitle: 'popularity by percentage' },
          axes: {
            x: {
              0: { side: 'top', label: 'White to move'} // Top x-axis.
            }
          },
          bar: { groupWidth: "90%" }
        };

        var chart = new google.charts.Bar(document.getElementById('top_x_div'));
        // Convert the Classic options to Material options.
        chart.draw(data, google.charts.Bar.convertOptions(options));
      };
    </script>
  </head>
  <body>
    <div id="top_x_div" style="width: 800px; height: 600px;"></div>
  </body>
</html>

Yükleniyor

google.charts.load paketinin adı: "corechart". Görselleştirmenin sınıf adı: google.visualization.ColumnChart. 

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

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

Malzeme Sütun Grafikleri için google.charts.load paket adı "bar" şeklindedir. (Yazım hatası değil: Malzeme Çubuk Grafiği her iki yönü de işler.) Görselleştirmenin sınıf adı google.charts.Bar. (Yazım hatası değil: Malzeme Çubuk Grafiği, her iki yönü de kullanır.)

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

  var chart = new google.charts.Bar(container);

Veri biçimi

Tablodaki her satır, bitişik çubuklardan oluşan bir grubu temsil eder.

Satırlar: Tablodaki her satır, bir çubuk grubunu temsil eder.

Sütunlar:

  Sütun 0 1. Sütun ... N sütunu
Amaç:
  • X ekseni grup etiketleri (ayrı)
  • X ekseni değerleri (sürekli)
Bu gruptaki çubuk 1 değerleri ... Bu gruptaki çubuk N değerleri
Veri Türü: sayı ... sayı
Rol: alan veri ... veri
İsteğe bağlı sütun rolleri: ...

 

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
annotations.alwaysOutside

Çubuk ve Sütun grafiklerinde, true değerine ayarlanırsa tüm ek açıklamaları Çubuk/Sütun'un dışına çizer.

Tür: boole
Varsayılan: false
annotations.boxStyle

Ek açıklamaları destekleyen grafiklerde annotations.boxStyle nesnesi, ek açıklamaların etrafındaki 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 grafikleri, karma, çizgi ve dağılım grafikleri için desteklenmektedir. Ek Açıklama Grafiği tarafından desteklenmez.

Tür: nesne
Varsayılan: null
annotations.datum
Notları destekleyen grafiklerde annotations.datum nesnesi, Google Grafikler'in bağımsız veri öğeleri (çubuk grafikte her çubukla gösterilen değerler gibi) için sağlanan ek açıklamalarla ilgili seçimini geçersiz kılmanıza olanak tanır. Rengi annotations.datum.stem.color, gövde uzunluğunu annotations.datum.stem.length ve stili annotations.datum.style ile kontrol edebilirsiniz.
Tür: nesne
Varsayılan: renk "siyah", uzunluk 12, stil "nokta"dır.
annotations.domain
Ek notları destekleyen grafiklerde annotations.domain nesnesi, Google Grafikler'in bir alan adı (normal bir çizgi grafikteki X ekseni gibi ana ekseni) için sağlanan ek açıklamalar için seçimini geçersiz kılmanıza olanak tanır. Rengi annotations.domain.stem.color, gövde uzunluğunu annotations.domain.stem.length ve stili annotations.domain.style ile kontrol edebilirsiniz.
Tür: nesne
Varsayılan: renk "siyah", uzunluk 5, stil "nokta"dır.
annotations.highContrast
Ek açıklamaları destekleyen grafiklerde annotations.highContrast boole değeri, Google Grafikler'in seçtiği ek açıklama rengi seçimini geçersiz kılmanıza olanak tanır. Varsayılan olarak annotations.highContrast doğru değerini alır. Bu da Grafiklerin iyi kontrasta sahip bir ek açıklama rengi (koyu arka planda açık renk, açık arka planda koyu) seçmesine neden olur. annotations.highContrast değerini false (yanlış) değerine ayarlar ve kendi ek açıklama renginizi belirtmezseniz Google Grafikleri, ek açıklama için varsayılan seri rengini kullanır:
Tür: boole
Varsayılan: true
annotations.stem
Notları destekleyen grafiklerde annotations.stem nesnesi, Google Grafikler'in kök stili için seçimini geçersiz kılmanıza olanak tanır. Rengi annotations.stem.color ile, gövde uzunluğunu da annotations.stem.length ile kontrol edebilirsiniz. Sap uzunluğu seçeneğinin 'line' stiline sahip ek açıklamalar üzerinde herhangi bir etkisinin olmadığını unutmayın: 'line' veri ek açıklamaları için gövde uzunluğu her zaman metinle aynıdır. 'line' alan adı ek açıklamaları için gövde uzunluğu ise grafiğin tamamına uygulanır.
Tür: nesne
Varsayılan: renk "siyah"tır; alan ek açıklamaları için uzunluk 5, veri ek açıklamaları için 12'dir.
annotations.style
Notları destekleyen grafiklerde annotations.style seçeneği, Google Grafikler'in seçtiği ek açıklama türünü geçersiz kılmanıza olanak tanır. 'line' veya 'point' olabilir.
Tür: dize
Varsayılan: 'point'
annotations.textStyle
Notları 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 grafikleri, karma, çizgi ve dağılım grafikleri için desteklenmektedir. Ek Açıklama Grafiği tarafından desteklenmez.

Tür: nesne
Varsayılan: null
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'
bar.groupWidth
Şu biçimlerden birinde belirtilen bir çubuk grubunun genişliği:
  • Pikseller (ör. 50).
  • Her bir grup için kullanılabilir genişliğin yüzdesi (ör. "%20"). Burada "%100", grupların aralarında boşluk olmadığını gösterir.
Tür: sayı veya dize
Varsayılan: Altın oran, yaklaşık "%61,8".
çubuk

Material Çubuk Grafik'teki çubukların dikey mi yoksa yatay mı olduğu. Bu seçeneğin Klasik Çubuk Grafikler veya Klasik Sütun Grafikler üzerinde etkisi yoktur.

Tür: " organic" [yatay] veya "vertical" (dikey)
Varsayılan: 'vertical'
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
chart.subtitle

Malzeme Grafikleri için bu seçenek, alt başlığı belirtir. Altyazıları yalnızca Materyal Grafikler destekler.

Tür: dize
Varsayılan: null
chart.title

Malzeme Grafikleri için bu seçenek, başlığı belirtir.

Tür: dize
Varsayılan: null
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
dataOpacity

1.0 tamamen opak ve 0.0 tamamen şeffaf olmak üzere veri noktalarının şeffaflığı. Dağılım, histogram, çubuk ve sütun grafiklerinde bu, görünür verileri ifade eder: dağılım grafiğindeki noktalar ve diğerlerinde dikdörtgenler. Çizgi ve alan grafikleri gibi veri seçiminin nokta oluşturduğu grafiklerde bu, fareyle üzerine gelindiğinde veya seçim yapıldığında görünen daireleri ifade eder. Karma grafik her iki davranışı da gösterir ve bu seçeneğin diğer grafikler üzerinde herhangi bir etkisi yoktur. (Trend çizgisinin opaklığını değiştirmek için trend çizgisinin opaklığı bölümünü inceleyin.)

Tür: numara
Varsayılan: 1.0
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
focusTarget

Fareyle üzerine gelindiğinde odaklanılan varlığın türü. Ayrıca fare tıklamasıyla hangi varlığın seçileceğini ve hangi veri tablosu öğesinin etkinliklerle ilişkilendirileceğini de etkiler. Şunlardan biri olabilir:

  • "veri" - Tek bir veri noktasına odaklanın. Veri tablosundaki bir hücreyle ilişkilendirilir.
  • "kategori" - Ana eksendeki tüm veri noktalarının gruplandırmasına odaklanır. Veri tablosundaki bir satırla ilişkilendirilir.

OdakHedef "kategori" aracındaki ipucu, tüm kategori değerlerini gösterir. Bu işlem, farklı serilerin değerlerini karşılaştırırken işinize yarayabilir.

Tür: dize
Varsayılan: 'datum'
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.

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

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

Yatay eksendeki 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: 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 veya tarih ekseni etiketleri için bir biçim dizesi.

Sayı ekseni etiketleri için bu, ondalık biçimlendirme 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)

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

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.

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

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}

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

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.interval

Bitişik kılavuz çizgileri arasındaki boyut dizisi (piksel olarak değil, veri değerleri olarak). Bu seçenek şu anda yalnızca sayısal eksenler için kullanılabilir ancak yalnızca tarih ve saatler için kullanılan gridlines.units.<unit>.interval seçeneklerine benzer. Doğrusal ölçekler için varsayılan [1, 2, 2.5, 5], kılavuz çizgisi değerlerinin her birim (1), eşit birimler (2) veya 2,5 ya da 5'in katları olabileceği anlamına gelir. Bu değerlerin 10 ile çarpımının kuvveti de dikkate alınır (ör. [10, 20, 25, 50] ve [0,1, 0,2, 0,25, 0,5]). Günlük ölçekleri için varsayılan değer [1, 2, 5] şeklindedir.

Tür: 1 ile 10 arasında bir sayı (10 hariç).
Varsayılan: hesaplanmıştır
hAxis.gridlines.minSpacing

Altı eksen ana kılavuz çizgileri arasında piksel cinsinden minimum ekran alanı. Ana kılavuz çizgileri için varsayılan olarak doğrusal ölçekler için 40, logaritmik ölçekler için 20 kullanılır. minSpacing yerine count değerini belirtirseniz minSpacing sayıya göre hesaplanır. Buna karşılık, count yerine minSpacing özelliğini belirtirseniz sayı minSpacing kullanılarak hesaplanır. İkisini de belirtirseniz minSpacing geçersiz kılınır.

Tür: numara
Varsayılan: hesaplanmıştır
hAxis.gridlines.multiple

Tüm kılavuz çizgisi ve değer çizgisi değerleri, bu seçeneğin değerinin katı olmalıdır. Aralıkların aksine, çarpanın 10 katındaki kuvvetlerin dikkate alınmadığını unutmayın. Yani, gridlines.multiple = 1 belirterek değer çizgilerini tam sayı olmaya zorlayabilir veya gridlines.multiple = 1000 değerini belirterek değer işaretlerini 1000'in katları olmaya zorlayabilirsiniz.

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.

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

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.interval

privateGridlines.interval seçeneği ana kılavuz çizgileri aralık seçeneğine benzer ancak seçilen aralık her zaman ana kılavuz çizgisi aralığının eşit böleni olur. Doğrusal ölçekler için varsayılan aralık [1, 1.5, 2, 2.5, 5], günlük ölçekleri içinse [1, 2, 5] şeklindedir.

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

Bitişik alt kılavuz çizgileri arasında ve alt ile ana kılavuz çizgileri arasındaki piksel cinsinden gerekli minimum alan. Varsayılan değer, doğrusal ölçekler için ana kılavuz çizgilerinin minSpacing değerinin 1/2'si ve logaritmik ölçekler için minSpacing değerinin 1/5'idir.

Tür: numara
Varsayılan:hesaplanan
hAxis.minorGridlines.multiple

Ana gridlines.multiple için aynı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.

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

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.

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

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] }

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

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.allowContainerBoundaryTextCutoff

Yanlış değerine ayarlanırsa grafik kapsayıcısı tarafından kırpılmasına izin vermek yerine en dıştaki etiketler gizlenir. Doğru değerine ayarlanırsa etiketin kırpılmasına 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 eksene daha fazla metin sığdırmak için belirli bir açıyla çizin. Yanlış değerine ayarlanırsa yatay eksen metnini dik doğru çizin. Metin dik bir şekilde çizildiğinde metnin tamamı sığmıyorsa varsayılan davranış eğim şeklindedir. Bu seçeneğin yalnızca hAxis.textPosition "out" (varsayılan) değerine ayarlandığında kullanılabilir olduğuna dikkat edin. Tarih ve saatler için varsayılan değer false'tir.

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

Eğik çizilmişse yatay eksen metninin açısı. hAxis.slantedText değeri false ise veya otomatik moddaysa ve grafik metni yatay olarak çizmeye karar verdiyse yoksayılır. Açı pozitifse saat yönünün tersine, negatifse saat yönündedir.

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

Maksimum yatay eksen metni düzeyi sayısı. Eksen metin etiketleri çok kalabalık olursa sunucu, etiketleri birbirine daha yakın yerleştirmek için komşu etiketleri yukarı veya aşağı kaydırabilir. Bu değer, kullanılacak en fazla seviye sayısını belirtir. Etiketler çakışmadan sığabiliyorsa sunucu daha az seviye kullanabilir. Tarih ve saatler için varsayılan değer 1'dir.

Tür: numara
Varsayılan: 2
hAxis.maxTextLines

Metin etiketleri için izin verilen maksimum satır sayısı. Etiketler çok uzunsa birden çok 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: numara
Varsayılan: auto
hAxis.minTextSpacing

Bitişik iki metin etiketi arasında izin verilen minimum yatay boşluk (piksel cinsinden). Etiketler arasında çok fazla boşluk bırakılmışsa veya çok uzunsa boşluk bu eşiğin altına düşebilir. Bu durumda, etiket temizleme önlemlerinden biri uygulanır (ör. etiketlerin kısaltılması veya bazılarının düşürülmesi).

Tür: numara
Varsayılan: hAxis.textStyle.fontSize değeri
hAxis.showTextEvery

Kaç tane yatay eksen etiketinin gösterileceği; 1, her etiketi gösterir, 2 diğer tüm etiketleri gösterir vb. anlamına gelir. Varsayılan değer, çakışmadan mümkün olduğunca çok sayıda etiket göstermeye çalışmaktır.

Tür: numara
Varsayılan: auto
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.

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

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.

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

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.

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

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

  • continuous ekseni için:

    Oluşturulacak maksimum yatay veri değeri.

  • discrete ekseni için:

    Kırpma penceresinin sona erdiği sıfır tabanlı satır dizini. Bu dizindeki ve daha yüksek veri noktaları kırpılır. vAxis.viewWindowMode.min ile birlikte, görüntülenecek öğe dizinlerini belirten yarı açık bir aralık [min, maks.] yarı açık bir aralığı tanımlar. Diğer bir deyişle, min <= index < max bu şekildeki her dizin görüntülenir.

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

Tür: numara
Varsayılan: auto
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, görüntülenecek öğe dizinlerini belirten yarı açık bir aralık [min, maks.] yarı açık bir aralığı tanımlar. Diğer bir deyişle, min <= index < max bu şekilde olan her dizin görüntülenir.

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
isStacked

Doğru değerine ayarlanırsa tüm serilerin öğelerini her bir alan değerinde gruplandırır. Not: Sütun, Alan ve SteppedArea grafiklerinde Google Grafikleri, seri öğelerinin yığınla daha iyi uyuşması için gösterge öğelerinin sırasını tersine çevirir (ör. seri 0, en alttaki açıklama öğesi olur). Bu Çubuk Grafikler için geçerli değildir .

isStacked seçeneği, her bir alan değerindeki öğe yığınlarının toplamı% 100'e eşit olacak şekilde yeniden ölçeklendirilen %100 yığınlamayı da destekler.

isStacked için seçenekler şunlardır:

  • false — öğeler gruplandırılmaz. Bu, varsayılan seçenektir.
  • true — Her bir alan değerindeki tüm serilerin öğelerini yığınlar.
  • 'percent': Her bir alan değerindeki tüm serilerin öğelerini yığınlar ve toplamları %100'e eşit olacak şekilde yeniden ölçeklendirir. Her öğenin değeri %100 olarak hesaplanır.
  • 'relative': Her bir alan değerindeki tüm serilerin öğelerini yığınlar ve bunların toplamı 1'e eşit olacak şekilde yeniden ölçeklendirir. Her öğenin değeri 1'den kesirli bir şekilde hesaplanır.
  • 'absolute' — isStacked: true ile aynı şekilde çalışır.

%100 yığınlamada her öğenin hesaplanan değeri, ipucunda gerçek değerinden sonra görünür.

Hedef eksen varsayılan olarak göreli 0-1 ölçeğine göre değerleri, 'relative' için 1'in kesirleri şeklinde ve 'percent' için% 0-100 olarak işaretler. (Not: 'percent' seçeneği kullanılırken eksen/işaret değerleri yüzde olarak gösterilir, ancak gerçek değerler göreli 0-1 ölçek değerleridir. Bunun nedeni, yüzde eksenindeki değer işaretlerinin, göreli 0-1 ölçek değerlerine "%#.##" biçiminde bir biçim uygulanmasının sonucu olmasıdır. isStacked: 'percent' kullanırken göreli 0-1 ölçek değerlerini kullanarak değer çizgilerini/kılavuz çizgilerini belirttiğinizden emin olun. Kılavuz çizgilerini/işaret değerlerini ve biçimlendirmeyi uygun hAxis/vAxis seçeneklerini kullanarak özelleştirebilirsiniz.

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

Tür: boole/dize
Varsayılan: false
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.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.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.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>}
yön

Grafiğin yönü. 'vertical' olarak ayarlandığında, (örneğin) sütun grafiğin çubuk grafik haline gelmesi ve alan grafiğinin yukarı değil de sağa doğru büyümesi için grafiğin eksenlerini döndürür:

Tür: dize
Varsayılan: 'automatic' (yatay)
reverseCategories

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

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

Tür: boole
Varsayılan: false
seri

Her biri grafikte karşılık gelen serinin biçimini açıklayan bir nesne dizisi. Bir serinin varsayılan değerlerini kullanmak için boş bir nesne {} belirtin. Seri veya değer belirtilmezse genel değer kullanılır. Her nesne aşağıdaki özellikleri destekler:

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

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

    Özelleştirilebilecek özelliklerin daha kapsamlı bir listesi için çeşitli annotations seçeneklerine bakın.

  • color - Bu seri için kullanılacak renk. Geçerli bir HTML renk dizesi belirtin.
  • targetAxisIndex - Bu serinin hangi eksene atanacağı; 0 varsayılan eksen, 1 ise ters eksendir. Varsayılan değer 0'dır. Farklı serilerin farklı eksenlerde oluşturulduğu bir grafiği tanımlamak için 1 olarak ayarlanır. Varsayılan eksene en az bir seri ayrılmalıdır. Farklı eksenler için farklı ölçekler tanımlayabilirsiniz.
  • 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.

Her biri seri için verilen sırayla geçerli olacak bir nesne dizisi belirtebilir veya her alt öğenin, hangi seriye geçerli olduğunu belirten sayısal bir anahtarın olduğu bir nesne belirtebilirsiniz. Örneğin, aşağıdaki iki beyan aynıdır ve ilk seri siyah ve açıklamada yok, dördüncüsü ise kırmızı ve açıklamada yok olarak tanımlanmıştır: 

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ş nesneleri olan nesne
Varsayılan: {}
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.ignoreBounds

true değerine ayarlanırsa ipucu çizimlerinin her tarafta grafik sınırlarının dışına çıkmasına izin verir.

Not: Bu yalnızca HTML ipuçları için geçerlidir. Bu özellik, SVG ipuçlarıyla etkinleştirilirse grafik sınırlarının dışındaki tüm taşmalar 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
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.showColorCode

True (doğru) ise ipucunda seri bilgilerinin yanında renkli kareler gösterin. focusTarget "category" olarak ayarlandığında varsayılan değer doğru, aksi takdirde varsayılan değer false'tur.

Tür: boole
Varsayılan: auto
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'
trend çizgileri

Trend çizgilerini destekleyen grafiklerde gösterir. Varsayılan olarak, doğrusal trend çizgileri kullanılır ancak bu, trendlines.n.type seçeneğiyle özelleştirilebilir.

Trend çizgileri seri bazında belirtilir. Dolayısıyla, seçenekleriniz çoğu zaman aşağıdaki gibi görünür: 

var options = {
  trendlines: {
    0: {
      type: 'linear',
      color: 'green',
      lineWidth: 3,
      opacity: 0.3,
      showR2: true,
      visibleInLegend: true
    }
  }
}
Tür: nesne
Varsayılan: null
trendlines.n.color

İngilizce renk adı veya onaltılık dize olarak ifade edilen trend çizgisinin rengi.

Tür: dize
Varsayılan: varsayılan seri rengi
trendlines.n.degree

type: 'polynomial' türündeki trend çizgileri için polinomun derecesi (ikinci dereceden için 2, kübik için 3 vb.). (Google Grafikler'in daha sonraki bir sürümünde varsayılan derece 3'ten 2'ye kadar değişebilir.)

Tür: numara
Varsayılan: 3
trendlines.n.labelInLegend

Ayarlanırsa trend çizgisi göstergede bu dize olarak görünür.

Tür: dize
Varsayılan: null
trendlines.n.lineWidth

Trend çizgisinin piksel cinsinden çizgi genişliği.

Tür: numara
Varsayılan: 2
trendlines.n.opacity

Trend çizgisinin 0,0 (şeffaf) ile 1,0 (opak) arasındaki şeffaflığı.

Tür: numara
Varsayılan: 1.0
trendlines.n.pointSize

Trend çizgileri , grafikte bir dizi nokta eklenerek oluşturulur. Nadiren ihtiyaç duyulan bu seçenek, noktaların boyutunu özelleştirmenizi sağlar. Genellikle trend çizgisinin lineWidth seçeneği tercih edilir. Ancak global pointSize seçeneğini kullanıyor ve trend çizgileriniz için farklı bir nokta boyutu istiyorsanız bu seçeneğe ihtiyacınız vardır.

Tür: numara
Varsayılan: 1
trendlines.n.pointsVisible

Trend çizgileri , grafikte bir dizi nokta eklenerek oluşturulur. Trend çizgisinin pointsVisible seçeneği, belirli bir trend çizgisi için noktaların görünür olup olmadığını belirler.

Tür: boole
Varsayılan: true
trendlines.n.showR2

Belirlenme katsayısının açıklamada veya trend çizgisi ipucunda gösterilip gösterilmeyeceğini belirler.

Tür: boole
Varsayılan: false
trendlines.n.type

Trend çizgilerinin 'linear' (varsayılan), 'exponential' veya 'polynomial' olup olmadığı.

Tür: dize
Varsayılan: doğrusal
trendlines.n.visibleInLegend

Trend çizgisi denkleminin açıklamada görünüp görünmediği. (Trend çizgisi ipucunda görünür.)

Tür: boole
Varsayılan: false
vAxes

Grafikte birden fazla dikey eksen varsa tek tek dikey eksenlerin ö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 tüm genel ayarları geçersiz kılar.

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

{
  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 nesnelerden oluşan bir koleksiyondur. Bu, yukarıda gösterilen biçimdir; dizi, eksen başına bir tane olmak üzere bir nesne dizisidir. Örneğin, aşağıdaki dizi stilindeki gösterim, yukarıda gösterilen vAxis nesnesiyle aynıdır: 

vAxes: [
  {}, // Nothing specified for axis 0
  {
    title:'Losses',
    textStyle: {color: 'red'} // Axis 1
  }
]
Tür: Alt nesneleri olan nesne veya nesne dizisi
Varsayılan: null
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.interval

Bitişik kılavuz çizgileri arasındaki boyut dizisi (piksel olarak değil, veri değerleri olarak). Bu seçenek şu anda yalnızca sayısal eksenler için kullanılabilir ancak yalnızca tarih ve saatler için kullanılan gridlines.units.<unit>.interval seçeneklerine benzer. Doğrusal ölçekler için varsayılan [1, 2, 2.5, 5], kılavuz çizgisi değerlerinin her birim (1), eşit birimler (2) veya 2,5 ya da 5'in katları olabileceği anlamına gelir. Bu değerlerin 10 ile çarpımının kuvveti de dikkate alınır (ör. [10, 20, 25, 50] ve [0,1, 0,2, 0,25, 0,5]). Günlük ölçekleri için varsayılan değer [1, 2, 5] şeklindedir.

Tür: 1 ile 10 arasında bir sayı (10 hariç).
Varsayılan: hesaplanmıştır
vAxis.gridlines.minSpacing

Altı eksen ana kılavuz çizgileri arasında piksel cinsinden minimum ekran alanı. Ana kılavuz çizgileri için varsayılan olarak doğrusal ölçekler için 40, logaritmik ölçekler için 20 kullanılır. minSpacing yerine count değerini belirtirseniz minSpacing sayıya göre hesaplanır. Buna karşılık, count yerine minSpacing özelliğini belirtirseniz sayı minSpacing kullanılarak hesaplanır. İkisini de belirtirseniz minSpacing geçersiz kılınır.

Tür: numara
Varsayılan: hesaplanmıştır
vAxis.gridlines.multiple

Tüm kılavuz çizgisi ve değer çizgisi değerleri, bu seçeneğin değerinin katı olmalıdır. Aralıkların aksine, çarpanın 10 katındaki kuvvetlerin dikkate alınmadığını unutmayın. Yani, gridlines.multiple = 1 belirterek değer çizgilerini tam sayı olmaya zorlayabilir veya gridlines.multiple = 1000 değerini belirterek değer işaretlerini 1000'in katları olmaya zorlayabilirsiniz.

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.interval

privateGridlines.interval seçeneği ana kılavuz çizgileri aralık seçeneğine benzer ancak seçilen aralık her zaman ana kılavuz çizgisi aralığının eşit böleni olur. Doğrusal ölçekler için varsayılan aralık [1, 1.5, 2, 2.5, 5], günlük ölçekleri içinse [1, 2, 5] şeklindedir.

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

Bitişik alt kılavuz çizgileri arasında ve alt ile ana kılavuz çizgileri arasındaki piksel cinsinden gerekli minimum alan. Varsayılan değer, doğrusal ölçekler için ana kılavuz çizgilerinin minSpacing değerinin 1/2'si ve logaritmik ölçekler için minSpacing değerinin 1/5'idir.

Tür: numara
Varsayılan:hesaplanan
vAxis.minorGridlines.multiple

Ana gridlines.multiple için aynı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.

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

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 varlıklar çubuklar, gösterge girişleri ve kategorilerdir. Çubuk, veri tablosundaki bir hücreye, bir sütuna açıklama girişine (satır dizini null) ve bir satıra (sütun dizini null) karşılık gelir. 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 varlıklar çubuklar, gösterge girişleri ve kategorilerdir. Çubuk, veri tablosundaki bir hücreye, bir sütuna açıklama girişine (satır dizini null) ve bir satıra (sütun dizini null) karşılık gelir. 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.

Ö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.

Ö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.