0

Пробовал на css с помощью border, но возникли проблемы с шагом. Нужно реализовать в следующем соотношении: синий блок 27%, серый - 73%. В сети очень много js-библиотек с диаграммами, глаза разбегаются. Хотелось бы сделать как можно проще и понятней. введите сюда описание изображения

1
  • хм. что-то у меня в этом дубликате в решении не рисуется ничего. но там и другие ссылки есть. в общем и целом svg должно хватить для рисования
    – teran
    25 июн 2018 в 13:44

1 ответ 1

3

Вот, пример, стилизуйте под свои нужды:

.circle-chart__circle {
  animation: circle-chart-fill 2s reverse;
  transform: rotate(-90deg);
  transform-origin: center;
}

.circle-chart__circle--negative {
  transform: rotate(-90deg) scale(1, -1);
}

.circle-chart__info {
  animation: circle-chart-appear 2s forwards;
  opacity: 0;
  transform: translateY(0.3em);
}

@keyframes circle-chart-fill {
  to {
    stroke-dasharray: 0 100;
  }
}

@keyframes circle-chart-appear {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.grid {
  display: grid;
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 31em) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
<div class="grid">
  <section>
    <svg class="circle-chart" viewbox="0 0 33.83098862 33.83098862" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
      <circle class="circle-chart__background" stroke="#efefef" stroke-width="2" fill="none" cx="16.91549431" cy="16.91549431" r="15.91549431" />
      <circle class="circle-chart__circle" stroke="#00acc1" stroke-width="2" stroke-dasharray="30,100" stroke-linecap="round" fill="none" cx="16.91549431" cy="16.91549431" r="15.91549431" />
      <g class="circle-chart__info">
        <text class="circle-chart__percent" x="16.91549431" y="15.5" alignment-baseline="central" text-anchor="middle" font-size="8">30%</text>
        <text class="circle-chart__subline" x="16.91549431" y="20.5" alignment-baseline="central" text-anchor="middle" font-size="2">30% progress!</text>
      </g>
    </svg>
  </section>

</div>

2
  • Круто, спасибо! Еще один маленький вопрос, а можно выстроить текст внутри диаграммы в одну линию? Если брать пример из кода - чтобы 30% и 30% progrees! встали в линию. 25 июн 2018 в 16:22
  • да, если по ширине влезет, то можно 25 июн 2018 в 16:26

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.