Живая CSS половина круговой диаграммы в местном веб-сайте

Question

Я хочу создать половину круговой диаграммы с помощью CSS, у меня есть код, где я настраиваю график, используя данные из моей базы данных, через {{temp_f}}, Проблема в том, что мне нужно обновить страницу, чтобы увидеть изменения. Я смотрю на jquery ajax для автоматического обновления данных, но не могу найти решение. У кого-нибудь есть идеи, как это сделать?

.pie {
  margin: auto;
  position: relative;
  width: 200px;
  height: 100px;
  border-radius: 200px 200px 0 0;
  overflow: hidden;
}

.pie::after {
  transform: rotate( {{temp_x}}deg);  /*  set rotation degree  */
  background: linear-gradient(to right, rgba(51, 102, 255, 1) 50%, rgba(255, 0, 0, 1) 100%);
  transform-origin: center bottom;
}

.pie::before {
  border: 2px solid black;
}

.pie .overlay {
  top: 8px;  /*  match border width  */
  left: 8px;  /*  match border width  */
  width: calc(100% - 16px);  /*  match border width times 2  */
  height: calc(200% - 10px);  /*  match border width times 2  */
  border-radius: 100%;
  background: #062F43;
  z-index: 1;  /*  move it on top of the pseudo elements  */
}

.pie *,
.pie::before,
.pie::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  box-sizing: border-box;
}

<div class="pie">
  <span class="overlay"></span>
</div>

Answer 1

Вы можете рассмотреть CSS-переменную для степени, которую вы можете легко настроить с помощью JS, тогда вы можете использовать этот код в вызове AJAX:

var pie = document.querySelector('.pie');
pie.style.setProperty("--rot", "80deg");

.pie {
  margin: auto;
  position: relative;
  width: 200px;
  height: 100px;
  border-radius: 200px 200px 0 0;
  overflow: hidden;
  --rot: 90deg;
}

.pie::after {
  transform: rotate(var(--rot));
  /*  set rotation degree  */
  background: linear-gradient(to right, rgba(51, 102, 255, 1) 50%, rgba(255, 0, 0, 1) 100%);
  transform-origin: center bottom;
}

.pie::before {
  border: 2px solid black;
}

.pie .overlay {
  top: 8px;
  /*  match border width  */
  left: 8px;
  /*  match border width  */
  width: calc(100% - 16px);
  /*  match border width times 2  */
  height: calc(200% - 10px);
  /*  match border width times 2  */
  border-radius: 100%;
  background: #062F43;
  z-index: 1;
  /*  move it on top of the pseudo elements  */
}

.pie *,
.pie::before,
.pie::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  box-sizing: border-box;
}

<div class="pie">
  <span class="overlay"></span>
</div>