التمثيل الدلالي للمخطط

Question

وأنا إعادة ترميز إلى الموقع القديم الذي يحتوي على مخطط مشابهة لهذه:

نص بديل http://dl.getdropbox.com/u/240752 /rental-chart.gif

وكيف يمكن تمثيل هذا المخطط مع HTML نقية؟ أنا مكروها لمجرد إدراجه كصورة.

وأنا أفكر جدول، استبدال فقط مع صورة، أو ربما مضافين مع صفوف الجدول وضعه تماما، ولكن أعتقد أنه قد يكون هشا بعض الشيء.

ورحبت أي اقتراحات.

Answer 1

وماذا يكون خاطئة مع الصورة؟

وفي معظم الأحيان عند عرض معلومات الرسم البياني على الانترنت ان ل.jpg ولدت أو بابوا نيو غينيا.

هل لديك كل هذه المصممين حصل شيئا خاطئا؟

وأي محاولة لرسم تخطيط باستخدام الجداول والألوان backgroud لن يكون intelligable لشخص ضعاف البصر، و، في جميع الاحتمالات لن تجعل صحيح على متصفح التي لا يمكن التعامل مع الصور.

استخدم الصورة ويكون لها "بديل" النص وصفا حقيقيا الإنجليزية "رسم بياني يوضح المنتج ACME تكاليف فقط 49 $ مقارنة مع المنافسين: شركة تأجير 4 في 51 $ .......

Answer 2

<div class="chart">
 <h3>Price for two weeks</h3>
 <div class="companies">
  <div class="company_scale"></div>
  <div class="company1">
   <span class="name">Company 1</span><span class="cost"> $78</span>
  </div>
  <div class="company2">
   <span class="name">Company 2</span><span class="cost"> $74</span>
  </div>
  <div class="company3">
    <span class="name">Company 3</span><span class="cost"> $60</span>
  </div>
  <div class="company4">
    <span class="name">Company 4</span><span class="cost"> $55</span>
  </div>
  <div class="acme">
    <span class="name">Acme Product</span><span class="cost"> $49.95</span>
  </div>
 </div>
</div>

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

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

وعندما أصدرت الاستفادة من هذه العلامات بدون أي بيانات الاسلوب، غير أنه يحتفظ معظم معناها الأصلي:

---

Price for two weeks
 Company 1 $78
 Company 2 $74
 Company 3 $60
 Company 4 $55
 Acme Product $49.95

---

الجدول نموذج:

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

وانتقل إلى أسفل لترى أنه في العمل (سوف تنتهي سريعة نوعا ما) HTTP: // شبكة الاتصالات العالمية. webdevout.net/test؟03

والمحتوى الأصلي يتابع <الفرعية>

<div class="chart">
 <h3>Price for two weeks</h3>
 <table class="companies">
  <thead>
  <tr class="titles">
    <td>Company</td><td>Price</td>
  </tr>
  </thead>
  <tbody>
    <tr class="company1">
      <td class="name">Company 1</td>
      <td class="cost">$78</td>
    </tr>
    <tr class="company2">
      <td class="name">Company 2</td>
      <td class="cost">$74</td>
    </tr>
    <tr class="company3">
      <td class="name">Company 3</td>
      <td class="cost">$60</td>
    </tr>
    <tr class="company4">
      <td class="name">Company 4</td>
      <td class="cost">$55</td>
    </tr>
   <tr class="acme">
      <td class="name">Acme Product</td>
      <td class="cost">$49.95</td>
    </tr>
  </tbody>
  </table>
</div>

---

div.chart 
{ 
  border: 1px solid #DDD;
}
div.chart table, 
div.chart tbody, 
div.chart thead,
div.chart tr 
{ 
  display: block; 
}
div.chart td 
{ 
  display: inline-block;
  overflow-x: hidden;
}
div.chart {
  padding: 10px;
}
div.chart td.cost, div.chart thead td { 
  display: none;
}

div.chart tbody tr td { 
  background-color: #999;
  padding: 4px;
  margin-top: 16px;
  text-align: right;
}

div.chart  tr.company1 td { 
  width:260px;
}
div.chart tr.company2 td { 
  width:246px;
}
div.chart tr.company3 td { 
  width:200px;
}
div.chart tr.company4 td { 
  width:183px;
}

div.chart tbody tr td.cost { 
  display: inline-block;
  background-color: inherit;
  color: #F00;
  font-size: 80%;
  width: 80px;
}
div.chart  tr.acme td { 
  background-color: #99F;
  width: 166px;
}
div.chart tbody  tr.acme td.cost {
  color: #000;
  background-color: #FF9;
}

Answer 3

حسنا، المخطط هو عنصر رسومي، أفترض أنك تريد البيانات لتكون في متناول كل من متصفحات النص فقط ومحركات البحث (؟): في هذه الحالة باستخدام <table> عن البيانات المعروضة في الرسم البياني هو في الواقع < م> صحيحة . أنا أعرف الكثير من الناس خائفون من الجداول، لأن كل ما يقال عن تصميم "الجدول أقل". ولكن باستخدام جداول البيانات جدولي ما كان المقصود من الجداول.

وكنت قد وضعت الجدول أدناه (أو أعلاه، إلى جانب غيرها) صورة المخطط، مع البيانات يعرض الجدول. مخطط جيد لتصور الاختلافات، وليس على ما يرام لرؤية القيم الفعلية. لذا طاولة كذلك هو تكملة لطيفة إلى الرسومات.

إذا الرسم البياني ليست معقدة جدا (كما هذه العينة) هل يمكن أيضا أن مجرد إضافة نص بديل مع وصف عربي عادي على الرسم البياني، شيء من هذا القبيل:

<img alt="The price for two weeks is 80 dollars at rental company 1, 
73 dollars at ... The best service and price of 48 dollars 
you get at acme product, plus you can keep it for life" />

وينبغي أن يكون القارئ النص أي مشاكل في هذه القراءة بطريقة ذات معنى.

Answer 4

ويبدو لي أن نتذكر بعض الوظائف المفيدة حول هذا الموضوع. قد تجد أنه في نهاية المطاف صورة بسيطة هي أفضل من وجهة نظر التكاليف والمنافع للعرض، ولكن <لأ href = "http://apples-to-oranges.com/blog/post/css-for-bar-graphs /؟ ID = 55 "يختلط =" نوفولو noreferrer "> هذه المقالة سوف اقول لكم كل ما يمكن أن تريد معرفته حول استخدام HTML و CSS لرسم الرسوم البيانية.

وبالصدفة، بعد نشر هذا نظرت everyblock.com أمس ولاحظت لديهم التنفيذ الجيد بشكل خاص الرسوم البيانية في HTML / CSS الذي سوف يكون من المفيد النظر.

Answer 5

هل يمكن أن تنظر أيضا مجرد وجود طاولة في HTML الخاص بك وبعد ذلك باستخدام جافا سكريبت لإنشاء جدول: <لأ href = "http://www.wait-till-i.com/2008/01/08/generating- الرسم البياني للمن الوصول إليها، جداول البيانات باستخدام رأس جوجل-الرسم البياني للالمعهد / "يختلط =" نوفولو noreferrer "> http://www.wait-till-i.com/2008/01/08/generating- الرسم البياني للمن الوصول إليها، جداول البيانات، جوجل، الرسوم البيانية التي تستخدم من-API /

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

Answer 6

وراجع مقالة كبيرة على CSS لنقابة المحامين الرسوم البيانية على التفاح لموقع البرتقال.

و(تحرير: انها نفس الرابط اعلنه <م>Sam موراي ساتون سبق - آسف)