CSS Data bars

Í Excel 2007 sem er í þróun hjá Microsoft er sniðug viðbót sem gerir manni kleyft að smella gröfum í bakgrunn töflu reitan sem verið er að vinna með. Mér þótti þetta svo töff að ég henti upp í snatri einfaldri útgáfu af svipaðri virkni sem hægt er að nota í HTML töflum. Kóðinn notar prototype kóðasafnið sem grunn til einföldunar.

Til þess að fá gröfin til að virka þarf aðeins að bæta við „perc“ class nafni við þá reiti í töflunni þinni sem innihalda prósentu tölur og þú vilt að sýni graf.

JS:

function fn_perc() {
	var cells = document.getElementsByClassName("perc");
	var cwidth = Element.getDimensions(cells[0]).width;
	var per = 0;
	for(var i=0;i < cells.length;i++) {
		per = parseInt(cells[i].innerHTML);
		pxsize = parseInt(cwidth-(cwidth*per/100));
		pxsize += "px 0px";
		Element.setStyle(cells[i], {backgroundPosition: pxsize});
	}
}

CSS:

#content table td.perc {
	background: url(../img/perc.gif) no-repeat;
	background-position: -500px 0px;
	width: 100px;
}

JS Kóðinn þarf svo að keyra „onload“ eða þegar síðan hefur klárað að hlaðast. Ég nota svo .gif mynd (perc.gif, 100 x 25 pixlar) sem ég færi til eftir því hvað grafið á að vera stórt í hverjum reit.

Uppfært: Hérna er .zip með kóðanum til að prófa

12 thoughts on “CSS Data bars

  1. Frábært, hlakka til að sjá sýnidæmi við tækifæri.

    Ég ætla einnig að benda þér að keyra alltaf parseInt með tveimur parameterum, þá seinni 10.

    parseInt tekur við grunntölu sem á að nota þegar verið er að „parsa“ töluna úr strengnum. Ef engin er gefin, þá reynir hún að finna það út sjálf sem þýðir að þú getur t.d. fengið einkennilegar niðurstöður ef tölunni 0 er skeytt fyrir framan strenginn.

    Sjá http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Global_Functions:parseInt

  2. Með því að breyta línum 11 og 12 í script.js í þetta:

    per = parseInt(cells[i].innerHTML, 10);
    pxsize = parseInt((cwidth*per)/100, 10);

    …þá fékk ég miklu „eðlilegar útlítandi“ súlur – að mínu mati.

  3. Í huganum er ég strax búinn að forrita alls konar viðbætur við þetta. Stillingar á því hvernig á að þefa uppi elementin með prósentutölunum, og hvort súlurnar eiga að lengjast lárétt eða lóðrétt. Svo dettur mér í hug að kannski væri betra að endurskrifa DOMið inn í HTML elemetinu sem inniheldur töluna og nota <img /> í stað background-position

    …og svo fattaði ég að þú ætlaðir þessi aldrei að vera neitt meira en bara súper lítið og einfalt widget sem gerir nákvæmlega einn hlut á nákvæmlega einn hátt.

    Sniðugt dót.

  4. Andri, kannt þú einhverja leið til að annað hvort lesa background-position eða background-image upplýsingar á elementum í Javascript?

    Ég er búinn að prófa að nota Prototype skipunina Element.getStyle(cells[i], "backgroundPosition") (og "backgroundImage") en gríp alltaf í tómt.

    P.S. best að prófa hvort *markdown* `syntax` [virki](http://mar.anomy.net).

  5. Samkvæmt PPK er þetta víst ekki svo auðvelt.

    „Mozilla knows only a very few styles. border[-something], for instance, is empty in Mozilla, though Opera faithfully reports the correct styles.“

  6. Amm… minns grunaði það. Og án þessara upplýsinga er manni annsi þröngt sniðinn stakkur með útlitið á þessum stöplum/súlum – nema maður sætti sig við að hafa þær hægri-jafnaðar. Bjakk.

    Þá mundi ég fara þá leið að injecta tveimur DOM nóðum í hvern reit.

    …og ég tapaði mér áðan, útfærði þessa pæling ásamt smá fleira sem ég hef verið að pæla í undanfarið – m.a. eftir umræður á síðunni hans Dustin Diaz:

    window.onload = function() {
    fn_perc(); // start with default values
    // fn_perc(null, null, null, „height“);
    // ^– turn the bars 90° :-)
    };

    var fn_perc = function(cells, barClass, valClass, axis)
    {
    // cells er by default listi af elementum
    // til að setja súlur inn í.
    if (!cells || typeof(cells) == „string“)
    {
    // eða CSS-like selector
    cells = $$(cells || „td.perc“);
    // ^– $$(selector) líklega hraðara en
    // document.getElementsByClassName().
    // Það er næs að geta haft þetta stillanlegt
    }
    barClass = barClass || „percbar“;
    valClass = valClass || „percvalue“;
    axis = axis || „width“;
    axis2 = (axis == „width“) ? „height“:“width“;

    var h = [„“+
    „,

    „“
    ];

    for (var i = 0, cell; cell = cells[i]; i++)
    // ^– ívið hraðara en (i<cells.length)
    {
    var cellWidth = cell.offsetWidth;
    // ^– ekki allir reitir eru jafnbreiðir
    var text = cell.innerHTML;
    var perc = parseInt(text, 10);
    if (typeof(perc) == „number“)
    {
    cell.innerHTML = h[0]+perc+h[1]+text+h[2];
    }
    }
    };

  7. Amm… minns grunaði það. Og án þessara upplýsinga er manni annsi þröngt sniðinn stakkur með útlitið á þessum stöplum/súlum – nema maður sætti sig við að hafa þær hægri-jafnaðar. Bjakk.

    Þá mundi ég fara þá leið að injecta tveimur DOM nóðum í hvern reit.

    …og ég tapaði mér áðan, útfærði þessa pæling ásamt smá fleira sem ég hef verið að pæla í undanfarið – m.a. eftir umræður á síðunni hans Dustin Diaz:

    window.onload = function() {
      fn_perc();  // start with default values
      // fn_perc(null, null, null, "height");
      //  ^-- turn the bars 90° :-) 
    };
     
    var fn_perc = function(cells, barClass, valClass, axis)
    {
      // cells er by default listi af elementum
      // til að setja súlur inn í.
      if (!cells || typeof(cells) == "string")
      {
        // eða CSS-like selector
        cells = $$(cells || "td.perc");
        //  ^-- $$(selector) líklega hraðara en
        //      document.getElementsByClassName().
        // Það er næs að geta haft þetta stillanlegt
      }
      barClass = barClass || "percbar";
      valClass = valClass || "percvalue";
      axis = axis || "width";
      axis2 = (axis == "width") ? "height":"width";
     
      var h = ["<span class='"+barClass+"'>"+
        "<i style='"+axis+":",
     
        "%'></i></span><span class='"+valClass+"'>",
     
        "</span>"
      ];
     
      for (var i = 0, cell; cell = cells[i]; i++)
      //  ^-- ívið hraðara en (i<cells.length)
      {
        var cellWidth = cell.offsetWidth;
        //  ^-- ekki allir reitir eru jafnbreiðir
        var text = cell.innerHTML;
        var perc = parseInt(text, 10);
        if (typeof(perc) == "number")
        {
          cell.innerHTML = h[0]+perc+h[1]+text+h[2];
        }
      }
    };

  8. …og hér er dæmi um CSS sem lúkkar þetta til:

    #content table td.perc {
      border-left: 1px solid #94C8D7;
      width: 150px;
    }
    td.perc span.percbar {
      background-color : #ff9;
      text-align : left;
      float : left;
      width : 130px;
      margin-right : -100%;
      margin-left : -10px;
    }
    td.perc span.percbar i {
      display : block;
      height : 1.33em;
      background-color : #cde;
      overflow : hidden;
    }
    td.perc span.percvalue {
      position : relative;
    }

Færðu inn athugasemd

Skráðu umbeðnar upplýsingar að neðan eða smelltu á smámynd til að skrá þig inn:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Breyta )

Twitter picture

You are commenting using your Twitter account. Log Out / Breyta )

Facebook photo

You are commenting using your Facebook account. Log Out / Breyta )

Google+ photo

You are commenting using your Google+ account. Log Out / Breyta )

Tengist við %s