Paprastas grafikų formavimas naudojant lenteles bei HTML5 & JQuery

Iš tiesų labai paprastas būdas gražiai atvaizduoti grafikus, naudojant paprastą lentelę (Table):

JQuery Visualize

Pačios lenteles pavyzdžio kodas bei jquery funkcija:

  1. <table >
  2.  <caption>2009 Individual Sales by Category</caption>
  3.  <thead>
  4.   <tr>
  5.    <td></td>
  6.    <th>food</th>
  7.    <th>auto</th>
  8.    <th>household</th>
  9.    <th>furniture</th>
  10.    <th>kitchen</th>
  11.    <th>bath</th>
  12.   </tr>
  13.  </thead>
  14.  <tbody>
  15.   <tr>
  16.    <th>Mary</th>
  17.    <td>150</td>
  18.    <td>160</td>
  19.    <td>40</td>
  20.    <td>120</td>
  21.    <td>30</td>
  22.    <td>70</td>
  23.   </tr>
  24.   <tr>
  25.    <th>Tom</th>
  26.    <td>3</td>
  27.    <td>40</td>
  28.    <td>30</td>
  29.    <td>45</td>
  30.    <td>35</td>
  31.    <td>49</td>
  32.   </tr>
  33.   …repetitive rows removed for brevity.
  34.  </tbody>
  35. </table>
  1.  
  2.    $(function(){
  3.     //make some charts
  4.     $('table').visualize({type: 'pie', pieMargin: 10, title: '2009 Total Sales by Individual'});
  5.     $('table').visualize({type: 'line'});
  6.     $('table').visualize({type: 'area'});
  7.     $('table').visualize();
  8.    });

Ir viskas, belieka įterpti šias bylas: JQuery, visualize plugin (js), visualize stilius (css). Tiesa, IE nesupranta HTML5, todėl papildomai reikia įterpti konverterį (archyve rasite):

  1. <!–[if IE]><script type="text/javascript" src="excanvas.compiled.js"></script><![endif]–>

Plačiau filamentgroup.com

Data 2009.07.08 Komentarai 0 Kategorija Įskiepiai Žymės , ,