Rappresentazione semantica di un grafico
https://stackoverflow.com/questions/316837
-
11-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Sto ricodificando un vecchio sito che contiene un grafico simile a questo:
alt text http://dl.getdropbox.com/u/240752 /rental-chart.gif
Come sarebbe rappresentato questo grafico con HTML puro? Non sopporto di includerlo solo come immagine.
Sto pensando a una tabella, appena sostituita con un'immagine, o forse sovrapposta a righe di tabella posizionate in modo assoluto, ma penso che potrebbe essere un po 'fragile.
Eventuali suggerimenti sono stati accolti.
Soluzione
Cosa c'è che non va nell'immagine?
La maggior parte delle volte quando vedi informazioni sul grafico sul Web è un .jpg o .png.
generatoTutti quei designer hanno sbagliato qualcosa?
Qualsiasi tentativo di tracciare il grafico usando tabelle e colori backgroud non sarà comprensibile a una persona con problemi di vista e, con ogni probabilità, non verrà visualizzato correttamente su un browser che non è in grado di gestire le immagini.
Usa l'immagine e hai un " alt " testo con una vera descrizione inglese " Un grafico che mostra il prodotto ACME costa solo $ 49 rispetto ai concorrenti: Società di noleggio 4 a $ 51 .......
Altri suggerimenti
<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>
O qualcosa di simile. Dovresti specificare le larghezze con CSS e nascondere & Quot; cost & Quot; campate classificate con css.
Sono stato tentato di utilizzare un elenco di definizioni, ma sarebbe stato più difficile ottenere le associazioni gerarchiche nel CSS.
il vantaggio di questo markup è quando viene visualizzato senza dati di stile, se mantiene gran parte del suo significato originale:
Price for two weeks
Company 1 $78 Company 2 $74 Company 3 $60 Company 4 $55 Acme Product $49.95
Modello tabella:
Ho pensato di provare almeno il suggerimento di Liams usando le tabelle, in realtà funziona abbastanza bene, solo per aggiungere le sfumature di sfondo e siamo pronti.
Scorri verso il basso per vederlo in azione (scadrà piuttosto rapidamente) http: // www. webdevout.net/test?03
Il contenuto originale segue
<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;
}
Bene, un grafico è un elemento grafico, suppongo che tu voglia che i dati siano accessibili sia ai browser di solo testo che ai motori di ricerca (?): in questo caso l'utilizzo di un <table> per i dati presentati in un grafico è in realtà corretto . So che molte persone hanno paura dei tavoli, perché tutti parlano di & Quot; table-less & Quot; design. Ma usare le tabelle per i dati tabulari è quello a cui erano destinate le tabelle.
Avrei messo una tabella sotto (o sopra, oltre ecc.) l'immagine del grafico, con i dati visualizzati nella tabella. Un grafico è buono per visualizzare le differenze e non così per vedere i valori reali; quindi anche un tavolo è un buon complemento alla grafica.
Se il grafico non è molto complesso (come in questo esempio) potresti anche aggiungere un alt-text con una semplice descrizione inglese del grafico, qualcosa del genere:
<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" />
Un lettore di testo non dovrebbe avere problemi a leggere questo in modo significativo.
Mi sembra di ricordare alcuni post utili su questo argomento. Potresti scoprire che alla fine un'immagine semplice è la migliore dal punto di vista del rapporto costi-benefici, ma questo articolo ti dirà tutto ciò che potresti voler sapere sull'uso di html e css per disegnare grafici a barre.
Per coincidenza, dopo aver pubblicato questo, ho guardato ieri everyblock.com e ho notato che hanno un'implementazione particolarmente buona di grafici in html / css che vale la pena guardare.
Potresti anche considerare di avere solo una tabella nel tuo ampli HTML &; quindi utilizzare Javascript per generare la tabella: http://www.wait-till-i.com/2008/01/08/generating-charts-from-accessible-data-tables-using-the-google -charts-api /
Ma per un grafico come l'immagine che hai fornito - dove è solo un'immagine di marketing e i valori non hanno un significato reale - allora solo una buona descrizione del testo alternativo dovrebbe andare bene.
Vedi l'ottimo articolo sui CSS per gli istogrammi sul sito Apples to Oranges.
(Modifica: è lo stesso link pubblicato da @Sam Murray-Sutton sopra - scusa)
