Мне нужно сделать простой индикатор прогресса бара населения стран.
Мне нужен бар с зеленой полосой прогресса для хорошего количества и еще одна цветная часть для плохой суммы, а количество в процентах, где-то посередине бара.
Предположим, что полоса имеет ширину 50 пикселей и высоту 15 пикселей. Подумайте о статическом индикаторе выполнения, как показано ниже.
Я сделал это перед использованием jquery и фонового div с двумя дополнительными div, расположенными поверх него для хороших и плохих индикаторов, а затем позиционированным div над ним для отображения текста.
Однако мне интересно, есть ли еще более простой решение с HTML5-canvas, SVG или CSS.
Поскольку этот тайм-контроль будет отображаться в каждом ряду длинной таблицы, цель состоит в том, чтобы уменьшить DOM, повысить читаемость и повторное использование.
Я знаю, что есть библиотеки, которые это делают, но я хотел использовать его в качестве учебного опыта. Решение должно быть либо не скриптом, либо только JS, либо JS с jquery.
Мой макет
Ответ
Вот выполнение с помощью SVG вашего макета:
$("svg.tbc").each(function(i, item) {
var $item = $(item);
var rate = $item.parent().find(".country").attr("rate");
$item.find(".bar").attr("width", rate);
$item.find("text").text(rate);
});
.tbc {
width: 50px;
height: 15px;
}
.tbc .bg {
fill: gold;
fill-opacity: 0.5;
}
.tbc .bar {
fill: blue;
fill-opacity: 0.5;
}
.tbc text {
font-size: 8pt;
font-family: Calibri, sans-serif;
font-weight: bold;
fill: blue;
}
.country {
display: inline-block;
width: 200px;
}
.info {
margin-top: 20;
font-size: 10px;
}
Urban population rate by country
Комментариев нет:
Отправить комментарий