ابنِ مخطط أعمدة بـ CSS

ليست كل تصوّرات البيانات بحاجة إلى مكتبة رسوم بيانية ثقيلة. في كثير من لوحات البيانات، بضعة عناصر div منسّقة تصنع مخطط أعمدة أنيقاً وسريع التحميل ويخضع لسيطرتك الكاملة.

في هذا الدرس ستبني مخطط أعمدة عمودياً من HTML خالص و Tailwind. كل عمود هو مجرد div ملوّن بارتفاع يعكس قيمته، مع وسيلة إيضاح تربط الألوان بمعناها.

بوصفك محلل بيانات، هذه التقنية ذهب خالص: يمكنك إدراج مخطط نظيف في أي تقرير دون أي اعتماديات، وتفهم بالضبط كيف يرتبط كل بكسل ببياناتك. هيا نرسم بعض الأعمدة.