Сглаживание радиальных элементов

Вопрос-ответ HTML/CSS
1

Пытаюсь сделать радиальный чарт на хтмл. Использую для это-го по две половинки с каждой стороны графа и в зависимости от значниея (>,< 50) поворачиваю/скрываю половинки

но

Столкнулся с проблемой, что из-за сглаживания или еще чего, нижний круг с цветом немного вылезает наружу.
Это можно как-то пофиксить? Или бросить эту затею и делать другими технологиями?

<div class="rp-radial-chart" ng-style="setColor()">
    <div class="before" ng-style="setColor()"></div>
    <div class="left-part" ng-style="leftPart()"></div>
    <div class="center"></div>
    <div class="right-part" ng-style="rightPart()"></div>
    <div class="after" ng-style="setColorAfter()"></div>
</div>


@size: 60px;
@backChartColor: #f8f9fb;
@innerCircle: 44px;

 .rp-radial-chart {
  width: @size;
  height: @size; 
  display: block;
  border-radius: @size/2;
  position: relative;

.center {
    display: block;
    position: absolute;
    height: @innerCircle;
    width: @innerCircle;
    background: white;
    z-index: 3;
    border-radius: @innerCircle/2;
    top: (@size - @innerCircle)/2;
    left: (@size - @innerCircle)/2;
}

.before {
    display: block;
    position: absolute;
    width: @size/2;
    height: @size;
    border-radius: @size/2 0 0 @size/2;
    z-index: 1;
}

.after {
    display: block;
    position: absolute;
    width: @size/2;
    height: @size;
    left: @size/2;
    border-radius: 0 @size/2 @size/2 0;
    z-index: 1;
  }

.left-part {
    display: block;
    position:absolute;
    width: @size/2;
    height: @size;
    background: @backChartColor;
    .transform-origin(right, center);
    transform: rotate(0deg);
    border-radius: @size/2 0 0 @size/2;
    z-index: 2;
  }

 .right-part {
    display: block;
    position: absolute;
    width: @size/2 ;
    height: @size;
    left: @size/2;
    background: @backChartColor;
    .transform-origin(left, center);
    /*transform: rotate(0deg);*/
    border-radius: 0 @size/2 @size/2 0;
    z-index: 2;
  }
}
2

Если нет требования делать самописным, я бы воспользовался готовой библиотекой, например amCharts. Свой “велосипед” классно пилить в образовательных целях, в остальном же он скорее всего проиграет во времени разработки, расширяемости и тестируемости.

1 лайк
3

Да, скорее в оброзовательных целях делал. Использовал http://www.highcharts.com/, но мне показались они слижком громозткими для моего UI, мне нужны были просто радиальные прогрессы

Почитал про svg

<svg ng-attr-width="{{size}}" ng-attr-height="{{size}}" class="rp-radial-chart">
    <circle ng-attr-r="{{size/4}}" ng-attr-cx="{{size/2}}" ng-attr-cy="{{size/2}}" class="pie" ng-style="setColor()"/>
    <circle ng-attr-r="{{size/2.7}}" ng-attr-cx="{{size/2}}" ng-attr-cy="{{size/2}}" class="center"/>
</svg>

ну и стили прикрутил, очень просто вышло и то, что мне нужно было. Накладывание радиальных элементов друг на друга выходит боком из-за сглаживания. И вообще, я сделал вывод, что это не та задача которую стоит решать с html/css