jquery - 本地网站中的实时 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

您可以考虑使用 JS 轻松调整程度的 CSS 变量，然后您可以在 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>