بار الرسوم البيانية على موقع ويب

Question

أنا بأي حال من الأحوال مصمم على شبكة الإنترنت، لذلك أود أن تكون مساعدة مفصلة كما كنت على استعداد لإعطاء.

أرغب في إنشاء موقع ويب يقوم بتسابق بعض البيانات بإدخاله باستخدام رسم بياني شريط من 0-100٪. سأدخل الحد الأقصى لعدد الرسم البياني قد يذهب إليه، ثم سيتم تحديث بعض نقاط البيانات في بعض الأحيان، والتي سيعكس رسم بياني شريط الإنجاز.

كيف لي أن تذهب عن القيام بذلك؟

أعرف HTML الأساسية و PHP، لكنها لم تستخدم إما في وقت طويل جدا.

Answer 1

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

ملاحظة: عينة رمز سريع، تم اختباره فقط في Firefox 3.x

<style type="text/css">
.bar
{
    background-color: green;
    position: relative;
    height: 16px;
    margin-top: 8px;
    margin-bottom: 8px; 
}
</style>

<div id="barcontainer" style="width:200px;">
    <div id="bar1" class="bar" style="width:43%;"></div>
    <div id="bar2" class="bar" style="width:12%;"></div>
    <div id="bar3" class="bar" style="width:76%;"></div>
    <div id="bar4" class="bar" style="width:100%;"></div>
</div>

يمكنك تغيير عرض الأشرطة الفردية بسهولة مع JavaScript (فقط قم بتغيير العرض).

Answer 2

أعلم أنك قلت أنك جديد، لكن يجب إلقاء نظرة على API لتصور Google. لقد حصلت على بعض الأشياء الجيدة للقيام بهذا النوع الذي قد ترغب فيه.
http://code.google.com/apis/visualization/

Answer 3

هناك طريقتان يمكنك معالجة هذه المشكلة؛ قم بإنشاء الرسم البياني الموجود في الخلفية (ربما يستخدم PHP في قضيتك) أو قم بذلك على جانب العميل باستخدام JavaScript.

لست متأكدا من تفاصيل القيام بذلك في PHP، كما لا أعرف اللغة حقا، لكنني متأكد من وجود الكثير من المعلومات هناك على جيل الرسم البياني في PHP.

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