Question

hwllo我希望我的圈子计数器显示我在其课堂上提到的计数器值和数据百分比 但是目前所有4个计数器都只显示第一个计数器的数据，但是我在其html代码中提到了每个计数器的数据百分比值。请帮助我找出问题所在，以及如何纠正该问题？感谢您提供任何帮助，并提供了清晰的代码：

下面使用的代码向我显示了此结果，如图所示：

当前我正在使用此js代码段

<script type="text/javascript">
  (function () {
  var bar, c, percent, r, range;

  percent = $('.pie').data('percent');

  bar = $('.pie').find('.bar');

  r = bar.attr('r');

  c = Math.PI * (r * 2);

  range = (100 - percent) / 100 * c;

  bar.css({
    'stroke-dashoffset': c,
    'stroke-dasharray': c });


  bar.animate({
    strokeDashoffset: range },
  1000, 'linear');

  $('.text').prop('Counter', 0).animate({
    Counter: percent },
  {
    duration: 1000,
    step: function (now) {
      return $(this).text(Math.ceil(now) + '%');
    } });


}).call(this);
</script>

和html是这样的：

<!--counter new -->
<div class="container-fluid counter"> 
  <div class="row">
<div class="col-lg-3">

<div class="svg-box"><span class="text">0%</span>
  <svg class="pie" viewbox="0 0 200 200" data-percent="99">
    <circle r="90" cx="100" cy="100"></circle>
    <circle class="bar" r="90" cx="100" cy="100"></circle>
  </svg>
</div>

</div>
<div class="col-lg-3">

<div class="svg-box"><span class="text">0%</span>
  <svg class="pie" viewbox="0 0 200 200" data-percent="32">
    <circle r="90" cx="100" cy="100"></circle>
    <circle class="bar" r="90" cx="100" cy="100"></circle>
  </svg>
</div>

</div>
<div class="col-lg-3">

<div class="svg-box"><span class="text">0%</span>
  <svg class="pie" viewbox="0 0 200 200" data-percent="44">
    <circle r="90" cx="100" cy="100"></circle>
    <circle class="bar" r="90" cx="100" cy="100"></circle>
  </svg>
</div>

</div>
<div class="col-lg-3">

<div class="svg-box"><span class="text">0%</span>
  <svg class="pie" viewbox="0 0 200 200" data-percent="22">
    <circle r="90" cx="100" cy="100"></circle>
    <circle class="bar" r="90" cx="100" cy="100"></circle>
  </svg>
</div>

</div>
</div>
</div>
<!--counter new end -->

所使用的css也如下所示：


.svg-box {
  position: relative;
}

.text {
  position: absolute;
  top: 50%;
  left: 40%;
  transform: translate(-50%, -50%);
  z-index: 1;
  font-size: 3em;
  letter-spacing: 3px;
  font-family: "Raleway", Calibri, sans-serif;
  color: #fff
}

svg {
  transform: rotate(-90deg);
  width: 200px;
  height: 200px;
  background: transparent;
  fill: none;
}
svg circle {
  stroke-width: 1;
  stroke: #999;
}
svg .bar {
  stroke-width: 3;
  stroke: #ffffff;
  stroke-linecap: round;
}

我想通过显示

来显示计数器

“数据百分比”值

我在html代码中提到过。但是所有计数器都显示第一个计数器的数据值。

我想显示什么数据是这样的：

Answer 1

我重新设计了一些代码，我认为它应该可以正常工作。

SELECT
    p.pcode,
    p.productName,
    s.pcode,
    MAX(s.in_stock) AS opening_stock,
    SUM(s.soldQty) AS sold_qty,
    MIN(s.remaining_qty) AS closing_stock,
    s.date_created,
    g.pcode,
    g.qty,
    g.received_qty,
    g.received_on
FROM tbl_products p
LEFT JOIN tbl_sold_items s
    ON p.pcode = s.pcode
LEFT JOIN tbl_shop_gr_items g
    ON p.pcode = g.pcode
WHERE
    (s.date_created = '2019-09-27') AND
    (g.received_on = '2019-09-27')
GROUP BY p.pcode

这是一个有用的小提琴：https://jsfiddle.net/w2o7rt1L/

所有圆计数器显示相同的数据（如何使每个圆显示其自己的计数器数据值）

1 个答案: