Görselleştirme yapılandırmasını tanımlama

Topluluk görselleştirmeleri için veri ve stil seçenekleri, config JSON'de tanımlanır. data yapılandırması, görselleştirmenin desteklediği boyut ve metriklerin sayısını belirler. style yapılandırması, özellik panelinde bulunan stil seçicileri tanımlar.

Veri yapılandırması

data yapılandırması, Looker Studio'nun özellik panelinde oluşturduğu DIMENSION ve METRIC öğelerini tanımlar. Her öğe, son kullanıcının görselleştirmeye girdi olarak sağladığı boyut ve öğe alanlarına karşılık gelir.

Örnek veri öğesi:

{
  "id": "twoDimensionsPlease",
  "label": "Dimension Element Heading",
  "type": "DIMENSION",
  "options": {
    "min": 2,
    "max": 2,
  }
}

Veri öğesinde tanımladığınız id, Looker Studio'nun yanıt verdiği bilgilere dahil edilir. label, kullanıcıların veri bölümünün üstünde gördüğü metni, type ise bunun bir boyut veya metrik olup olmadığını tanımlar. options nesnesi, bir kullanıcının veri öğesine ekleyebileceği minimum ve maksimum alan sayısını tanımlar.

Bir DIMENSION veri öğesinde, options nesnesi isteğe bağlı bir supportedTypes anahtarını destekler. Tanımlanırsa Looker Studio öğeye eklenebilecek boyut alanlarının türünü kısıtlar. supportedTypes değeri, "DEFAULT", "TIME" ve "GEO"nun herhangi bir kombinasyonunu içerebilen bir dizidir.

Veri bölümü, birden çok veri öğesini bir arada gruplandırır. Looker Studio, label öğesini birden fazla veri öğesi için başlık olarak oluşturur.

Örnek veri bölümü:

{
  "id": "dimensionSection1",
  "label": "Dimension Section Heading",
  "elements":[
    // array of data elements
  ]
}

Bu ekran görüntüsünde, Looker Studio'nun yukarıdaki veri bölümünü ve veri öğesini nasıl oluşturduğu gösterilmektedir:

Özellik panelindeki Veri Öğesi ekran görüntüsü

Stil yapılandırması

Stil yapılandırması, özellik panelinde oluşturulan stil seçicileri tanımlar.

Örnek stil öğesi:

{
  "id": "linkOpacity",
  "label": "Link opacity",
  "type": "OPACITY",
  "defaultValue": "0.2"
}

label, kullanıcıların ipucu olarak gördüğü metni, type ise Looker Studio'nun oluşturduğu stil seçici türünü tanımlar. İsteğe bağlı olarak defaultValue, her stil öğesi için varsayılan bir değer tanımlar.

Veri öğelerine benzer şekilde, stil öğeleri de başlıklar ve mantıksal gruplamalar sağlayan bölümlerin içinde tanımlanır. Kullanılabilir seçicilerin tam listesini görmek için yapılandırma referansına bakın.

Örnek bir stil bölümü:

{
  "id": "styleGroup1",
  "label": "Header for style group",
  "elements": [
    // insert Style Elements here
  ]
}

Aşağıdaki ekran görüntüsünde, opaklık seçicinin ve stil öğesindeki label değerine karşılık gelen "Bağlantı Opaklığı" ipucunun yer aldığı bir stil paneli örneği gösterilmektedir.

Stil seçicinin ekran görüntüsü

Etkileşim yapılandırması

interaction yapılandırması, bir topluluk görselleştirme için grafik etkileşimlerinin nasıl çalıştığını tanımlar. Bu işlem isteğe bağlıdır.

Örnek:

{
  "id": "onClick",
  "supportedActions": ["FILTER"]
}

Şu anda yalnızca FILTER desteklenmektedir. Etkileşimleri yapılandırırsanız özellik panelinde bir onay kutusu gösterilir.

Stil seçicinin ekran görüntüsü

Özellik yapılandırması

features yapılandırması, topluluk görselleştirmenizdeki çeşitli özellikleri açıp kapatabilir. Bu bölüm isteğe bağlıdır. Özelliklerin listesi yapılandırma referansında bulunabilir.

Örnek:

  "features": {
    "enableComparisonDateRange": true
  }

Örnek

Görselleştirme yapılandırmasının bir örneğini görmek için örnek yapılandırmaya bakın.

Sonraki adımlar

Yapılandırmanızı tanımladıktan sonra görselleştirmeyi yazın.