ما تکنیک‌های زیادی را برای توسعه انواع مختلف نمودارها با استفاده از CSS یا/و جاوا اسکریپت پوشش داده‌ایم. امروز به شما نشان خواهم داد که چگونه با CSS یک نمودار حبابی بسازید.

نمودار حبابی چیست؟

آ نمودار حبابی یک نوع نمودار است که پسرعموی آن در نظر گرفته می شود طرح پراکنده، و هدف اصلی آن تجسم روابط بین سه بعد/متغیر مختلف است: یکی با محور X، یکی با محور Y و دیگری با اندازه حباب نمایش داده می شود.

یک تصویر نمونه از نمودار حبابیک تصویر نمونه از نمودار حبابیک تصویر نمونه از نمودار حباب
3 متغیر عددی در نمودار حبابی مقایسه می شوند

این نوع نمودار می تواند اطلاعات مفیدی را برای روندهای سال، مقایسه داده های تاریخی، مقایسه فروش و غیره ارائه دهد.

شما می توانید نمودارهای حباب پویا پیچیده را با استفاده از کتابخانه های مختلف جاوا اسکریپت بسازید Highcharts.js و ApexCharts.js.

1. با داده ها شروع کنید

برای این نسخه ی نمایشی، ما برخی از داده ها را از a قرض می گیریم آموزش نمودار قبلی و کمی در مورد آنها توضیح دهید. بنابراین، بیایید فرض کنیم که می‌خواهیم داده‌های زیر را در نمودار حبابی تجسم کنیم که بودجه یک سازمان خیریه را طی سال‌ها توصیف می‌کند:









سال منابع مالی تعداد کارکنان
2018 95000 یورو 12
2016 72000 یورو 10
2015 50000 یورو 8
2012 35000 یورو 6
2010 15000 یورو 4

هر ردیف جدول با یک نقطه (حباب) مطابقت دارد. دو ستون اول موقعیت حباب را در امتداد محورهای X و Y توصیف می کنند، در حالی که ستون سوم اندازه آن را نشان می دهد.

2. علامت گذاری صفحه را مشخص کنید

ما یک عنصر wrapper را مشخص می کنیم که شامل دو لیست است:

  • لیست اول محدوده محور y را تنظیم می کند. اگر به داده های جدول بالا نگاه دقیق تری بیندازید، خواهید دید که ستون دوم شامل مقادیر تا 95000 است. با در نظر گرفتن این موضوع، شش مقدار از 0 تا 100000 را با اندازه گام 20000 تعریف می کنیم. بنابراین مقادیر محور y 0، 20000، 40000، 60000، 80000 و 100000 خواهد بود.
  • لیست دوم داده های محور x را تنظیم می کند. این ارقام از ستون اول جدول ما از پایین ترین به بالاترین استخراج می شوند. با این حال، در نشانه گذاری زیر توجه کنید که یک آیتم فهرست شامل یک سال دو بار است. می‌توانستیم سال را به‌عنوان گره متن مورد تنظیم نکنیم. اما مهم است که این مقدار را در data-year صفت. همانطور که بعدا خواهیم دید، مقدار این ویژگی را به مربوطه منتقل می کنیم ::before شبه عنصر را نیز در نظر بگیرید data-details صفت. مقدار آن به عنوان راهنمای حباب مربوطه عمل می کند. در داخل این مقدار چندین ظاهر وجود دارد 
 که نمایش HTML در قالب هگز از یک کاراکتر فید خط است. ما آن را بعد از هر بیت متنی که می‌خواهیم یک خط جدید ایجاد کنیم، قرار می‌دهیم. بیشتر در مورد آن بعدا.

در اینجا نشانه گذاری مورد نیاز است:

1
<div class="chart-wrapper">
2
  <ul class="chart-y">
3
    <li>€100,000</li>
4
    ...
5
  </ul>
6
  <ul class="chart-x">
7
    <li data-year="2010">
8
      <span data-details="UK:72%&#xa;USA:24%&#xa;Sweden:3%">2010</span>
9
    </li>
10
    ...
11
  </ul>
12
</div>

3. نمودار را سبک کنید

برای سادگی، از برخی سبک های بازنشانی/پایه صرف نظر می کنم. می توانید بقیه آنها را با کلیک کردن بررسی کنید CSS برگه پروژه آزمایشی

من سبک‌ها را بهینه نکرده‌ام، برای شما راحت‌تر می‌توان ببینید چه اتفاقی دارد می‌افتد

در نهایت، من حق بیمه را تعبیه کرده ام چدار گوتیک فونت گرفته شده از عناصر Envato برای عنوان

بسته بندی نمودار یک ظرف انعطاف پذیر با حداکثر عرض 700 پیکسل و محتوای مرکز افقی خواهد بود. محور y سه برابر بزرگتر از محور x خواهد بود.

CSS مرتبط:

1
.chart-wrapper {
2
  display: flex;
3
  max-width: 700px;
4
  padding-right: 15px;
5
  margin: 30px auto 0; 
6
}
7
8
.chart-wrapper .chart-y {
9
  flex: 1;
10
}
11
12
.chart-wrapper .chart-x {
13
  flex: 3;
14
}

محور x

لیست دوم که شامل داده های محور x نیز می شود یک ظرف انعطاف پذیر خواهد بود. اقلام آن دارای عرض 12 درصد هستند، به طور مساوی در محور اصلی توزیع می شوند و در پایین ظرف قرار می گیرند. ما لیست را شبیه یک عنصر نومورفیک با کمک می کنیم این ابزار.

به علاوه، هر آیتم فهرست دارای ارتفاعی است که به ارزش بودجه مرتبط بستگی دارد (جدول بالا را ببینید). به عنوان مثال، مقدار 15000 مطابقت دارد height: 15%.

در اینجا سبک های مرتبط آورده شده است:

1
.chart-wrapper .chart-x {
2
  display: flex;
3
  justify-content: space-around;
4
  align-items: flex-end;
5
  border-radius: 48px;
6
  background: #f0f0f0;
7
  box-shadow: -8px 8px 20px #b4b4b4, 8px -8px 20px #ffffff;
8
}
9
10
.chart-wrapper .chart-x li {
11
  position: relative;
12
  width: 12%;
13
}
14
15
.chart-wrapper .chart-x li:nth-child(1) {
16
  height: 15%; /*represents €15,000*/
17
}
18
19
.chart-wrapper .chart-x li:nth-child(2) {
20
  height: 35%; /*represents €35,000*/
21
}
22
23
.chart-wrapper .chart-x li:nth-child(3) {
24
  height: 50%; /*represents €50,000*/
25
}
26
27
.chart-wrapper .chart-x li:nth-child(4) {
28
  height: 72%; /*represents €72,000*/
29
}
30
31
.chart-wrapper .chart-x li:nth-child(5) {
32
  height: 95%; /*represents €95,000*/
33
}

بعد از آن استفاده خواهیم کرد ::before شبه عنصر هر آیتم برای خروجی برچسب های محور x.

برچسب های محور xبرچسب های محور xبرچسب های محور x

CSS مرتبط:

1
.chart-wrapper .chart-x li::before {
2
  content: attr(data-year);
3
  position: absolute;
4
  left: 50%;
5
  bottom: 0;
6
  width: 100%;
7
  text-align: center;
8
  transform: translate(-50%, 40px) rotate(45deg);
9
}

حباب ها

هر یک span عنصر با یک حباب (نقطه) مطابقت دارد. هر حباب رنگ و اندازه متفاوتی خواهد داشت.

حباب نمودارحباب نمودارحباب نمودار

اندازه حباب به مقدار ستون سوم جدول مربوطه بستگی دارد (جدول را ببینید). با فرض اینکه عرض و ارتفاع کوچکترین حباب (اول) 15 پیکسل باشد، اندازه حباب های باقی مانده را بر این اساس محاسبه می کنیم.

کار دیگری که ما انجام خواهیم داد این است که به طور پیش فرض از نمایش حباب ها جلوگیری کنیم و در عوض آنها را با انیمیشن محو و مقیاس نشان دهیم. در صفحات خودتان که احتمالاً DOM حاوی عناصر بیشتری است، برای نتایج دقیق‌تر می‌توانید منتظر بمانید تا صفحه بارگیری شود و حباب‌ها را نشان دهید همانطور که در صفحه انجام دادیم. نمودار دماسنج.

در اینجا سبک های مرتبط آورده شده است:

1
/*CUSTOM VARIABLES HERE*/
2
3
.chart-wrapper .chart-x li:nth-child(1) span {
4
  width: 15px; /*represents 4 employees*/
5
  height: 15px; /*represents 4 employees*/
6
  background-color: var(--bubble-color1);
7
}
8
9
.chart-wrapper .chart-x li:nth-child(2) span {
10
  width: 22.5px; /*represents 6 employees*/
11
  height: 22.5px; /*represents 6 employees*/
12
  background-color: var(--bubble-color2);
13
}
14
15
.chart-wrapper .chart-x li:nth-child(3) span {
16
  width: 30px; /*represents 8 employees*/
17
  height: 30px; /*represents 8 employees*/
18
  background-color: var(--bubble-color3);
19
}
20
21
.chart-wrapper .chart-x li:nth-child(4) span {
22
  width: 37.5px;  /*represents 10 employees*/
23
  height: 37.5px; /*represents 10 employees*/
24
  background-color: var(--bubble-color4);
25
}
26
27
.chart-wrapper .chart-x li:nth-child(5) span {
28
  width: 45px; /*represents 12 employees*/
29
  height: 45px; /*represents 12 employees*/
30
  background-color: var(--bubble-color5);
31
}
32
33
.chart-wrapper .chart-x span {
34
  content: "";
35
  position: absolute;
36
  top: 0;
37
  left: 50%;
38
  border-radius: 50%;
39
  font-size: 0;
40
  cursor: pointer;
41
  opacity: 0;
42
  transform: scale(0.001);
43
  animation: fade-in 0.8s linear forwards;
44
}
45
46
@keyframes fade-in {
47
  100% {
48
    opacity: 1;
49
    transform: scale(1) translateX(-50%);
50
  }
51
}

نکات ابزار

همانطور که بحث کردیم، هر حباب یک راهنمای ابزار برای نمایش اطلاعات بیشتر دارد. زمانی که عرض ویوپورت بزرگتر از 700 پیکسل باشد و زمانی که ماوس را روی یک حباب قرار می‌دهیم، قابل مشاهده خواهد بود.

راهنمای ابزار حبابراهنمای ابزار حبابراهنمای ابزار حباب

برای ایجاد آن، از آن استفاده خواهیم کرد ::before و ::after شبه عناصر هر دهانه (حباب). این ::after شبه عنصر به عنوان راهنمای ابزار واقعی در حالی که ::before یکی مکان تزئینی تری خواهد داشت و به عنوان مثلث نوک ابزار عمل می کند.

همانطور که در بالا ذکر کردیم، اطلاعات راهنمای ابزار ما از آن می آییم data-details صفت. در اینجا ما از &#xA; نمایندگی هگز برای تقسیم مقدار مشخصه به چند خط. اما این کافی نیست. ما نیز باید از آن استفاده کنیم white-space ویژگی. در اینجا یک جزئیات است نخ سرریز پشته در مورد آن

سبک های مرتبط:

1
.chart-wrapper .chart-x span::before {
2
  content: "";
3
  position: absolute;
4
  left: 50%;
5
  bottom: calc(100% + 3px);
6
  transform: translateX(-50%);
7
  width: 0;
8
  height: 0;
9
  border-style: solid;
10
  border-width: 6px 6px 0 6px;
11
  border-color: rgba(0, 0, 0, 0.7) transparent transparent transparent;
12
  opacity: 0;
13
  transition: opacity 0.15s linear;
14
  pointer-events: none;
15
}
16
17
.chart-wrapper .chart-x span::after {
18
  content: attr(data-details);
19
  position: absolute;
20
  left: 50%;
21
  bottom: calc(100% + 9px);
22
  min-width: 90px;
23
  line-height: 1.35;
24
  transform: translateX(-50%);
25
  color: var(--white);
26
  background: rgba(0, 0, 0, 0.7);
27
  font-size: 1rem;
28
  white-space: pre;
29
  border-radius: 3px;
30
  padding: 6px;
31
  opacity: 0;
32
  z-index: 1;
33
  transition: opacity 0.15s linear;
34
  pointer-events: none;
35
}
36
37
.chart-wrapper .chart-x span:hover::before,
38
.chart-wrapper .chart-x span:hover::after {
39
  opacity: 1;
40
}
41
42
@media screen and (max-width: 700px) {
43
  .chart-wrapper .chart-x span::before,
44
  .chart-wrapper .chart-x span::after {
45
    display: none;
46
  }
47
}

نتیجه

انجام شد، مردمی! امروز، ما دانش CSS خود را با ساختن یک نمودار حباب کاملاً کاربردی تمرین کردیم. اگرچه این روش محبوب‌ترین روش برای تجسم داده‌ها نیست، امیدواریم در یکی از پروژه‌های تجسم داده‌های آینده شما جایگاهی داشته باشد.

بیایید آنچه را که ساخته ایم به خود یادآوری کنیم:

مثل همیشه، با تشکر برای خواندن!