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.
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
Árni Hermann
ágúst 31, 2006 at 9:27 pm
Takk fyrir ábendinguna ;) Búinn að uploada kóðanum ef þú hefur áhuga.
Andri
september 1, 2006 at 3:44 pm
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.
Már
september 1, 2006 at 4:09 pm
…þ.e. þá teiknast súlurnar “negatívar” frá vinstri til hægri, eins og maður er vanur að lesa svona súlur.
Már
september 1, 2006 at 4:10 pm
Já það rétt, hafði ekki hugsað útí þetta. En auðvitað á þetta vera frá vinstri til hægri eins og maður er vanur að lesa.
Andri
september 1, 2006 at 4:22 pm
Í 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.
Már
september 1, 2006 at 9:50 pm
Andri, kannt þú einhverja leið til að annað hvort lesa
background-positioneðabackground-imageupplý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).
Már
september 4, 2006 at 6:14 pm
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.”
Andri
september 4, 2006 at 6:43 pm
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];
}
}
};
Már
september 4, 2006 at 10:26 pm
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];
}
}
};
Már
september 4, 2006 at 10:39 pm
Bah… og auddað er línan
var cellWidth = cell.offsetWidth;alveg óþörf núna… :-)
Már
september 4, 2006 at 10:40 pm
…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;
}
Már
september 4, 2006 at 11:09 pm