Podczas oceny strukturalnego rozkładu na podstawie dyskretnych metryk, Wykres słupkowy skumulowanyoferta efektywnego sposobu wizualizacji rozkładów część-całość. W przeciwieństwie do układów grupowanych, które rozciągają serie danych poziomo, wykresy skumulowane gromadzą wartości pionowo w ramach pojedynczej granicy słupka. Ten format ułatwia monitorowanie całkowitego wzrostu kategorii podczas śledzenia zmieniających się proporcji wewnętrznych podkomponentów, takich jak ruch urządzeń podzielony według systemu operacyjnego lub podział kosztów kwartalnych między działami.
Zasady działania słupków skumulowanych
Wykresy słupkowe skumulowane opierają się na przypisaniu dopasowanego stackidentyfikatora na wielu serii. Gdy silnik renderujący wykrywa identyczne wartości ciągu stacktożsame wartości ciągu na serii z type: 'bar', skumuluje wartości liczbowe sekwencyjnie wzdłuż pionowej osi Y zamiast renderować nakładające się lub obok siebie słupki.
1. Podstawowa konfiguracja
Aby stworzyć podstawowy wykres słupkowy skumulowany, zdefiniuj oś X opartą na kategoriach i przypisz wspólną właściwość stackdo każdej serii w tablicy seriestablicy:
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' }
},
legend: {
data: ['Bezpośrednie', 'Wyszukiwarki naturalne', 'Reklamy płatne', 'Odwołania']
},
xAxis: {
type: 'category',
data: ['Pon', 'Wto', 'Śro', 'Czw', 'Pią', 'Sob', 'Nied']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Bezpośrednie',
type: 'bar',
stack: 'total',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Wyszukiwarki naturalne',
type: 'bar',
stack: 'total',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Reklamy płatne',
type: 'bar',
stack: 'total',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Odwołania',
type: 'bar',
stack: 'total',
data: [98, 77, 101, 99, 40, 120, 110]
}
]
};
Zaawansowane techniki strukturalne
Wykresy słupkowe skumulowane mogą być dostosowane do pokazywania rozkładów procentowych lub wybiórczego grupowania podgrup w zależności od wymagań analitycznych.
1. Słupki skumulowane znormalizowane do 100%
Gdy Twoim głównym celem jest porównanie stosunków części zamiast całkowitych wartości liczbowych, przekonwertuj wartości danych na znormalizowane procenty sumujące się do 100% na każdą kategorię:
option = {
tooltip: {
trigger: 'axis',
axisPointer: { type: 'shadow' },
formatter: '{b}
{a0}: {c0}%
{a1}: {c1}%
{a2}: {c2}%'
},
legend: {
data: ['Stacja robocza', 'Mobile', 'Tablet']
},
xAxis: {
type: 'category',
data: ['Q1', 'Q2', 'Q3', 'Q4']
},
yAxis: {
type: 'value',
min: 0,
max: 100,
axisLabel: { formatter: '{value}%' }
},
series: [
{
name: 'Stacja robocza',
type: 'bar',
stack: 'percentage',
data: [60, 50, 45, 40]
},
{
name: 'Mobile',
type: 'bar',
stack: 'percentage',
data: [30, 40, 45, 50]
},
{
name: 'Tablet',
type: 'bar',
stack: 'percentage',
data: [10, 10, 10, 10]
}
]
};
2. Grupowanie wielokrotnego stosowania
Można połączyć grupowanie i stosowanie w jednym widoku, używając różnychstosidentyfikatorów w różnych serii. Na przykład porównaj rzeczywiste wyniki z celami, gdzie każdy z nich składa się z złożonych podkomponentów:
option = {
legend: {
data: ['Produkt A rzeczywisty', 'Produkt B rzeczywisty', 'Produkt A cel', 'Produkt B cel']
},
xAxis: {
type: 'category',
data: ['Q1', 'Q2', 'Q3', 'Q4']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Produkt A rzeczywisty',
type: 'bar',
stack: 'actual',
data: [120, 150, 180, 200]
},
{
name: 'Produkt B rzeczywisty',
type: 'bar',
stack: 'actual',
data: [80, 90, 100, 110]
},
{
name: 'Produkt A cel',
type: 'bar',
stack: 'target',
data: [130, 160, 190, 210]
},
{
name: 'Produkt B cel',
type: 'bar',
stack: 'target',
data: [90, 100, 110, 120]
}
]
};
Dokładna dostosowanie układu i stylizacji
Wykończenie wizualne jest kluczowe dla słupków sklejonych, aby zapewnić, że odcinki pozostają rozróżnialne bez powodowania zmęczenia wizualnego.
1. Granice odcinków i zaokrąglone górne pokrywy
Zastosuj czyste granice między odcinkami sklejonymi i ogranicz zaokrąglenie narożników tylko do najwyżej położonego odcinka w stosie:
option = {
xAxis: {
type: 'category',
data: ['Sty', 'Lut', 'Mar', 'Kwi']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Warstwa podstawowa',
type: 'bar',
stack: 'total',
data: [320, 302, 301, 334],
itemStyle: {
color: '#4992ff',
borderColor: '#ffffff',
borderWidth: 1
}
},
{
name: 'Warstwa środkowa',
type: 'bar',
stack: 'total',
data: [120, 132, 101, 134],
itemStyle: {
color: '#7cffb2',
borderColor: '#ffffff',
borderWidth: 1
}
},
{
name: 'Warstwa górna',
type: 'bar',
stack: 'total',
data: [220, 182, 191, 234],
itemStyle: {
color: '#fddd60',
borderColor: '#ffffff',
borderWidth: 1,
borderRadius: [4, 4, 0, 0] // Zaokrąglone narożniki tylko na górnej warstwie
}
}
]
};
Strategiczne najlepsze praktyki
- Ogranicz liczbę odcinków:Unikaj stosowania więcej niż 4 do 5 kategorii na słupku. Po przekroczeniu tego progu porównywanie środkowych odcinków między słupkami staje się wizualnie trudne.
- Zakotwicz elementy podstawy na dole:Umieść najważniejszy wskaźnik lub największy podkomponent jako pierwszy element w
seriitablicy, aby spoczywał bezpośrednio na linii podstawowej, co ułatwia wyrównanie. - Użyj palety o wysokim kontrastzie lub obramowań:Zastosuj subtelne białe linie obramowania między odcinkami, aby zachować jasne rozróżnienie, gdy sąsiadujące kolory mają podobne poziomy kontrastu.