制作饼图问题答案

【问题标题】：Making Pie Chart Issue制作饼图问题
【发布时间】：2019-12-05 10:32:10
【问题描述】：

我正在创建一个饼图，但没有成为我想要的。所以有人可以帮助我。

我想在下面的图像中制作图表。我现在想制作一个饼图作为图像。所以有人可以正确 html css 和 js 代码

<!DOCTYPE html>
<html>

<head>
  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  <script src="http://cdn.bootcss.com/easy-pie-chart/2.1.4/jquery.easypiechart.min.js"></script>
</head>
<style>
  .epie-chart {
    width: 150px;
    height: 150px;
    position: re;
  }
  
  .epie-chart p {
    display: inline-block;
    position: absolute;
    line-height: 24px;
    text-align: center;
    width: 114px;
    font-size: 39px;
    color: #ff6500;
  }
</style>

<body>
  <div class="epie-chart" data-percent="75">
    <p>75%</p>
  </div>
  <div class="epie-chart" data-percent="90">
    <p>90%</p>
  </div>
  <div class="epie-chart" data-percent="69">
    <p>69%</p>
  </div>
  <div class="epie-chart" data-percent="79">
    <p>79%</p>
  </div>
</body>
<script type="text/javascript">
  $(function() {
    $('.epie-chart').easyPieChart({
      easing: 'easeInOut',
      barColor: 'white',
      trackColor: 'blue',
      scaleColor: false,
      scaleLength: 5,
      lineCap: 'butt',
      lineWidth: 55,
      size: 110,
      rotate: 360,
      animate: {
        duration: 1000,
        enabled: true
      },
      onStep: function(from, to, percent) {
        $(this.el).find('.percent').text(Math.round(percent) + '%');
      }
    });
  });
</script>

</html>

但我想出现在这张图片中

【问题讨论】：

您尝试创建的图表类型称为“甜甜圈”（或甜甜圈）图表。有很多库可以非常简单地为您做到这一点。如果您尝试创建自己的学习练习，那么我建议您使用特定问题更新问题，因为现在它读作“为我编写代码”请求。
@RoryMcCrossan 如果你知道是一个饼图你可以在这里给代码谢谢你的建议。

标签： jquery html css pie-chart

【解决方案1】：

您需要更改lineWidth

$(function() {
  $('.epie-chart').easyPieChart({
    easing: 'easeInOut',
    barColor: 'white',
    trackColor: 'blue',
    scaleColor: false,
    scaleLength: 5,
    lineCap: 'butt',
    lineWidth: 20,
    size: 110,
    rotate: 360,
    animate: {
      duration: 1000,
      enabled: true
    },
    onStep: function(from, to, percent) {
      $(this.el).find('.percent').text(Math.round(percent) + '%');
    }
  });
});

.epie-chart {
  width: 110px;
  height: 110px;
  display: block;
  border-radius: 50%;
  border: 2px solid #EC5F51;
  position:relative;
}
.epie-chart:before{
    content: "";
    position: absolute;
    width: 75px;
    height: 70px;
    background: white;
    z-index: 0;
    border-radius: 50%;
    left: 17px;
    top: 20px;
    line-height: 114px;
    text-align: center;
    border: 1px solid;
}
.epie-chart p {
  display: inline-block;
  position: absolute;
  line-height: 24px;
  text-align: center;
  width: 114px;
  font-size: 39px;
  color: #ff6500;
}

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://cdn.bootcss.com/easy-pie-chart/2.1.4/jquery.easypiechart.min.js"></script>
<div class="epie-chart" data-percent="75">
  <p>75%</p>
</div>
<div class="epie-chart" data-percent="90">
  <p>90%</p>
</div>
<div class="epie-chart" data-percent="69">
  <p>69%</p>
</div>
<div class="epie-chart" data-percent="79">
  <p>79%</p>
</div>

【讨论】：

请问我有一个问题。如果您有想法，如何更改边框颜色？因为现在，TrunkColor 带有相同的边框颜色，但我想更改边框颜色。
我做了很多尝试来改变边框颜色，但没有改变我的边框颜色。请帮助解决这个问题。