Stroke-dasharray到可视化数据，没有库

stroke-dasharray to visual data without libraries

本文关键字：数据 可视化 Stroke-dasharray      更新时间：2023-09-26

我试图在不使用库的情况下基于数据值动画svg圆圈的stroke-dasharray。

数据来自javascript计算，所以每个圆圈的笔画长度会不同。

代码如下:

或

var circle_1 = 20,
    circle_2 = 33,
    circle_3 = 42;
document.getElementById('circle_1').innerHTML = circle_1;
document.getElementById('circle_2').innerHTML = circle_2;
document.getElementById('circle_3').innerHTML = circle_3;
.container {
  text-align: center;
  height: 200px;
}
li {
  list-style: none;
  display: inline-block;
  margin: 100px 50px;
  position: relative;
  width: 100px;
  height: 100px;
}
circle {
  stroke: #222;
  fill: transparent;
  stroke-width: 3px
}
.result {
  position: absolute;
  top: 40%;
  left: 40%;
}
<div class="container">
  <li>
    <svg width="100" height="100">
      <circle cy="50" cx="50" r="40" stroke-dasharray="0em" stroke-dashoffset="0" />
    </svg>
    <div class="result" id="circle_1"></div>
  </li>
  <li>
    <svg width="100" height="100">
      <circle cy="50" cx="50" r="40" stroke-dasharray="0em" stroke-dashoffset="0" />
    </svg>
    <div class="result" id="circle_2"></div>
  </li>
  <li>
    <svg width="100" height="100">
      <circle cy="50" cx="50" r="40" stroke-dasharray="0em" stroke-dashoffset="0" />
    </svg>
    <div class="result" id="circle_3"></div>
  </li>
</div>

如果我理解正确的话，您需要使用SVG圆圈而不是库的饼状图。我最近做了一些类似的事情，这是我做的一个mixin:

http://codepen.io/Draccoz/pen/GJVJVM 

=pie-chart($size, $ring-size, $ring-color: false, $bg-size: 0, $bg-color: transparent)
  $d: $size - $ring-size
  width: $size
  height: $size
  >
  circle
    cx: $size / 2
    cy: $size / 2
    &:nth-child(1)
      r: $bg-size / 2
      @if $bg-color
        fill: $bg-color
    &:nth-child(2)
      font-size: $d * 1.01 * $PI
      stroke-width: $ring-size
      r: $d / 2
      fill: transparent
      @if $ring-color
        stroke: $ring-color
      /* stroke-linecap: round */
      transition: stroke-dashoffset 1s ease-in-out
      transform: translateY($size) rotate(-90deg)
      stroke-dasharray: 1em 1em
      stroke-dashoffset: 0
      @content

希望能有所帮助。

相关文章：