Adından da anlaşılacağı gibi, örtüşen grafikler tek bir diyagramda iki farklı veri kümesini görselleştirir. Buradaki fikir, örtüşen çubukların, örneğin yıldan yıla verileri karşılaştırmamıza izin vermesidir. Ayrıca, bir çubuğun hedefi temsil ettiği ve diğerinin mevcut miktarı gösterdiği bir hedef için ilerlemeyi izleme gibi şeyler için de yararlıdırlar.
Ama onlar da güzel!
Zihniniz muhtemelen benimki gibidir ve şimdiden bunu nasıl kodlayacağınızı anlamaya başlamıştır. İşte bununla nasıl başa çıktım.
HTML
İşaretleme ile başlayacağız çünkü neyin stile ihtiyacı olduğunu bu şekilde biliyoruz.
<div class="container">
<div class="chart">
<dl class="numbers">
<dd><span>100%</span></dd>
<!-- all the way to 0% -->
</dl>
<dl class="bars">
<div>
<dt>2018</dt>
<dd>
<div class="bar" data-percentage="50"></div>
<div class="bar overlap" data-percentage="53"></div>
</dd>
</div>
<div>
<!-- more bars -->
</dl>
</div>
</div>
Açıklama listelerini kullanacağız (<dl>
) çünkü standart sıralı ve sırasız listelere göre çok daha semantik bir yaklaşımdır. Diğer bir neden ise her çubuğa bir etiket eklememizdir. Normal listelerde, tanım listelerinden farklı olarak başlık veya açıklama eklemek için bir etiket bulunmaz. Basit bir ifadeyle, daha mantıklı ve daha okunaklı.
İlk açıklama listesi, .numbers
, y eksenidir. bu .bars
verilerin görselleştirildiği yerdir ve ben de x eksenini oluşturmak için bir tanım listesi yaptım. Her liste öğesi bir .bar
ve açıklama terimi olarak etiket (dt).
Ve verilerde ne var nitelik? data-percentage
sonuçta y eksenindeki değerini temsil eden çubuğun yüksekliğini belirtmek için kullanılıyor. Her çubuk için CSS'de manuel olarak ayarlayabiliriz, ancak bu tekrarlayıcıdır ve birkaç satır CSS ile değiştirilebilecek çok fazla ekstra kod vardır.
Temel grafik stilleri
Çok sayıda iki boyutlu yönlerle çalışıyoruz, bu nedenle flexbox her şeyi sıraya koymak için arkadaşımız olacak. yapabiliriz .chart
y ekseni etiketlerini ve grafiği yan yana konumlandıran esnek bir kap row
yönü.
.chart {
display: flex;
}
Flexbox varsayılan olarak ayarlandığından yönü belirtmemize bile gerek yok row
. Bunu yapalım ve sonra y ekseni boyunca etiketlerin listesine flexbox ekleyelim, çünkü bunların içinde çalışacağını biliyoruz. column
yönü.
.numbers {
display: flex;
flex-direction: column;
list-style: none;
margin: 0 15px 0 0;
padding: 0;
}
İster inanın ister inanmayın, barlar için tekrar flexbox kullanabiliriz, çünkü onlar da bir row
yönü.
.bars {
display: flex;
flex: auto; /* fill up the rest of the `.chart` space */
gap: 60px;
}
Bunu ayarladım, böylece .bars
tarafından kalan alanı otomatik olarak kaplar. y-axis
.numbers
.
Muhtemelen HTML'de fark etmişsinizdir, ancak “çubuk” aslında birinin diğeriyle örtüştüğü iki çubuktur. Bunları jenerik olarak sardım <div>
tanım terimini tutan başka bir esnek kap olarak kullanabileceğimiz (<dt>
) etiket ve açıklama detayları olarak kullanıyoruz (<dd>
) her iki çubuk değerini de tutan:
.bars > div {
align-items: center;
display: flex;
flex-direction: column;
flex: 1;
position: relative;
}
Her çubuk aynı genişlikte olacak, dolayısıyla flex: 1
. Elemanı üzerindeyken nispeten konumlandırıyoruz çünkü her çubuğu kesinlikle konumlandırmak üzereyiz ve onların kaplarında kaldıklarından emin olmak istiyoruz.
Her çubuğun, dikey y ekseni boyunca değerlere karşılık gelen bir yüzde yüksekliği vardır. Ayrıca her bara bir puan verdiğimizi de hatırlayabilirsiniz. data-percentage
öznitelik — bu değerleri kullanarak her bir çubuğun yüksekliğini ayarlayan küçük bir JavaScript serpiştireceğiz.
var bars = document.querySelectorAll("dd .bar");
bars.forEach((bar) => {
var height = bar.getAttribute("data-percentage");
bar.style.height = height + "%";
});
Bu bizim temel grafiğimiz!
Bunu, üst üste binen çubukları görebileceğimiz yere götürmek istiyoruz. Sıradaki!
Çakışan çubuklar
Bir çubuğun diğeriyle çakışmasını sağlamanın hilesi komik çünkü çoğu zaman bunu yapmaya çalışıyoruz. önlemek CSS'de görsel olarak örtüşen şeyler. Ama bu durumda, aslında bunun olmasını istiyoruz.
Çubuklar zaten örtüşüyor; sadece söylemek zor. HTML'de ikincisinin olduğuna dikkat edin .bar
her sette ek bir .overlap
sınıf. Bunu çubukları ayırt etmek için kullanalım. Bunun için kendi stilinizi seçmekte tamamen özgürsünüz. İçine biraz dolgu ekliyorum .overlap
çubukları diğer çubuklardan daha geniş olacak şekilde ayarlayın. Sonra kullanarak istifleme sırasını değiştiriyorum z-index
böylece .overlap
çubuklar diğer çubukların altına oturur.
bir efsane ekleyelim
Efsane. Ne kadar harika bir kelime değil mi? Her türlü anlamla dolu. Bu durumda, hoş bir dokunuştan daha fazlasıdır, çünkü görsel olarak, genellikle bir bar için ayrılmış alanlarda iki barı sıkıştırıyoruz. Bir gösterge, her bir çubuğun neyi temsil ettiğini açıklayan bağlam sağlar.
<figure class="legend">
<div class="type1">Estimate</div>
<div class="type2">Actual</div>
</figure>
Bir kullanma <figure>
bana doğru geliyor. Genellikle görüntüleri sarmak için kullanılırlar, ancak teknik özellik diyor "çizimler, diyagramlar, fotoğraflar, kod listeleri vb. açıklama eklemek için" kullanılırlar. ve bir diyagramla çalışıyoruz. Öğeleri tutmak için muhtemelen sırasız bir liste kullanabiliriz, ancak ben anlamsız bir listeyle gittim. <div>
. Bunu işaretlemenin en iyi yolu hakkında bir fikri olan varsa, yorumlarda kulaklarım var!
Bir kez daha, stil tamamen size kalmış:
Erişilebilirlik konuları
Örtüşen çubuk grafiğimizin biçimlendirmesi ve stili için kararlar almak için çok çaba harcadık. Şimdiye kadar harika, ama kesinlikle işimiz bitmedi çünkü bunu daha iyi hale getirmek için yapabileceğimiz daha çok şey var. ulaşılabilir deneyim. Herkes web'de gezinen bir gezgin değildir, bu nedenle içeriği bu bağlamlarda iletmek için yapılması gereken bazı ek işler vardır.
Özellikle, ihtiyacımız var:
- renklerimizin aralarında bol miktarda kontrast olup olmadığını kontrol edin,
- klavye kullanıcılarının örtüşen her bir çubuğa sekme yapmasına izin verin ve
- ekran okuyucuların içeriği duyurduğundan emin olun.
Renk kontrastları
Aşağıdakiler arasında yeterli kontrasta ihtiyacımız var:
- örtüşen çubuklar
- çubuklar ve grafik arka planı
- etiket metni ve arka planı
Şimdiye kadar incelediğimiz örneklerde kullandığım renkler üzerinde yeterli miktarda olduğundan emin olarak biraz ödev yaptım. ön plan ve arka plan arasındaki kontrast WCAG AA uyumluluğunu sağlamak için.
İşte kullandığım şey:
- Çakışan çubuklar: (
#25DEAA
ve#696969
: 3.16:1 oran) - Çubuklar ve grafik arka planı (
#696969
ve#111
: 3.43:1 oran) - Y ekseni etiket metni ve arka planı (
#fff
ve#333
: 12.63: 1 oran)
çubuklar arasında sekme
Bunu, klavye kullanıcılarının her bir çubuğu seçebileceği yerde elde etmek için çıkıntı anahtar, HTML'ye ulaşabiliriz tabindex
bağlanmak. Bu özelliği her bir çubuğa (ikisine de) eklemek için her bir işlev için aşağıdaki JavaScript'i kullanabiliriz. Sekme indeksini şu şekilde ayarlayacağız: 0
:
bar.setAttribute("tabindex", 0);
Ayrıca, biz varken çubuk seçildiğinde anahattı iyileştirmek için biraz CSS ekleyebiliriz:
.bar:focus {
outline: 1.5px solid #f1f1f1;
}
İçeriğin ekran okuyucularda duyurulması
Erişilebilirliğin bir diğer önemli yönü de ekran okuyucuların çubukları ve yüzdelerini bildirebilmesini sağlamaktır.
Birinde iki farklı grafikle çalışıyoruz: "Tahmini" değerleri gösteren bir grafik ve "Gerçek" değerleri gösteren bir grafik. Kullanıcı hangi çubuğun duyurulduğunu bilseydi harika olurdu, bu yüzden onları etiketleyelim. aria-label
özellik:
<div class="bar" data-percentage="50" aria-label="Estimate">50%</div>
Çubuğun değerine doğrudan HTML'de de sahip olduğumuza dikkat edin. Bu duyurulacak, ancak yine de görsel olarak gizlemek istiyoruz. kullanabiliriz transparent
bunun için metin, ancak başka bir yol kullanmaktır klasik .visually-hidden
hile değeri sararak span
:
<div class="bar" data-percentage="50" aria-label="Estimate">
<span class="visually-hidden">50%</span>
</div>
.visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
İçeriği duyurmaktan bahsederken muhtemelen y ekseni etiketlerinin okunmasını engelleyebiliriz. Her bir çubuğun gerçek yüzdeleri zaten mevcut olduğundan ve duyurulduğundan, kullanıcının eksik bilgi olması gibi değildir. kullanabiliriz aria-hidden
bunun için nitelik:
<dl class="numbers" aria-hidden="true">
<dd><span>100%</span></dd>
<dd><span>80%</span></dd>
<dd><span>60%</span></dd>
<dd><span>40%</span></dd>
<dd><span>20%</span></dd>
<dd><span>0%</span></dd>
</dl>
Ayrıca, görsel bir yardım olduğu için ekran okuyucuların efsaneyi görmezden gelmesinin de sorun olmayacağını düşünüyorum:
<figure class="legend" aria-hidden="true">
<div class="type1">Estimate</div>
<div class="type2">Actual</div>
</figure>
son demo
Bu bir paket!
İşte başlıyoruz, üst üste binen çubukları olan bir tablo! Verileri karşılaştırmanın güzel bir yolu ve umarım bir projede bunun için bir kullanım bulabilirsin.
Buna yaklaşmamızın başka yolları var mı? Tabii ki! Burada ele aldığımız her şey sadece benim düşünce sürecimde size yol gösteriyor. Bazılarınızın farklı bir yaklaşım benimsediğini hayal ediyorum - bu sizseniz, lütfen paylaşın! Erişilebilirliği sağlama konusunda diğer CSS düzen tekniklerini ve bakış açılarını görmek harika olurdu.