Как я могу получить диаграмму пончик с процентным показом - PullRequest
Новая
       5

Как я могу получить диаграмму пончик с процентным показом

0 голосов
/ 14 февраля 2019

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

Пример: если указание для 60%, начальные 60% звонка должны быть зеленого цвета, а остальные 40% по умолчанию серого цвета.

Теперь основной запрос приходит туда, где нам нужноиметь процентное заполнение в виде градиента 2 цветов (синий и зеленый).

В том же примере, что и выше, для указания 60% мы должны получить начальные заполненные 30%, чтобы быть голубыми, а оставшиеся заполненные 30%должен быть зеленым, а остальные 40% - серым по умолчанию.

аналогично для индикации 90% => 30% синий + 60% зеленый + 10% серый.

Я пробовал использовать линейнуюградиент с использованием SVG, но не в состоянии достичь синего цвета, чтобы охватить до 30% только по часовой стрелке (в настоящее время он идет в обе стороны). Вы можете видеть, что 60% также имеют смесь синего цвета, которую я не хочу.

поэтому я хотел бы узнать, как можно достичь диапазона индикатора до 30%, начиная только по часовой стрелке, но не должен охватывать как левую, так и правую сторону кольца.Вы можете увидеть это поведение в приведенном ниже фрагменте кода.

Также мне нужно, чтобы кольцевая анимация работала в IE, так как в настоящее время она работает в Chrome, но не в IE.

Пожалуйста, дайте мне знать, если есть лучший / простой способ для достижения этой цели.выглядеть и чувствовать. 

.ec-custom-percent-container {
	 background: #f5f5f5;
}
 .ec-custom-percent-container .ec-custom-inner {
	 margin: 10px auto;
}
 .ec-custom-percent-container .ec-custom-inner .ec-custom-circular-chart {
	 width: 110px;
	 height: 110px;
}
  .ec-custom-percent-container .ec-custom-inner .ec-custom-circular-chart  .ec-custom-percentage {
               
			   font-size:10px;
			   color:black;
			       fill: black;
                text-anchor: middle;
}
            
             .ec-custom-percent-container .ec-custom-inner .ec-custom-circular-chart .ec-custom-text{
              
			  font-size:3px;
			   color:black;
			       fill: black;
                text-anchor: middle;
            }  
			
 .ec-custom-percent-container .ec-custom-inner .ec-custom-circular-chart .ec-custom-circle-bg {
	 fill: none;
	 stroke: #c9c9c9;
	 stroke-width: 3.8;
}
 .ec-custom-percent-container .ec-custom-inner .ec-custom-circular-chart .ec-custom-circle {
	 fill: none;
	 stroke-width: 3.6;
	 stroke-linecap: round;
	 animation: progress 1s ease-out forwards;
}
 .ec-custom-percent-container .ec-custom-inner .ec-custom-circular-chart .ec-custom-percentage {
	 text-anchor: middle;
}
 .ec-custom-percent-container .ec-custom-inner .ec-custom-circular-chart .ec-custom-text {
	 text-anchor: middle;
}
 @keyframes progress {
	 0% {
		 stroke-dasharray: 0 100;
	}
}
 .ec-custom-percent-container .ec-custom-inner .ec-custom-circular-chart.ec-custom-fill .ec-custom-circle {
	 stroke: url(#gradient);
}
<div class="ec-custom-percent-container">
  <div class="ec-custom-inner">
    <svg viewBox="0 0 36 36" class="ec-custom-circular-chart ec-custom-fill">
      <defs>
          <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
            <stop offset="0%" stop-color="#1b5fcd" />
            <stop offset="30%" stop-color="#17b68a" />
            <stop offset="100%" stop-color="#17b68a" />
          </linearGradient>
      </defs>
      <path class="ec-custom-circle-bg"
        d="M18 2.0845
        a 15.9155 15.9155 0 0 1 0 31.831
        a 15.9155 15.9155 0 0 1 0 -31.831"
      />
      <path class="ec-custom-circle"
      stroke-dasharray="90,100" 
        d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831"
      />
      <text x="18" y="20.35" class="ec-custom-percentage">90%</text>
      <text x="17" y="24" class="ec-custom-text">Match</text>
    </svg>
  </div>
</div>
...