راه های بسیاری برای نمایش بصری داده ها وجود دارد : نمودار میله ای، نمودار خطی، نمودار پراکندگی و غیره که شما می توانید آنها را در طراحی سایت پیاده نمایید. در این پست قصد داریم شما را با روش ساده استفاده از CSS برای رسم نمودار در طراحی سایت آشنا کنیم.اما بهتر است ابتدا به طور خلاصه ، هدف طراحی سایت را بررسی کنیم.
راهنمایی برای ساخت جدول
برای توسعه یک جدول در طراحی سایت سه دستورالعمل وجود دارد:
• دسترسی: همه باید قادر به دسترسی به داده های شما باشد، حتی اگر جدول شما خسته کننده باشد. دقت داشته باشید که خسته کننده بودن بهتر از عدم دسترسی به اطلاعات است.
• سهولت توسعه: نمودارگیری نباید بدون ضرورت، پیچیده باشد.
• عملکرد: ما باید اطمینان حاصل کنیم که کاربران زمان زیادی را برای دسترسی به دانلود و و یا پیدایش عناصر در صفحه نمایش صرف نمی کنند.
این اهداف و دستورالعمل ها در طراحی سایت بسته به نوع عملکرد، متغیر است.
نمودار میله ای CSS
دو راه برای ایجاد یک نمودار میله ای در طراحی سایت با CSS وجود دارد. در ابتدا ما یک لیست از داده ها را تعریف می کنیم.
<dl>
<dt>عنوان گراف</dt>
<dd class="percentage">
<span class="text">
Date3: 20%
</span>
</dd>
<dd class="percentage">
<span class="text">
Date3: 50%
</span>
</dd>
<dd class="percentage">
<span class="text">
Date3: 30%
</span>
</dd>
</dl>
با استفاده از تگ span، ما کاملا محتوای متن هر تگ dd را در سمت چپ قرار دادیم.برای ایجاد میله ها که به صورت بصری داده ها را نشان می دهد از عناصر شبه استفاده می کنیم. برای انجام این کار ما می توانیم نشانه گذاری های با کلاس های مشابه، به روزرسانی کنیم.
مشکل ایجاد نمودار با css در طراحی سایت
• اگر شما از پس زمینه برای استایل یک عنصر استفاده می کنید، آن عنصر احتمالا در صفحه وب سایت قابل مشاهده نخواهد بود.
• ردیف های جدول دقیقا تثبیت می شوند، از این رو برای توسعه دهندگان وب سایت در آینده به عنوان یک مشکل محسوب می شود.
• در برخی موارد پشتیبانی مرورگر، یک فرآیند دشوار محسوب می شود، و تضمین اینکه تمام دستگاه ها از ویژگی های css پشتیبانی می کنند، می تواند دشوار باشد.
• استفاده از عناصر شبه، در روش درون خطی غیر ممکن است، بنابراین اگر شما بخواهید یک عنصر شبه را با جاوااسکریپت متداول نمایید، پیچیدگی بیشتر خواهد شد.
• انجام هرکاری با css امکان پذیر است، اما هنگامی که قصد ایجاد نمودار خطی منحصرا با css را دارید، احتمالا باید اندکی در داده ای کد تغییراتی را انجام دهیم.