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.

  

    

      
100%
      
    
    

      

          
2018
          

            

            

          
        
      

      
    
  

Açıklama listelerini kullanacağız (

) çü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

tanım terimini tutan başka bir esnek kap olarak kullanabileceğimiz (

) etiket ve açıklama detayları olarak kullanıyoruz (

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

  
Estimate
  
Actual

Bir kullanma

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.

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

1. renklerimizin aralarında bol miktarda kontrast olup olmadığını kontrol edin,
2. klavye kullanıcılarının örtüşen her bir çubuğa sekme yapmasına izin verin ve
3. 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:

50%

Ç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:

  50%

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

  
100%
  
80%
  
60%
  
40%
  
20%
  
0%

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:

  
Estimate
  
Actual

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.