التصور البيانات مع CSS الرسوم البيانية ، الرسوم البيانية وأكثر من ذلك

يعد العرض التقديمي الجيد للبيانات جانبًا مهمًا في صناعة الويب لأنه مفتاح السماح للزائرين بفهم المحتوى الخاص بك في غضون ثوان. كلما كان زوار موقعك أسهل أو أسرع في فهم محتوى الويب الخاص بك ، كلما كان ذلك يعكس احترافك في التعامل مع العرض التقديمي. يجب أن تكون معايير العرض التقديمي للبيانات بسيطة ولكنها وصفية ، مع إعدادها جيدًا ولكن يمكنها الحفاظ على اهتمامات المستخدم ، وعدم التعرق لاستيعاب محتواها ، وملاءمة المقارنة وأخيراً ، يجب أن يكون المستخدم قادرًا على اتخاذ القرارات أو الانتهاء من البيانات المقدمة دون عناء. بقدر صعوبة هذه المعايير المجنونة قد يبدو الأمر ممكنًا.

في منشور اليوم ، نريد أن نأخذك في رحلة لنهج مختلفة إلى جميلة و أدوات التصور الإبداعي للبيانات التي تستند كليا إلى CSS / HTML. نعم فعلا مجرد نسخ ولصق ثم تخصيصه وفقا لتفضيلاتك. يمكن أن تكون هذه المخططات عبارة عن رسوم بيانية لشريط CSS تعرض البيانات في شكل أفقي / عمودي ، وقائمة منسدلة إلى بيانات تنظيمك أو حتى الرسوم البيانية الخطية ومخططات دائري!

تريد المزيد؟ استمر في التمرير!

مخطط أفقي

طريقة بسيطة لعرض الشكل الإحصائي كنظرة عامة مع مخطط الشريط هذا الذي يمكن الوصول إليه باستخدام CSS. الشريط يحسب خلايا القيمة والتسميات المستخدمة. رؤوس الجدول المستخدمة في استخدام فئة النص السمعي

CSSplay

المخططات الشريطية هي قائمة نهائية بها أنماط وفئات محددة في كل سطر. يحتوي المخطط الأول على خطأ يحدث عندما تقترب القيم من 100٪ والتي يتم تصحيحها في المخطط الثاني. شفرة المصدر المدرجة للرجوع اليها.

النسبة المئوية رسم بياني

باستخدام قدرات عرض النسبة المئوية لـ CSS ، يتم إنشاء رسم بياني شريطي على أساس النسبة المئوية في هذا البرنامج التعليمي. في الرسم البياني الشريطي الأفقي ، يمكنك إما تعيين علامة للسفر الطول من اليسار إلى اليمين أو إنتاج رسم بياني عمودي باستخدام نفس التقنية وإعادة إنتاجه عدة مرات

Maxdesign

يعلمك Russ Weakley إنشاء رسم بياني بناءً على النسبة المئوية واستخدام صور الخلفية. يمكن نسخ الكود والصور المرتبطة وتنزيلها لاستخدامها في مشروعك.

الرسم البياني العمودي

قم بإنشاء رسومات بيانية شريطية عمودية باستخدام CSS و PHP من خلال إنشاء قائمة بسيطة مع ارتفاع في بكسل الشريط الفردي والمحور y لمجموعة الشريط وفئة لتصميم مجموعات البيانات. يعلمك إريك ماير أن يحول نفسه إلى رسم بياني شريطي ، رسم بياني خطي ، رسم بياني مدبب ورسم بياني ثلاثي الأبعاد باستخدام نفس التقنيات

CSS Linegraph النقي

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

Linegraph بسيط

رسم بياني بسيط للغاية يستخدم فقط DHTML و CSS وحيث يمكنك تعيين خلفية شفافة للرسم البياني. يتم تحميل هذا الرسم البياني بشكل أسرع ويمزج مع بقية الصفحة.

Mgraph

يستخدم هذا الرسم البياني لأياكس لتمثيل بيانات السنة وفقًا لكل شهر باستخدام CSS و XHTML فقط ويتم تشغيله في Firefox و Opera

قوائم متعددة الأعمدة

بول نوفيتسكي يعلمك إنشاء قائمة متعددة الأعمدة باستخدام CSS في هذه المقالة. يناقش الكثير من التقنيات لتحقيق قوائم متعددة الأعمدة مثل تعويم القوائم المقسمة ، وترقيمها باستخدام سمة HTML ، والمحتوى الذي تم إنشاؤه من CSS ، ولف القائمة بـ XHTML ، و CSS ، إلخ ، وأخيراً يضيف القليل من التصميم وصورة الخلفية لتحقيق العمود متعدد قائمة تماما.

Bulletgraph

يقارن الرسم البياني النقطي مقياسًا واحدًا بواحد أو أكثر من التدابير الأخرى ويعرض النطاق النوعي للأداء. أنها مرنة للغاية لمواقع البيانات التي تعتمد على. تعلم كيفية إنشاء رسم بياني رصاصي باستخدام CSS / HTML.

رسم بياني عمود

يتم إنشاء رسم بياني لشريط العمود باستخدام CSS حيث تظهر القيم في أشرطة عمودية ملونة تصل إلى ارتفاعات مختلفة وفقًا للقيم المحددة. يعطينا هذا الرسم البياني بسرعة فكرة واضحة لأن القيم تتم طباعتها مباشرةً هنا. باستخدام محددات CSS ، العفاريت ، تصميم القوائم وغيرها ، تعلم كيفية إنشاء رسم بياني عمود من البرنامج التعليمي.

تعطل الرسم البياني

واجه الرسم البياني للتوقف في البداية مشكلة في عرض فترات زمنية طويلة على مساحة شاشة محدودة والحفاظ على تخطيط شفاف للأحداث التي تم توضيحها بواسطة نموذج التقويم الشهري. يتم تشغيل onMouseOver () قيد التشغيل ويتم استخدام ألوان مختلفة لأنواع مختلفة من أحداث التوقف.

ديناميكية حية CSS الرسم البياني

يقوم الرسم البياني الديناميكي المباشر CSS لعرض وقت استجابة تنفيذ الأمر ping بواسطة خادم الويب بقراءة البيانات من خادم الويب باستخدام CSS وشفرة JavaScript ووظائف AJAX وانزلاق الرسم البياني.

رسم بياني أفقي

رسم بياني شريطي لا يحتاج إلى مشروب دائمًا. يمكن أيضًا إنشاء رسم بياني شريط أفقي. في هذه المقالة ، يتم إنشاء رسم بياني شريطي أفقي بتغيرات ألوان مختلفة باستخدام "رسم بياني أفقي" للفئة وتحديد ارتفاع الرسم البياني من الترميز باستخدام CSS.

Multigraph

يتم إنشاء رسم بياني خطي لا يستخدم أي جداول صور باستخدام CSS و DHTML والذي يتم تحميله بشكل أسرع ويمكن تغيير الخلفية بشكل شفاف.

الرسم البياني لخطة الإنتاج

يتم إنشاء رسم بياني لخطة الإنتاج باستخدام فئة الرسم البياني كحاوية رسم بياني و hLine أيضًا vLine لرسم خطوط فاصلة. يستخدم هذا الرسم البياني في تطبيقات الإنترانت. يتم حساب عرض الرسم البياني وفقًا لعدد الأيام والارتفاع المعروضين باستخدام عدد التغييرات المهمة.

الرسم البياني شطيرة

يتم إنشاء رسم بياني شطري عندما يتم تقسيم شريط واحد في رسم بياني شريطي إلى طبقات متعددة حيث قد يشير ارتفاع عمود واحد إلى اتجاه عام بينما يشير ارتفاع الطبقة المفردة إلى جزء من هذه الطبقة. إنشاء رسم بياني شطيرة CSS من هذا البرنامج التعليمي.

رسم بياني مكدس

بالنسبة للرسم البياني المتراكم ، يتم استخدام قائمة التعريف لتقديم البيانات ، ثم تتم إعادة تعيين الهوامش والحشو لتظهر كما هي في جميع المتصفحات. تتم إضافة محاور ومنمق للحصول على قضبان مكدسة. يتم تدريس كل التفاصيل بدقة في هذا البرنامج التعليمي.

رسم بياني بسيط

رسم بياني شريطي تم إنشاؤه باستخدام CSS و PHP بلا مكتبة رسوم وبدون الكثير من العمليات الحسابية المستخدمة في الهوامش. الحشو يجعل من السهل للغاية فهم التقنية التي تستخدم فقط