无法设定圆的位置 [英] Circle Position Can't be Set

问题描述

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  height: 100vh;
  background: #0d0c2d;
}

.container {
  display: grid;
  grid-template-columns: repeat(1, 80px);
  grid-gap: 10px;
  margin: auto 0;

}

@media (min-width: 420px) and (max-width: 659px) {
  .container {
    grid-template-columns: repeat(2, 80px);

  }
}

@media (min-width: 660px) and (max-width: 899px) {
  .container {
    grid-template-columns: repeat(3, 80px);
  }
}

@media (min-width: 900px) {
  .container {
    grid-template-columns: repeat(4, 80px);
  }
}

.container .box {
  width: 100%;

}

.container .box h2 {
  display: block;
  text-align: center;
  color: #fff;

}

.container .box .chart {

  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 40px;
  line-height: 120px;
  height: 80px;
  color: #fff;
}

.container .box canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  width: 100%;
}

$(function() {
  $('.chart').easyPieChart({
    size: 80,
    barColor: "#17d3e6",
    scaleLength: 0,
    lineWidth: 15,
    trackColor: "#373737",
    lineCap: "circle",
    animate: 2000,
  });
});

我想使圆圈更紧密，但似乎不起作用.我只是尝试在此CSS上进行所有操作，但这里似乎没有任何工作.有谁知道如何解决这个问题?我应该改变哪一个来使圆圈更紧密?对于圆A和圆B以及圆C和圆D之间的间隙.

I want to make the circle closer, but it seems not to be working. I just try everything on this CSS and nothing seems to be working here. Does anyone know how to solve this? which one should I change to make the circle closer? For the gap between circle A and B and C and D.

更新 js和css的大小已经调整，但是行更宽了，可以解决吗?

UPDATE the js and css already been resized , but the line is wider , any sollution ?

推荐答案

只需更改 .container 的样式，像这样的规则 grid-gap (我将其更改为例如 30px )

Just change your style for .container the rule grid-gap like this (I changed it to 30px for example)

$(function() {
  $('.chart').easyPieChart({
    size: 160,
    barColor: "#17d3e6",
    scaleLength: 0,
    lineWidth: 15,
    trackColor: "#373737",
    lineCap: "circle",
    animate: 2000,
  });
});

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  height: 100vh;
  background: #0d0c2d;
}

.container {
  display: grid;
  grid-template-columns: repeat(1, 160px);
  /* Use this rule to control the space between the circles for example I changed it to 30px*/
  grid-gap: 30px;
  margin: auto 0;
}

@media (min-width: 420px) and (max-width: 659px) {
  .container {
    grid-template-columns: repeat(2, 160px);
  }
}

@media (min-width: 660px) and (max-width: 899px) {
  .container {
    grid-template-columns: repeat(3, 160px);
  }
}

@media (min-width: 900px) {
  .container {
    grid-template-columns: repeat(4, 160px);
  }
}

.container .box {
  width: 100%;
}

.container .box h2 {
  display: block;
  text-align: center;
  color: #fff;
}

.container .box .chart {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 40px;
  line-height: 160px;
  height: 160px;
  color: #fff;
}

.container .box canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  width: 100%;
}

<div class="container">
  <div class="box">
    <div class="chart" data-percent="73" data-scale-color="#ffb400">73%</div>
    <h2>Html</h2>
  </div>
  <div class="box">
    <div class="chart" data-percent="90" data-scale-color="#ffb400">90%</div>
    <h2>Css</h2>
  </div>
  <div class="box">
    <div class="chart" data-percent="85" data-scale-color="#ffb400">85%</div>
    <h2>Javascript</h2>
  </div>
  <div class="box">
    <div class="chart" data-percent="95" data-scale-color="#ffb400">95%</div>
    <h2>Photoshop</h2>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/easy-pie-chart/2.1.6/jquery.easypiechart.min.js"></script>

这篇关于无法设定圆的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！