Создание гистограммы только с помощью HTML и CSS

[rostislav505]

Привет, ребята,

Я работаю над личным проектом, ищу способы создания диаграмм, используя только HTML и CSS. Я начал с гистограмм (горизонтальных и вертикальных), поскольку их создание казалось проще всего.

На данный момент я разработал 2 метода и подумываю о третьем (ищу больше):

1. Простые элементы div один над другим (для горизонтальных гистограмм). Размер панели задается с использованием переменных CSS, а имена полос передаются как атрибуты CSS. Для вертикальных гистограмм я просто поворачиваю все на 90 градусов.

2. Использование CSS flexbox все упрощает еще больше. Мне не нужно вращать вертикальные/горизонтальные гистограммы. Я просто переключаюсь между строкой или столбцом с гибким направлением.

3. Возможно, я сделаю версию SVG (что было бы более очевидным выбором), но я думаю, что это уже не гистограмма HTML.

4. С нетерпением жду ваших идей...

Для справки, вот мое сообщение в блоге (все еще работаю над ним):
Гистограмма HTML — создавайте красивые гистограммы только с помощью HTML — http://www.coding-dude.com/wp/html5/bar-chart-html/

Спасибо!

 

[Khan2]

Я думаю, что у вас очень хорошая мысль: это действительно табличные данные, и
здесь имеет больше смысла. Было бы здорово, если бы добавление в таблицу класса .barchart превратило ее в гистограмму.

Я также сейчас изучаю тег , который также кажется семантически подходящим.

Это отличная штука, я могу добавить все это в свою статью, и она станет довольно обстоятельной. Я отдам вам должное за идею стола. Спасибо!

кстати, мне также нравится думать о себе как о «наладчике», так приятно познакомиться с тобой, друг-наладчик

 

[jess123]

Ха-ха-ха! Ваш ответ забавен. Не слишком полезно, но, конечно, весело.

Не сердись так, чувак, остынь!

Я, очевидно, не согласен с тем, что LESS бесполезен. Хотя бы для переменных, которые позволяют менять цвета полосок и это полезно.

Использование

• потенциально является еще одним решением, которое можно использовать для создания гистограммы, поэтому я рассмотрю его. Моя цель — найти лучший способ получить кусок HTML, который будет удобен в использовании и понятен тем, кто не обладает глубокими знаниями HTML и хочет быстро вставить гистограмму на свою страницу.
  
  Спасибо!

 

[серега13]

Еще нет идей?

На другом форуме я получил совет относительно тега . Для меня это что-то новое, но я начну читать и создавать еще один метод создания гистограмм HTML.

 

[Лев Трапезников]

Наступила бессонница, поэтому я добавил в этот каталог версию, которая с одной заменой классов, изменением идентификатора ввода/метки для глобального выбора/отмены выбора и изменением всех объявлений ширины на высоту дает вам другую ось.

https://cutcodedown.com/for_others/inegoita/tableChart.html

Отдайте должное «Джейсону Найту с сайта Cutcodedown.com», и пока вы предоставляете обратную ссылку на этот примерный каталог, я довольно спокойно к этому отношусь. Это часть того, почему весь мой каталог /for_others широко открыт и разблокирован, поскольку он содержит код, с которым я уже полтора десятилетия помогал людям, и оставляю его, чтобы другие могли поучиться на нем. (хотя мне следует сократить, часть этого кода становится длинной)

 

[v3rmili0n]

Хорошо, живая демонстрация здесь:

https://cutcodedown.com/for_others/inegoita/

Как и в большинстве моих примеров, каталог широко открыт для легкого доступа к липким кусочкам.

Он немного вырос по сравнению с тем, что я предполагал, но его функциональность также выросла за счет отображения/скрытия всех данных без использования всплывающих подсказок. Атрибут «title» — это мило, но вы не можете управлять им или стилизовать его, чаще всего это информация, которая должна существовать на странице в виде CDATA, а если это не так, значит, что-то не так с самим содержимым.

В каком именно месте это сияет? содержание есть ли еще... ну... СОДЕРЖАНИЕ. Семантически размечено со всей логической структурой, поэтому вы не говорите пользователям неэкранных носителей или устаревших браузеров сосать яйцо.

При этом все навороты в современных браузерах по-прежнему доступны практически без дополнительных усилий. Любой дополнительный вес более чем стоит улучшения функциональности.

Если у меня будет время завтра днем, я сделаю вертикальную версию... возможно, попытаюсь интегрировать обе версии в одну и ту же кодовую базу, поскольку они должен использовать одну и ту же разметку только с одним классом и атрибутом стиля в качестве различия.

--- изменить -- обязательно расширьте и сузьте окно, чтобы убедиться, что оно полностью адаптивно. Поскольку все это в EM, а не в пикселях, оно предполагает системную метрику, а использование vw и vh позволяет хорошо масштабировать его по размеру экрана... хотя ограничение ширины может потребоваться отрегулировать, если вокруг диаграммы есть столбцы. Слишком маленький размер, возвращение к обычной таблице, которую также получит IE11/более ранние версии. Прогрессивное улучшение: напишите то, что работает, а затем наложите поверх причудливые вещи, чтобы, если все безделушки и всякие штуки пропадут, пользователь все равно получит страницу с полезной/релевантной информацией. Именно для этого изначально был создан HTML.

Помните: в 99% случаев, когда вы видите размер шрифта, отступы или ширину в пикселях, это невежество и/или некомпетентность разработчика. У PX ОЧЕНЬ узкое окно, в котором его следует использовать.

 

[jadovitaja]

Самая большая проблема, которую я вижу, заключается в том, что - как и ваш неразборчивый белый текст на голубом фоне на вашем веб-сайте - то, как вы это делаете, переворачивает птицу с точки зрения удобства использования и доступности. Помните, прежде чем вы даже ДУМАЕТЕ о том, чтобы поиграть со стилем, вы должны написать свой контент, а ЗАТЕМ свою разметку, как будто стили тегов по умолчанию И ваш конечный стиль даже не существуют!

Таким образом, первым шагом было бы взять ТОЛЬКО контент и поместить его в простой текстовый редактор, как будто HTML вообще не существует.

<li>
<span style="height:85%">
<span>Your Blog</span>
34.97942%
</span>
</li><li>
<span style="height:23%">
<span>Medium</span>
9.46502%
</span>
</li><li>
<span style="height:7%">
<span>Tumblr</span>
2.88065%
</span>
</li><li>
<span style="height:38%">
<span>Facebook</span>
15.63786%
</span>
</li><li>
<span style="height:35%">
<span>Youtube</span>
14.40329%
</span>
</li><li>
<span style="height:30%">
<span>LinkedIn</span>
12.34567%
</span>
</li><li>
<span style="height:5%">
<span>Twitter</span>
2.05761%
</span>
</li><li>
<span style="height:20%">
<span>Other</span>
8.23045%
</span>
</ll>

Код (разметка): Затем вы размечаете его семантически. В этом случае у вас есть простой список значений, я бы не стал с ним сложнее, чем с UL/LI, поскольку его может быть проще стилизовать, хотя DL может быть более семантически правильным. Чтобы создать график, я бы поместил процент в диапазон (поскольку диапазон является встроенным, поэтому значения, отключенные в сценарии, по-прежнему будут отображаться правильно), а также текст в диапазон. nth-child или соседнего брата или сестры будет достаточно, чтобы применить большую часть их стиля.

Есть кое-что, о чем много говорят. В 99% случаев, когда вы видите style="" и в 100% случаев, когда вы видите

 

[Darkneof1t]

Я долгое время участвую в досках объявлений и списках рассылки старого образца (в основном профессиональных), начиная с конца 70-х годов. В девяностые что-то изменилось. Начался поток людей, которые относились к форумам и спискам рассылки как к платным услугам. Они задавали вопрос, просили быстрого ответа, никогда никому не рассказывая, какие исследования они уже провели для получения ответа, и злились, если вы спрашивали. Затем они исчезли бы, даже не спросив «как дела». Я упоминаю все это, чтобы подчеркнуть, насколько многие из нас ценят ваши последующие действия и просят права переиздать и указать полученный вами ответ. Раньше я считал это хорошими манерами. Его редкость теперь означает, что я не знаю, как его назвать.

Итак, я просто скажу спасибо,
Гэри