Bu sayfa, Cloud Translation API ile çevrilmiştir.

VegaGrafik

Genel bakış
Basit bir örnek
Yükleniyor
Veri Biçimi
Yapılandırma Seçenekleri
Yöntemler
Etkinlikler
Veri Politikası

Genel bakış

VegaChart, etkileşimli görselleştirme tasarımlarını oluşturmak, kaydetmek ve paylaşmak için bildirim temelli bir dil olan Vega Görselleştirme Dil Bilgisi ile oluşturulabilecek birçok olası görselleştirmeden biridir. Vega ile bir görselleştirmenin görsel görünümünü ve etkileşimli davranışını JSON biçiminde açıklayabilir, Tuval veya SVG kullanarak web tabanlı görünümler oluşturabilirsiniz.

Bir VegaChart çizerken, seçeneklere Vega görselleştirme dilbilgisinde grafiğin nasıl oluşturulacağıyla ilgili bir spesifikasyon eklemeniz gerekir. Bu tür spesifikasyonların birkaç örneğini aşağıda bulabilirsiniz. Ayrıca, VegaChart Örnekleri sayfasında daha birçok örnek bulabilirsiniz.

Not: Google Charts VegaChart, Vega JSON Spesifikasyonu ile belirtebileceğiniz herhangi bir Vega grafiğini ( Örnek Galeri'deki her şey dahil) çizebilse de Vega API'ye çağrı yapılmasını gerektiren ek özellikler henüz kullanıma sunulmamıştır.

Basit Bir Örnek: Çubuk Grafik

Burada, çubuk grafik çizen basit bir VegaChart örneği verilmiştir. (Orijinal örneği, ayrıntılı bir eğitimi ve Vega grafik düzenleyicideki çubuk grafiği inceleyin.)

Bu, Google Grafikler'de çubuk grafik oluşturmanın bir başka yolunu temsil etmekle birlikte, diğer Çubuk ve Sütun grafiklerin tüm özelliklerini bu VegaChart'ı temel alan yeni bir uygulamaya entegre etmeyi planlıyoruz.

Bu örnekte "data" seçeneğinin aşağıdaki öğeyle değiştirildiğini unutmayın. Bu seçenek, "table" adlı başka bir veri nesnesi için "source" olarak çizim çağrısının sağladığı "datatable" özelliğini ve Vega spesifikasyonunun geri kalanında "table" değerini kullanır.

  'data': [{'name': 'table', 'source': 'datatable'}],

google.charts.load('upcoming', {'packages': ['vegachart']}).then(drawChart);

function drawChart() {
        const dataTable = new google.visualization.DataTable();
        dataTable.addColumn({type: 'string', 'id': 'category'});
        dataTable.addColumn({type: 'number', 'id': 'amount'});
        dataTable.addRows([
          ['A', 28],
          ['B', 55],
          ['C', 43],
          ['D', 91],
          ['E', 81],
          ['F', 53],
          ['G', 19],
          ['H', 87],
        ]);

const options = {
          "vega": {
            "$schema": "https://vega.github.io/schema/vega/v4.json",
            "width": 500,
            "height": 200,
            "padding": 5,

'data': [{'name': 'table', 'source': 'datatable'}],

"signals": [
              {
                "name": "tooltip",
                "value": {},
                "on": [
                  {"events": "rect:mouseover", "update": "datum"},
                  {"events": "rect:mouseout",  "update": "{}"}
                ]
              }
            ],

"scales": [
              {
                "name": "xscale",
                "type": "band",
                "domain": {"data": "table", "field": "category"},
                "range": "width",
                "padding": 0.05,
                "round": true
              },
              {
                "name": "yscale",
                "domain": {"data": "table", "field": "amount"},
                "nice": true,
                "range": "height"
              }
            ],

"axes": [
              { "orient": "bottom", "scale": "xscale" },
              { "orient": "left", "scale": "yscale" }
            ],

"marks": [
              {
                "type": "rect",
                "from": {"data":"table"},
                "encode": {
                  "enter": {
                    "x": {"scale": "xscale", "field": "category"},
                    "width": {"scale": "xscale", "band": 1},
                    "y": {"scale": "yscale", "field": "amount"},
                    "y2": {"scale": "yscale", "value": 0}
                  },
                  "update": {
                    "fill": {"value": "steelblue"}
                  },
                  "hover": {
                    "fill": {"value": "red"}
                  }
                }
              },
              {
                "type": "text",
                "encode": {
                  "enter": {
                    "align": {"value": "center"},
                    "baseline": {"value": "bottom"},
                    "fill": {"value": "#333"}
                  },
                  "update": {
                    "x": {"scale": "xscale", "signal": "tooltip.category", "band": 0.5},
                    "y": {"scale": "yscale", "signal": "tooltip.amount", "offset": -2},
                    "text": {"signal": "tooltip.amount"},
                    "fillOpacity": [
                      {"test": "datum === tooltip", "value": 0},
                      {"value": 1}
                    ]
                  }
                }
              }
            ]
          }
        };

const chart = new google.visualization.VegaChart(document.getElementById('chart-div'));
        chart.draw(dataTable, options);
      }

<html>
  <head>
    <script src='https://www.gstatic.com/charts/loader.js'></script>
    <script>
      google.charts.load('upcoming', {'packages': ['vegachart']}).then(drawChart);

      function drawChart() {
        const dataTable = new google.visualization.DataTable();
        dataTable.addColumn({type: 'string', 'id': 'category'});
        dataTable.addColumn({type: 'number', 'id': 'amount'});
        dataTable.addRows([
          ['A', 28],
          ['B', 55],
          ['C', 43],
          ['D', 91],
          ['E', 81],
          ['F', 53],
          ['G', 19],
          ['H', 87],
        ]);

        const options = {
          "vega": {
            "$schema": "https://vega.github.io/schema/vega/v4.json",
            "width": 500,
            "height": 200,
            "padding": 5,

            'data': [{'name': 'table', 'source': 'datatable'}],

            "signals": [
              {
                "name": "tooltip",
                "value": {},
                "on": [
                  {"events": "rect:mouseover", "update": "datum"},
                  {"events": "rect:mouseout",  "update": "{}"}
                ]
              }
            ],

            "scales": [
              {
                "name": "xscale",
                "type": "band",
                "domain": {"data": "table", "field": "category"},
                "range": "width",
                "padding": 0.05,
                "round": true
              },
              {
                "name": "yscale",
                "domain": {"data": "table", "field": "amount"},
                "nice": true,
                "range": "height"
              }
            ],

            "axes": [
              { "orient": "bottom", "scale": "xscale" },
              { "orient": "left", "scale": "yscale" }
            ],

            "marks": [
              {
                "type": "rect",
                "from": {"data":"table"},
                "encode": {
                  "enter": {
                    "x": {"scale": "xscale", "field": "category"},
                    "width": {"scale": "xscale", "band": 1},
                    "y": {"scale": "yscale", "field": "amount"},
                    "y2": {"scale": "yscale", "value": 0}
                  },
                  "update": {
                    "fill": {"value": "steelblue"}
                  },
                  "hover": {
                    "fill": {"value": "red"}
                  }
                }
              },
              {
                "type": "text",
                "encode": {
                  "enter": {
                    "align": {"value": "center"},
                    "baseline": {"value": "bottom"},
                    "fill": {"value": "#333"}
                  },
                  "update": {
                    "x": {"scale": "xscale", "signal": "tooltip.category", "band": 0.5},
                    "y": {"scale": "yscale", "signal": "tooltip.amount", "offset": -2},
                    "text": {"signal": "tooltip.amount"},
                    "fillOpacity": [
                      {"test": "datum === tooltip", "value": 0},
                      {"value": 1}
                    ]
                  }
                }
              }
            ]
          }
        };

        const chart = new google.visualization.VegaChart(document.getElementById('chart-div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>

  <body>
    <div id="chart-div" style="width: 700px; height: 250px;"></div>
  </body>

</html>

Yükleniyor

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

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

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

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

Veri Biçimi

Veriler bir VegaChart'a, diğer Google Grafiklerine çok benzer bir şekilde, DataTable (veya DataView) kullanılarak iletilebilir. En önemli fark, VegaChart'ın nasıl kullanılacağını belirlemek için sütunların sırasına dayanması yerine, her bir sütunun kimliğinin, belirttiğiniz Vega görselleştirmesi için beklenenle aynı olmasıdır. Örneğin, aşağıdaki DataTable, 'category' ve 'amount' kimliklerine sahip sütunlarla oluşturulmuştur ve bu sütunlara referans vermek için "vega" seçeneğinde aynı kimlikler kullanılmıştır.

DataTable ile

        const dataTable = new google.visualization.DataTable();
        dataTable.addColumn({type: 'string', 'id': 'category'});
        dataTable.addColumn({type: 'number', 'id': 'amount'});
        dataTable.addRows([
          ['A', 28],
          ['B', 55],
          ['C', 43],
        ]);

        const options = {
          'vega': {
            ...
            // Here we create the Vega data object named 'datatable',
            // which will be passed in via the draw() call with a DataTable.
            'data': {'name': 'datatable'},

            'scales': [
              {
                'name': 'yscale',
                // Here is an example of how to use the 'amount' field from 'datatable'.
                'domain': {'data': 'datatable', 'field': 'amount'},
              }
            ]
          }
        };

        const chart = new google.visualization.VegaChart(
          document.getElementById('chart-div'));
        chart.draw(dataTable, options);

Vega satır içi verileriyle

        // A DataTable is required, but it may be empty.
        const dataTable = new google.visualization.DataTable();
        const options = {
          'vega': {
            // Here the data is specified inline in the Vega specification.
            "data": [
              {
               "name": "table",
                "values": [
                  {"category": "A", "amount": 28},
                  {"category": "B", "amount": 55},
                  {"category": "C", "amount": 43},
                ]
              }
            ],

            'scales': [
              {
                'name': 'yscale',
                // Here is how Vega normally uses the 'amount' field from 'table'.
                "domain": {"data": "table", "field": "category"},
              }
            ]
          }
        };

        const chart = new google.visualization.VegaChart(
          document.getElementById('chart-div'));
        chart.draw(dataTable, options);

Ancak, bu şekilde VegaChart'a bu tür yalnızca bir DataTable iletilebilir. Bazı Vega grafiklerinde ise birden fazla veri tablosu gerekir. Bu sınırlama, Google Charts'ın gelecekteki bir sürümünde ele alınacaktır.

Bu arada, kullanmanız gereken ek verileri 'vega' 'data' seçeneğinde satır içine alarak veya bir URL'den yükleyerek belirtebilirsiniz. Bu ikisine ilişkin örnekleri aşağıda bulabilirsiniz.

Yapılandırma Seçenekleri

Ad
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.bottom	Grafiğin alt kenarlıktan ne kadar uzakta çizileceği. Tür: sayı veya dize Varsayılan: auto
chartArea.left	Grafiğin sol kenarlıktan ne kadar uzağa çizileceği. Tür: sayı veya dize Varsayılan: auto
chartArea.right	Grafiğin sağ 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
yükseklik	Grafiğin piksel cinsinden yüksekliği. Tür: numara Varsayılan: kapsayıcı öğenin yüksekliği
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. 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. 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.