Семантическое представление диаграммы
https://stackoverflow.com/questions/316837
-
11-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Я перекодирую старый сайт, который содержит диаграмму, похожую на эту:
альтернативный текст http://dl.getdropbox.com/u/240752/rental-chart.gif
Как бы эта диаграмма была представлена с помощью чистого HTML?Мне неприятно просто включать это в качестве изображения.
Я имею в виду таблицу, просто замененную изображением или, возможно, наложенную на абсолютно позиционированные строки таблицы, но я думаю, что это может быть немного хрупким.
Приветствуются любые предложения.
Решение
Что не так с изображением?
В большинстве случаев, когда вы видите информацию о диаграмме в Интернете, это сгенерированный файл .jpg или .png.
Неужели все эти дизайнеры что-то напутали?
Любая попытка нарисовать диаграмму с использованием таблиц и фоновых цветов будет непонятна человеку с ослабленным зрением и, по всей вероятности, не будет корректно отображаться в браузере, который не может обрабатывать изображения.
Используйте изображение и текст "alt" с реальным описанием на английском языке "Диаграмма, показывающая продукт ACME, стоит всего 49 долларов по сравнению с конкурентами:Прокатная компания 4 за 51 доллар .......
Другие советы
<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>
Или что-то подобное.Вы бы указали ширину с помощью CSS и скрыли промежутки с классом "стоимость" с помощью css.
У меня возникло искушение использовать список определений, но тогда было бы сложнее получить иерархические ассоциации в CSS.
Преимущество этой разметки заключается в том, что при рендеринге без каких-либо данных стиля она сохраняет большую часть своего первоначального значения:
Цена за две недели
Company 1 $78 Company 2 $74 Company 3 $60 Company 4 $55 Acme Product $49.95
Модель таблицы:
Я решил, что, по крайней мере, попробую предложение Лиама с использованием таблиц, на самом деле это работает довольно хорошо, просто добавьте фоновые градиенты, и все готово.Прокрутите страницу вниз, чтобы увидеть его в действии ( срок действия истекает довольно быстро ). http://www.webdevout.net/test?03
Ниже Приводится Оригинальное содержание
<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;
}
Ну, диаграмма - это графический элемент, я предполагаю, что вы хотите, чтобы данные были доступны как для текстовых браузеров, так и для поисковых систем (?):в этом случае с помощью <table> ибо данные, представленные на графике, на самом деле правильный.Я знаю, что многие люди боятся столов, потому что все эти разговоры о дизайне без столов.Но использование таблиц для табличных данных - это то, для чего они были предназначены.
Я бы поместил таблицу ниже (или выше, помимо и т.д.) Изображения диаграммы с данными, отображаемыми в таблице.Диаграмма хороша для визуализации различий и не очень хороша для просмотра фактических значений;поэтому таблица также является приятным дополнением к графике.
Если диаграмма не очень сложная (как в этом примере), вы также можете просто добавить альтернативный текст с простым описанием диаграммы на английском языке, что-то вроде этого:
<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" />
У читателя текста не должно возникнуть проблем с осмысленным прочтением этого текста.
Кажется, я помню несколько полезных постов на эту тему.Вы можете обнаружить, что в конечном итоге простое изображение является лучшим с точки зрения затрат и выгод, но эта статья я расскажу вам все, что вы когда-либо хотели знать об использовании html и css для рисования гистограмм.
По случайному совпадению, после публикации этой статьи я посмотрел на everyblock.com вчера я заметил, что у них есть особенно хорошая реализация графиков в html / css, на которую стоило бы обратить внимание.
Вы также могли бы рассмотреть возможность наличия просто таблицы в вашем HTML, а затем использовать Javascript для создания таблицы: http://www.wait-till-i.com/2008/01/08/generating-charts-from-accessible-data-tables-using-the-google-charts-api/
Но для диаграммы, подобной приведенному вами изображению, где это всего лишь маркетинговое изображение, а значения не имеют реального значения, должно подойти просто хорошее текстовое описание alt.
Смотрите замечательную статью о CSS для получения гистограмм на сайте Apple to Oranges.
(Редактировать:это та же самая ссылка, опубликованная @Сэм Мюррей-Саттон выше - извините)
