Bunu nasıl yaptım: Düzen kapsayıcısı ile dinamik analiz

Bu örnek, düzen kapsayıcısı ile dinamik, etkileşimli sayfa içeriği oluşturmayı nasıl yapabileceğinizi gösterir.Düzen kapsayıcısı, kılavuz çizgisiz tasarımı ve yığın görselleştirmeleri destekleyerek analiz içeriğinizin düzenlenmesi üzerinde kapsamlı kontrol sağlar. Ek olarak, diğer kapsayıcı nesnelerde olduğu gibi, değişken ve seçim durumları gibi çeşitli koşullara bağlı olarak farklı bilgileri dinamik olarak sunabilirsiniz.

Bu örnek, birden çok grafikten gelen bilgileri tek nesne olarak sunmak için bir düzen kapsayıcısı oluşturabileceğinizi gösterir. Bazı genel tasarım yaklaşımları şunlardır:

Benzer nesneleri simetrik bir şekilde düzenlemek, farklı veri bölümlerini ayırt etmek için stil kullanmak.
Düzen kapsayıcısının içindeki tek tek nesnelerden kenarlıkları kaldırmak ve ardından işlem bittiğinde tüm nesnenin etrafına bir kenarlık eklemek.
Kullanıcı etkileşimine bağlı olarak farklı nesneleri veya verileri koşullu olarak görüntülemek; bu örnekte, kullanıcının ayrıntıları gösterebileceği veya gizleyebileceği bir sütun grafik.
Birden çok farklı nesnenin yan yana yerleştirildiği bileşik öğeler oluşturmak; bu örnekte, açma/kapama anahtarını taklit eden etkileşimli bir düğme.
Kullanıcıların daha yakından incelemeleri gerektiğinde verileri seçmeleri ve filtrelemeleri için birden fazla yol sunma.

Örnek için bitmiş düzen kapsayıcısı — Nihai sonuç

Hazırlıklar

Yeni bir uygulama oluşturun ve Örnek komut dosyası öğesini Veri yükleme düzenleyicisi içindeki yeni bir bölüme yapıştırın. Ardından verileri yükleyin.

Verileri yükledikten sonra sayfa görünümüne geçin.

Örnek komut dosyası

SET DateFormat='M/D/YYYY';

Sales:

Load 

date(Now()-Offset,'MM/DD/YYYY') as [Order Date],

* Inline [

Order ID,Offset,Product Type,Shipment Status,Fulfillment Center,Sales,Late Status,Days Late
1,30,Electronics,Delivered,10036,9950,Not Late,
2,30,Office Supplies,Delivered,10036,4412,Not Late,
3,30,Office Supplies,Delivered,10038,7480,Late,3
4,30,Home Improvement,Delivered,10035,665,Late,4
5,30,Home Improvement,Delivered,10038,594,Not Late,
6,30,Home Improvement,Stalled,10038,8267,Not Late,
7,30,Clothing,Delivered,10035,1014,Not Late,
8,30,Cleaning Products,Delivered,10036,6999,Late,1
9,30,Electronics,Delivered,10036,733,Not Late,
10,29,Office Supplies,Delivered,10036,3487,Not Late,
11,29,Office Supplies,Delivered,10035,7343,Not Late,
12,29,Office Supplies,Delivered,10036,9239,Late,14
13,27,Cleaning Products,Delivered,10037,1463,Not Late,
14,27,Cleaning Products,Stalled,10035,4688,Not Late,
15,27,Home Improvement,Delivered,10038,5539,Late,2
16,27,Clothing,Delivered,10035,8388,Not Late,
17,27,Office Supplies,Delivered,10035,7560,Not Late,
18,27,Office Supplies,Delivered,10035,5738,Not Late,
19,27,Office Supplies,Delivered,10035,5469,Not Late,
20,26,Home Improvement,Delivered,10037,1435,Not Late,
21,26,Office Supplies,Delivered,10036,5962,Late,1
22,26,Clothing,Delivered,10035,4020,Late,7
23,26,Electronics,Delivered,10036,3888,Late,5
24,25,Office Supplies,Delivered,10037,6496,Not Late,
25,25,Clothing,Delivered,10038,4215,Late,11
26,25,Home Improvement,Delivered,10036,1801,Not Late,
27,25,Grocery,Delivered,10036,6471,Not Late,
28,24,Home Improvement,In Transit,10036,4578,Not Late,
29,24,Office Supplies,Cancelled,10037,3493,Not Late,
30,24,Office Supplies,Cancelled,10035,6572,Not Late,
31,24,Electronics,In Transit,10037,6691,Not Late,
32,24,Office Supplies,In Transit,10038,2721,Late,9
33,24,Grocery,In Transit,10035,8300,Not Late,
34,23,Grocery,In Transit,10035,840,Not Late,
35,23,Office Supplies,In Transit,10036,8972,Not Late,
36,23,Cleaning Products,Stalled,10036,9474,Not Late,
37,23,Home Improvement,In Transit,10038,1935,Not Late,
38,23,Office Supplies,In Transit,10036,1748,Not Late,
39,23,Seasonal,In Transit,10037,1948,Not Late,
40,22,Office Supplies,In Transit,10035,3121,Not Late,
41,22,Electronics,In Transit,10036,7377,Not Late,
42,22,Cleaning Products,In Transit,10037,1492,Not Late,
43,22,Office Supplies,Stalled,10037,7801,Late,6
44,22,Office Supplies,In Transit,10035,4663,Not Late,
45,22,Grocery,In Transit,10035,4649,Not Late,
46,21,Seasonal,In Transit,10038,2612,Not Late,
47,20,Clothing,In Transit,10036,8880,Late,4
48,20,Office Supplies,In Transit,10036,1391,Late,8
49,20,Cleaning Products,Cancelled,10037,1307,Not Late,
50,20,Home Improvement,In Transit,10037,6424,Not Late,
51,20,Grocery,In Transit,10035,5051,Not Late,
52,20,Cleaning Products,In Transit,10035,1286,Not Late,
53,19,Cleaning Products,In Transit,10038,8719,Not Late,
54,19,Office Supplies,In Transit,10037,8576,Not Late,
55,19,Seasonal,In Transit,10038,2866,Not Late,
56,19,Electronics,Stalled,10035,5186,Late,3
57,19,Clothing,In Transit,10038,4079,Not Late,
58,19,Office Supplies,In Transit,10038,706,Not Late,
59,19,Seasonal,In Transit,10036,6111,Not Late,
60,19,Clothing,In Transit,10036,5677,Not Late,
61,19,Home Improvement,In Transit,10037,3993,Not Late,
62,19,Office Supplies,In Transit,10037,1625,Not Late,
63,19,Seasonal,In Transit,10035,5805,Not Late,
64,19,Home Improvement,In Transit,10035,4453,Not Late,
65,19,Office Supplies,In Transit,10038,2252,Not Late,
66,18,Electronics,In Transit,10038,8362,Not Late,
67,18,Clothing,In Transit,10037,4182,Not Late,
68,18,Cleaning Products,In Transit,10038,9044,Not Late,
69,18,Clothing,In Transit,10035,6531,Not Late,
70,18,Office Supplies,In Transit,10035,8408,Not Late,
71,17,Home Improvement,Stalled,10038,9629,Not Late,
72,17,Seasonal,Preparation,10035,2128,Not Late,
73,17,Home Improvement,Cancelled,10038,1024,Not Late,
74,17,Office Supplies,Preparation,10037,9684,Late,2
75,17,Electronics,Preparation,10036,6753,Late,2
76,16,Clothing,Preparation,10036,3192,Not Late,
77,16,Office Supplies,Preparation,10038,3954,Not Late,
78,16,Office Supplies,Preparation,10035,8377,Not Late,
79,16,Office Supplies,Preparation,10038,2334,Not Late,
80,15,Grocery,Preparation,10037,7178,Not Late,
81,15,Office Supplies,Preparation,10037,1188,Not Late,
82,15,Electronics,Preparation,10035,4908,Not Late,
83,15,Electronics,Preparation,10035,3552,Not Late,
84,15,Clothing,Preparation,10037,875,Not Late,
85,14,Office Supplies,Preparation,10038,7886,Late,4
86,14,Home Improvement,Cancelled,10036,2358,Late,1
87,14,Clothing,Preparation,10037,8368,Not Late,
88,14,Grocery,Preparation,10037,142,Not Late,
89,14,Office Supplies,Preparation,10037,5537,Not Late,
90,14,Home Improvement,Preparation,10035,3231,Not Late,
91,14,Clothing,Preparation,10036,2283,Not Late,
92,14,Office Supplies,Preparation,10038,5952,Not Late,
93,13,Office Supplies,Preparation,10038,5513,Not Late,
94,13,Home Improvement,Preparation,10036,5871,Not Late,
95,13,Grocery,Preparation,10038,4425,Not Late,
96,13,Clothing,Preparation,10037,500,Late,1
97,13,Electronics,Preparation,10037,9792,Not Late,
98,13,Seasonal,Preparation,10035,4576,Not Late,
99,13,Office Supplies,Preparation,10038,228,Not Late,
100,13,Cleaning Products,Preparation,10037,3086,Late,1
101,13,Office Supplies,Preparation,10038,2329,Not Late,
102,12,Home Improvement,Preparation,10036,8862,Not Late,
103,12,Office Supplies,Preparation,10037,3991,Not Late,
104,12,Office Supplies,Preparation,10037,5435,Not Late,
105,12,Grocery,Preparation,10038,2476,Not Late,
106,12,Clothing,Preparation,10037,8362,Not Late,
107,12,Seasonal,Preparation,10035,1496,Not Late,
108,12,Electronics,Preparation,10038,3210,Not Late,
109,11,Clothing,Preparation,10038,7692,Not Late,
110,11,Cleaning Products,Preparation,10037,1585,Not Late,
111,11,Home Improvement,Cancelled,10037,1874,Not Late,
112,11,Office Supplies,Preparation,10037,869,Not Late,
113,11,Office Supplies,Preparation,10036,8578,Not Late,
114,10,Office Supplies,Preparation,10036,684,Not Late,
115,10,Electronics,Preparation,10036,9889,Not Late,
116,10,Office Supplies,Preparation,10036,4256,Not Late,
117,8,Seasonal,Preparation,10038,9288,Late,7
118,8,Office Supplies,Cancelled,10038,1534,Not Late,
119,8,Seasonal,Preparation,10038,7496,Not Late,
120,8,Electronics,Preparation,10036,8454,Late,3
121,8,Office Supplies,Stalled,10038,1063,Late,
122,8,Office Supplies,Preparation,10037,5958,Not Late,
123,8,Seasonal,Preparation,10036,686,Not Late,
124,8,Grocery,Preparation,10036,1799,Not Late,
125,8,Clothing,Stalled,10036,8485,Not Late,
126,7,Office Supplies,Preparation,10036,6451,Not Late,
127,7,Office Supplies,Pending,10036,1212,Not Late,
128,7,Electronics,Pending,10037,9037,Not Late,
129,7,Electronics,Pending,10037,6522,Late,20
130,7,Electronics,Pending,10038,8865,Late,4
131,7,Clothing,Cancelled,10036,7929,Not Late,
132,6,Seasonal,Pending,10038,9082,Not Late,
133,6,Office Supplies,Pending,10037,6563,Not Late,
134,6,Seasonal,Pending,10038,3513,Not Late,
135,5,Office Supplies,Pending,10035,2340,Not Late,
136,5,Cleaning Products,Pending,10035,590,Not Late,
137,5,Office Supplies,Pending,10035,542,Not Late,
138,5,Cleaning Products,Pending,10035,4809,Not Late,
139,5,Grocery,Cancelled,10035,1743,Not Late,
140,5,Office Supplies,Pending,10035,8312,Not Late,
141,4,Clothing,Pending,10035,5895,Not Late,
142,4,Clothing,Pending,10037,4882,Not Late,
143,4,Clothing,Pending,10037,9106,Not Late,
144,3,Office Supplies,Pending,10036,7422,Late,1
145,3,Clothing,Pending,10038,2686,Not Late,
146,3,Office Supplies,Pending,10037,698,Late,3
147,3,Office Supplies,Pending,10035,9514,Not Late,
148,2,Home Improvement,Pending,10037,6206,Late,2
149,2,Office Supplies,Pending,10035,9158,Not Late,
150,1,Electronics,Cancelled,10036,3204,Not Late,

];

drop field Offset;

Bölüm 1: Değişkeni oluşturma

İlk olarak, değişkeni oluşturun. Bu değişken, daha sonra eklenecek koşulların konusudur. Değişkenin değerleri, analiz sırasında düğme nesneleriyle etkileşimler yoluyla değiştirilecektir.

Aşağıdaki değişkeni oluşturun. Tanım öğesini =false() olarak ayarlayın.

vViewChartValues

Değişken oluşturma

Bölüm 2: Düzen kapsayıcısını oluşturun

Aşağıdakileri yapın:

Varlık panelinde, Grafikler'i açın ve Pano nesneleri altında, bir Düzen kapsayıcısı'nı sayfaya sürükleyin.
Kapsayıcıyı sayfa kılavuz çizgisinde 17'ye 10 kare olacak şekilde yeniden boyutlandırın.

Bölüm 3: Düzen kapsayıcısına görselleştirmeler ekleme

Ardından, düzen kapsayıcısına görselleştirmeler ekleyin.

Aşağıdakileri yapın:

Düzen kapsayıcısını seçin.
Özellikler panelinde, İçerik > Grafikler altında, Ekle'ye tıklayın. Düğme'yi seçin.
Öğeyi genişletin. Etiket değerini Button_NotLateTitle olarak ayarlayın.
Boyut altında, aşağıdakileri ayarlayın:
- Genişlik (%): 48
- Yükseklik (%): 9
Konum altında aşağıdakileri ayarlayın:
- X ekseni (%): 1
- Y ekseni (%): 1
Özellikleri düzenle'ye tıklayın.
Genişlet Eylemler ve navigasyon.
İşlem ekle'ye tıklayın.
Eylem için Bir alandaki değerleri seç öğesini seçin.
Alan için Late Status öğesini seçin.
Değer için öğesine tıklayın.
Aşağıdakileri ekleyin:
```
='Not Late'
```
Uygula'ya tıklayın.
Görünüş > Genel öğesini genişletin.
Not Late öğesini Etiket olarak ayarlayın.
Görünüm > Sunum bölümünü genişletin.
Stil'e tıklayın.
Kenarlık altında, Dış Çizgi'yi 0 piksel olarak ayarlayın.
Grafik sekmesine geçiş yapın. Aşağıdaki özellikleri ayarlayın:
- Düzen davranışı: Uyumlu
- Yazı tipi boyutu: Maksimum değer
- Yazı tipi rengi > Renk: #006580
- Arka plan seçenekleri > Kullanılan renk: #ffffff
Stil panelinden çıkmak için öğesine tıklayın.
Düzen kapsayıcısına dönmek için paneldeki üst sütuna tıklayın.

Aşağıdakileri yapın:

İçerik > Grafikler altında, Ekle öğesine tıklayın. Düğme'yi seçin.
Öğeyi genişletin. Etiket değerini Button_LateTitle olarak ayarlayın.
Boyut altında, aşağıdakileri ayarlayın:
- Genişlik (%): 48
- Yükseklik (%): 9
Konum altında, aşağıdakileri ayarlayın:
- X ekseni (%): 51
- Y ekseni (%): 1
Özellikleri düzenle'ye tıklayın.
Genişlet Eylemler ve navigasyon.
İşlem ekle'ye tıklayın.
Eylem için Bir alandaki değerleri seç öğesini seçin.
Alan için Late Status öğesini seçin.
Değer için öğesine tıklayın.
Aşağıdakileri ekleyin:
```
='Late'
```
Uygula'ya tıklayın.
Görünüş > Genel öğesini genişletin.
Late öğesini Etiket olarak ayarlayın.
Görünüm > Sunum bölümünü genişletin.
Stil'e tıklayın.
Kenarlık altında, Dış Çizgi'yi 0 piksel olarak ayarlayın.
Grafik sekmesine geçiş yapın. Aşağıdaki özellikleri ayarlayın:
- Düzen davranışı: Uyumlu
- Yazı tipi boyutu: Maksimum değer
- Yazı tipi rengi > Renk: #87205d
- Arka plan seçenekleri > Kullanılan renk: #ffffff
Stil panelinden çıkmak için öğesine tıklayın.
Düzen kapsayıcısına dönmek için paneldeki üst sütuna tıklayın.

Aşağıdakileri yapın:

İçerik > Grafikler altında, Ekle'ye tıklayın. Gösterge'yi seçin.
Öğeyi genişlet. Etiket değerini Gauge_NotLate olarak ayarlayın.
Boyut altında, aşağıdakileri ayarlayın:
- Genişlik (%): 48
- Yükseklik (%): 15
Konum altında, aşağıdakileri ayarlayın:
- X ekseni (%): 1
- Y ekseni (%): 11
Özellikleri düzenle'ye tıklayın.
Hesaplama olarak Sum(Sales) öğesini ekleyin.
Özellikler panelinde, Veri > Filtreler altında, Ekle'ye tıklayın.
Late Status öğesini seçin. Filtreyi genişletin.
Varsayılan Değerler filtre türünü koruyun ve Not Late onay kutusunu işaretleyin. Bu, görselleştirme verilerini yalnızca Late Status değeri Not Late içeren kayıtlara göre filtreler.
Görünüş > Genel öğesini genişletin.
Başlıkları göster'i Kapalı olarak ayarlayın.
Görünüm > Sunum bölümünü genişletin.
Aralık sınırları altında, Maks değerini aşağıdaki değere ayarlayın:
```
=Sum({1} Sales)
```
Grafik yapılandırmasını Radyal'dan Çubuk'a değiştirin.
Yönlendirme'yi Otomatik'ten Özel'e değiştirin ve Yatay'ın seçili olduğundan emin olun.
Kitaplığı kullan seçeneğini kapatın ve Renk'i #006580 olarak ayarlayın.
Stil'e tıklayın.
Kenarlık altında, Dış Çizgi'yi 0 piksel olarak ayarlayın.
Grafik sekmesine geçiş yapın. Değer etiketi için rengi #ffffff olarak ayarlayın.
Stil panelinden çıkmak için 'e tıklayın.
Görünüş > Hesaplama ekseni: Sum(Sales)'ni genişletin.
Etiketler ve başlık değerini Yok olarak ayarlayın.
Düzen kapsayıcısına dönmek için paneldeki üst sütuna tıklayın.

Aşağıdakileri yapın:

İçerik > Grafikler altında, Ekle'ye tıklayın. Gösterge'yi seçin.
Öğeyi genişlet. Etiket değerini Gauge_Late olarak ayarlayın.
Boyut altında, aşağıdakileri ayarlayın:
- Genişlik (%): 48
- Yükseklik (%): 15
Konum altında, aşağıdakileri ayarlayın:
- X ekseni (%): 51
- Y ekseni (%): 11
Özellikleri düzenle'ye tıklayın.
Hesaplama olarak Sum(Sales) öğesini ekleyin.
Özellikler panelinde, Veri > Filtreler altında, Ekle'ye tıklayın.
Late Status öğesini seçin. Filtreyi genişletin.
Varsayılan Değerler filtre türünü koruyun ve Late onay kutusunu işaretleyin. Bu, görselleştirme verilerini yalnızca Late Status değeri Late içeren kayıtlara göre filtreler.
Görünüş > Genel öğesini genişletin.
Başlıkları göster'i Kapalı olarak ayarlayın.
Görünüm > Sunum bölümünü genişletin.
Aralık sınırları altında, Maks değerini aşağıdaki değere ayarlayın:
```
=Sum({1} Sales)
```
Grafik yapılandırmasını Radyal'dan Çubuk'a değiştirin.
Yön'ü Otomatik'ten Özel'e değiştirin ve Yatay'ın seçili olduğundan emin olun.
Kitaplığı kullan'ı kapatın ve Renk'i #87205d olarak ayarlayın.
Stil'e tıklayın.
Kenarlık altında, Dış Çizgi'yi 0 piksel olarak ayarlayın.
Grafik sekmesine geçiş yapın. Değer etiketi için rengi #ffffff olarak ayarlayın.
Stil panelinden çıkmak için 'e tıklayın.
Görünüş > Hesaplama ekseni: Sum(Sales)'ni genişletin.
Etiketler ve başlık değerini Yok olarak ayarlayın.
Düzen kapsayıcısına geri dönmek için paneldeki üst sütuna tıklayın.

Aşağıdakileri yapın:

İçerik > Grafikler altında, Ekle'ye tıklayın. KPI'ı seçin.
Öğeyi genişletin. Etiket değerini KPI_NotLate olarak ayarlayın.
Boyut altında, aşağıdakileri ayarlayın:
- Genişlik (%): 48
- Yükseklik (%): 9
Konum altında aşağıdakileri ayarlayın:
- X ekseni (%): 1
- Y ekseni (%): 27
Özellikleri düzenle'ye tıklayın.
Hesaplama olarak Sum(Sales) öğesini ekleyin.
Ölçüme ilişkin özelliklerde, Sayı biçimlendirme ayarını Para Birimi olarak belirleyin.
Biçim desenini şuna değiştirin:
```
$ #,##0.00;-$ #,##0.00
```
Özellikler panelinde, Veri > Filtreler altında, Ekle'ye tıklayın.
Late Status öğesini seçin. Filtreyi genişletin.
Varsayılan Değerler filtre türünü koruyun ve Not Late onay kutusunu işaretleyin. Bu, görselleştirme verilerini yalnızca Late Status değeri Not Late içeren kayıtlara göre filtreler.
Görünüş > Genel öğesini genişletin.
Başlıkları göster'i Kapalı olarak ayarlayın.
Görünüm > Sunum bölümünü genişletin.
Stil'e tıklayın.
Kenarlık altında, Dış Çizgi'yi 0 piksel olarak ayarlayın.
Grafik sekmesine geçiş yapın. Aşağıdaki özellikleri ayarlayın:
- Düzen davranışı: Uyumlu
- Yazı tipi boyutu: Maksimum değer
- İlk KPI başlığını göster seçeneğini kapatın.
Stil panelinden çıkmak için öğesine tıklayın.
Görünüş > Renk öğesini genişletin.
Kitaplık renkleri geçişli düğmesini kapatın. Renk değerini #006580 yapın.
Düzen kapsayıcısına dönmek için paneldeki üst sütuna tıklayın.

Aşağıdakileri yapın:

İçerik > Grafikler altında, Ekle'ye tıklayın. KPI'ı seçin.
Öğeyi genişletin. Etiket değerini KPI_Late olarak ayarlayın.
Boyut altında, aşağıdakileri ayarlayın:
- Genişlik (%): 48
- Yükseklik (%): 9
Konum altında, aşağıdakileri ayarlayın:
- X ekseni (%): 51
- Y ekseni (%): 27
Özellikleri düzenle'ye tıklayın.
Hesaplama olarak Sum(Sales) öğesini ekleyin.
Ölçüme ilişkin özelliklerde, Sayı biçimlendirme ayarını Para Birimi olarak belirleyin.
Biçim desenini şuna değiştirin:
```
$ #,##0.00;-$ #,##0.00
```
Özellikler panelinde, Veri > Filtreler altında, Ekle'ye tıklayın.
Late Status öğesini seçin. Filtreyi genişletin.
Varsayılan Değerler filtre türünü koruyun ve Late onay kutusunu işaretleyin. Bu, görselleştirme verilerini yalnızca Late Status değeri Late içeren kayıtlara göre filtreler.
Görünüş > Genel öğesini genişletin.
Başlıkları göster'i Kapalı olarak ayarlayın.
Görünüm > Sunum bölümünü genişletin.
Stil'e tıklayın.
Kenarlık altında, Dış Çizgi'yi 0 piksel olarak ayarlayın.
Grafik sekmesine geçiş yapın. Aşağıdaki özellikleri ayarlayın:
- Düzen davranışı: Uyumlu
- Yazı tipi boyutu: Maksimum değer
- İlk KPI başlığını göster seçeneğini kapatın.
Stil panelinden çıkmak için öğesine tıklayın.
Görünüş > Renk öğesini genişletin.
Kitaplık renkleri seçeneğini kapatın. Rengi #87205d olarak ayarlayın.
Paneldeki üst sütuna tıklayarak düzen kapsayıcısına geri dönün.

Aşağıdakileri yapın:

İçerik > Grafikler altında, Ekle'ye tıklayın. Sütun grafiği seçin.
Öğeyi genişletin. Etiket'i BarChart_Simple olarak ayarlayın.
Gösterim koşulu için 'e tıklayın.
Aşağıdakileri ekleyin:
```
=vViewChartValues=false()
```
Uygula'ya tıklayın.
Boyut altında aşağıdakileri ayarlayın:
- Genişlik (%): 81
- Yükseklik (%): 62
Konum altında, aşağıdakileri ayarlayın:
- X ekseni (%): 1
- Y ekseni (%): 37
Özellikleri düzenle'ye tıklayın.
Boyut olarak Product Type öğesini ekleyin.
Başka bir boyut ekle: Late Status.

Product Type şimdi Grup olarak ve Late Status Çubuklar olarak listelenmelidir.
Hesaplama olarak Sum(Sales) öğesini ekleyin.
Ölçüme ilişkin özelliklerde, Sayı biçimlendirme ayarını Para Birimi olarak belirleyin.
Biçim deseni öğesini şuna değiştirin:
```
$ #,##0.00;-$ #,##0.00
```
Görünüş > Genel öğesini genişletin.
Başlıkları göster'i Kapalı olarak ayarlayın.
Görünüm > Sunum bölümünü genişletin.
Gruplandırılmış sunumdan Yığılmış sunuma geçin.
Kılavuz çizgisi aralığı'nı Özel olarak ayarlayın. Açılır menüden Çizgi yok seçeneğini belirleyin.
Stil'e tıklayın.
Kenarlık altında, Dış Çizgi'yi 0 piksel olarak ayarlayın.
Grafik sekmesine geçiş yapın. Aşağıdaki özellikleri ayarlayın:
- Eksen etiketi yazı tipi boyutu: 16 piksel
Stil panelinden çıkmak için öğesine tıklayın.
Genişlet Görünüm > Renkler ve gösterge.
Renkler'i Özel > İfadeye göre olarak ayarlayın. Aşağıdaki ifadeyi kullanın:
```
=if([Late Status]='Not Late','#006580', if([Late Status]='Late','#87205d'))
```
Gösterge göster seçeneğini Kapalı olarak ayarlayın.
Genişlet Görünüm > X ekseni: Product Type, Late Status.
Etiketler ve başlık'ı Yalnızca etiketler olarak ayarlayın.
Görünüş > Y ekseni: Sum(Sales) öğesini genişletin.
Etiketler ve başlık'ı Yalnızca etiketler olarak ayarlayın.
Düzen kapsayıcısına geri dönmek için paneldeki üst sütuna tıklayın.

Aşağıdakileri yapın:

İçerik > Grafikler altında, BarChart_Simple öğesine sağ tıklayın ve Çoğalt'a tıklayın.
Öğeyi genişlet. Etiket'i BarChart_Detailed olarak ayarlayın.
Gösterim koşulu için 'e tıklayın.
Aşağıdakileri ekleyin:
```
=vViewChartValues=true()
```
Uygula'ya tıklayın.
Özellikleri düzenle'ye tıklayın.
Görünüm > Sunum bölümünü genişletin.
Değer etiketlerini açın.
Segment etiketlerini açın ve Toplam etiketlerinin açık olduğundan emin olun.
Stil'e tıklayın.
Grafik sekmesine geçiş yapın. Aşağıdaki özellikleri ayarlayın:
- Eksen etiketi yazı tipi boyutu: 16 px
- Değer etiketleri yazı tipi boyutu: 14 px
öğesine tıklayarak stil panelinden çıkın.
Görünüm > Renkler ve gösterge öğesini genişletin.
Görünüm > X ekseni: Product Type, Late Status öğesini genişletin.
Etiketler ve başlık'ı Yalnızca etiketler olarak ayarlayın.
Görünüş > Y ekseni: Sum(Sales) öğesini genişletin.
Etiketler ve başlık'ı Yalnızca etiketler olarak ayarlayın.
Düzen kapsayıcısına dönmek için paneldeki üst sütuna tıklayın.

Düzen kapsayıcısında bir bileşik anahtar düğmesi oluşturmak için kullanılacak üç ana görselleştirme oluşturun. Bu geçiş anahtarı, kullanıcıların sütun grafikteki değer etiketlerini açıp kapatmasına olanak tanır.

Öğe 1: Geçiş anahtarı tabanı

Aşağıdakileri yapın:

İçerik > Grafikler altında, Ekle'ye tıklayın. Düğme'yi seçin.
Öğeyi genişletin. Etiket değerini ToggleSwitch_Base olarak ayarlayın.
Boyut altında, aşağıdakileri ayarlayın:
- Genişlik (%): 16
- Yükseklik (%): 7
Konum altında aşağıdakileri ayarlayın:
- X ekseni (%): 83
- Y ekseni (%): 90
Özellikleri düzenle'ye tıklayın.
Genişlet Eylemler ve navigasyon.
İşlem ekle'ye tıklayın.
Eylem için Değişken değerini ayarla seçin.
Değişken için vViewChartValues seçin.
Değer için tıklayın.

Şu ifadeyi ekleyin:

=if(vViewChartValues=false(),true(),if(vViewChartValues=true(),false()))

Uygula'ya tıklayın.
Görünüş > Genel öğesini genişletin.
Show Values öğesini Etiket olarak ayarlayın.
Görünüm > Sunum bölümünü genişletin.
Stil'e tıklayın.
Kenarlık altında, Dış Çizgi'yi 2 piksel olarak ayarlayın.
Kenarlık rengini #000000 olarak ayarlayın.
Kenarlık için Köşe yarıçapını 0 piksel olarak ayarlayın.
Grafik sekmesine geçiş yapın. Aşağıdaki özellikleri ayarlayın:
- Düzen davranışı: Uyumlu
- Yazı tipi boyutu: 0.5
- Yazı tipi rengi > Renk: #000000
- Arka plan seçenekleri > Kullanılan renk: #ffffff
Stil panelinden çıkmak için öğesine tıklayın.
Düzen kapsayıcısına dönmek için paneldeki üst sütuna tıklayın.

Öğe 2: AÇIK durumunu temsil eden düğme kısmı

Aşağıdakileri yapın:

İçerik > Grafikler altında, Ekle öğesine tıklayın. Düğme'yi seçin.
Öğeyi genişletin. Etiket'i ToggleSwitch_ON olarak ayarlayın.
Gösterim koşulu için 'e tıklayın.
Aşağıdakileri ekleyin:
```
=vViewChartValues=true()
```
Uygula'ya tıklayın.
Boyut altında aşağıdakileri ayarlayın:
- Genişlik (%): 4
- Yükseklik (%): 7
Konum altında aşağıdakileri ayarlayın:
- X ekseni (%): 95}] ⏎
- Y ekseni (%): 90
Özellikleri düzenle'ye tıklayın.
Genişlet Eylemler ve navigasyon.
İşlem ekle'ye tıklayın.
Eylem için Değişken değerini ayarla seçin.
Değişken için vViewChartValues seçin.
Değer için tıklayın.
Şu ifadeyi ekleyin:
```
=false()
```
Uygula'ya tıklayın.
Görünüş > Genel öğesini genişletin.
On öğesini Etiket olarak ayarlayın.
Görünüm > Sunum bölümünü genişletin.
Stil'e tıklayın.
Kenarlık altında, Dış Çizgi'yi 2 piksel olarak ayarlayın.
Kenarlık rengini #000000 olarak ayarlayın.
Kenarlık için Köşe yarıçapını 0 piksel olarak ayarlayın.
Grafik sekmesine geçiş yapın. Aşağıdaki özellikleri ayarlayın:
- Düzen davranışı: Uyumlu
- Yazı tipi boyutu: 0.5
- Yazı tipi rengi > Renk: #ffffff
- Arka plan seçenekleri > Kullanılan renk: #109600
Stil panelinden çıkmak için öğesine tıklayın.
Paneldeki üst sütuna tıklayarak düzen kapsayıcısına geri dönün.

Öğe 3: KAPALI durumunu temsil eden düğme kısmı

Aşağıdakileri yapın:

İçerik > Grafikler altında, Ekle'ye tıklayın. Düğme'yi seçin.
Öğeyi genişletin. Etiket'i ToggleSwitch_ON olarak ayarlayın.
Gösterim koşulu için 'e tıklayın.
Aşağıdakileri ekleyin:
```
=vViewChartValues=false()
```
Uygula'ya tıklayın.
Boyut altında aşağıdakileri ayarlayın:
- Genişlik (%): 4
- Yükseklik (%): 7
Konum altında aşağıdakileri ayarlayın:
- X ekseni (%): 83
- Y ekseni (%): 90
Özellikleri düzenle'ye tıklayın.
Genişlet Eylemler ve navigasyon.
İşlem ekle'ye tıklayın.
Eylem için Değişken değerini ayarla seçin.
Değişken için vViewChartValues seçin.
Değer için tıklayın.
Şu ifadeyi ekleyin:
```
=true()
```
Uygula'ya tıklayın.
Görünüş > Genel öğesini genişletin.
Off öğesini Etiket olarak ayarlayın.
Görünüm > Sunum bölümünü genişletin.
Stil'e tıklayın.
Kenarlık altında, Dış Çizgi'yi 2 piksel olarak ayarlayın.
Kenarlık rengini #000000 olarak ayarlayın.
Kenarlık için Köşe yarıçapını 0 piksel olarak ayarlayın.
Grafik sekmesine geçiş yapın. Aşağıdaki özellikleri ayarlayın:
- Düzen davranışı: Uyumlu
- Yazı tipi boyutu: 0.5
- Yazı tipi rengi > Renk: #ffffff
- Arka plan seçenekleri > Kullanılan renk: #ff001e
Stil panelinden çıkmak için öğesine tıklayın.
Düzen kapsayıcısına dönmek için paneldeki üst sütuna tıklayın.

Bölüm 4: Sunumu sonlandırın

Başlık ve kenarlık ekleyerek düzen kapsayıcısını sonlandırın.

Aşağıdakileri yapın:

Özellikler panelinde Görünüm > Genel bölümünü genişletin.
Başlığı Geç vs. olarak ayarlayın. Geç Olmayan Siparişler - Satış Etkisi.
Görünüm > Sunum bölümünü genişletin.
Açın Grafikleri içeride tut.
Tıklayın Stil.
Kenarlık için aşağıdaki özellikleri ayarlayın:
- Anahat: 2 px
- Renk: #7b7a78
Gölge için aşağıdaki özellikleri ayarlayın:
- Orta boyut
- Renk: #7b7a78

Sonuçlar

Sayfa düzenleme modundan çıkın. Basit ve ayrıntılı sütun grafik arasında geçiş yapmak için geçiş düğmesine tıklayın.

Layout container with 'Show values' switched off, presenting the bar chart without value labels — Düzen kapsayıcısı, Değerleri göster kapalıyken

Layout container with 'Show values' switched on, presenting the bar chart with value labels — Layout container with Show values switched on

Click on the Not Late and Late titles at the top of the chart. Notice that clicking these elements selects the corresponding values in the app.

Düzen kapsayıcı, 'Geç Durum' alanında yapılan seçimle. — Alanında Late Status seçim Not Late içeren düzen kapsayıcı.

Bu sayfa size yardımcı oldu mu?

Bu sayfa veya içeriği ile ilgili bir sorun; bir yazım hatası, eksik bir adım veya teknik bir hata bulursanız lütfen bize bildirin!

Geri bildiriminizi buradan iletin