jQuery plugins - gvChart
okt 19

gvChart

HTML-táblázatból diagram

Verzió: 1.0
Kiadás dátuma: 2010/06/18
Fejlesztő: Janusz Kamieński
Liszensz: Creative Commons Attribution Works 3.0 Poland

Bevezető

A plugin a Google Charts szolgáltatásán alapszik és segítségével bármely táblázatunkból könnyedén faraghatunk szép, interaktív diagramot. Ehhez öt típust kínál számunkra, és ami külön kiemelendő, nem szükséges hozzá különböző szerver oldali és/vagy JavaScript adatszerkezetet generálnunk, adatforrásként elég neki egy HTML oldalba ágyazott táblázat!

Jellemzők

  • HTML táblázat, mint adatforrás
  • interaktív megjelenítés
  • címkék használata
  • jelmagyarázat
  • testreszabható tengelyfeliratok
  • öt féle diagram típus

Implementálás

JavaScript

Mivel a plugin a Google Charts szolgáltatásán alapszik, implementálásnál ne feledkezzünk meg a Google jsapi-ról sem, amelynél fontos, hogy a gvChart plugin előtt legyen beágyazva!

            <script type="text/javascript" src="http://www.google.com/jsapi"></script>
            <script type="text/javascript" src="js/jquery.js"></script>
            <script type="text/javascript" src="js/jquery.gvChart-0.1.min.js"></script>
          

Deklaráció

            gvChartInit();

            $(document).ready(function() {
              jQuery('#myTable').gvChart({
                chartType: 'ColumnChart',
                gvSettings: {
                  vAxis: { title: 'Függőleges tengely felirata' },
                  hAxis: { title: 'Vízszintes tengely felirata' },
                  width: 720,
                  height: 300,
                }
              });
            });
          

Használat

Hogy a plugin megfelelően működjön, vannak bizonyos követelmények a táblázat felépítésével kapcsolatban:

  • Caption tag használata - diagram cím
  • thead és tbody tag-ek használata
  • az egyes sorokon belül kezdő th elem használata - aktuális adatsor cím

A táblázat felépítésének struktúrája kicsit szemléletesebben:

            <table id="pelda">
              <caption>A diagram/táblázat címe</caption>

              <thead>
                <tr>
                  <th>Cím 1</th>
                  <th>Cím 2</th>
                  <th>...</th>
                </tr>
              </thead>

              <tbody>
                <tr>
                  <th>Első adatsor címe</th>
                  <td>Adat 1</td>
                  <td>Adat 2</td>
                  <td>...</td>
                </tr>
                <tr>
                  <th>Második adatsor címe</th>
                  <td>Adat 1</td>
                  <td>Adat 2</td>
                  <td>...</td>
                </tr>
                <tr>
                  ...
                </tr>
              </tbody>
            </table>
          

Teljes paraméterlista

  • chartType: a diagram típusa (AreaChart | LineChart | BarChart | ColumnChart | PieChart)
    (alapértelmezett: 'areaChart')
  • hideTable: az eredeti táblázat mutatása a diagram alatt (true | false)
    (alapértelmezett: true)
  • gvSettings: ezen paraméterben egyéb Google Charts beállítások adhatók meg. Bővebb információ a Google Code oldalán (alapértelmezett: null)