Question

我需要帮助找出用canvas显示动态数据。查看生命代码https://jsfiddle.net/fbteabu8/

HTML

<div class="data-square-percentage-2" data-type="square-percentage" data-id="percentage-2" data-value="50">
  <div class="label"></div>
  <canvas></canvas>
</div>

CSS

body {
  font-family: 'Helvetica', sans-serif;
}

.data-square-percentage,
.data-square-percentage-2
{
  width: 250px;
  height: 250px;
  margin: 10px 20px 0;
  background: #EEE;
  float: left;
  position: relative;
}

.label {
  width: 100%;
  height: 50px;
  margin: auto;
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 0;
  font-size: 50px;
  color: #000;
  text-align: center;
}

JS

$('[data-type="square-percentage"]').each(function() {
    var pdata = {
      width: $(this).width(),
      height: $(this).height(),
      canvas: $(this).children('canvas'),
      percentWidth: $(this).width() / 10,
      percentHeight: $(this).height() / 10,
      elID: $(this).data('id'),
      percent: $(this).data('value')
    }

   $(this).children('.label').text(pdata.percent + '%');
    pdata.canvas.attr({
      'width': pdata.width,
      'height': pdata.height,
      'id': pdata.elID
    });

    pdata.ctx = document.getElementById(pdata.elID).getContext("2d");
    pdata.ctx.beginPath();
    pdata.ctx.fillStyle = "#ff008d";
    pdata.ctx.strokeStyle = "#ffdbef";
    pdata.ctx.globalAlpha = 1;


    for (i = 0, k = 0, r = 0; i < pdata.percent; i++, k++) {
      if (k > 9) k = 0, r++;
      pdata.ctx.restore();
      pdata.ctx.rect((pdata.percentWidth * k), (pdata.percentHeight * r), pdata.percentWidth, pdata.percentHeight);
      pdata.ctx.fill();
      pdata.ctx.stroke();
      pdata.ctx.save();
    }
  });
});

我的问题是：我已经能够正确填充数据表，但现在我需要将第二个表分成更多的数据点。因此，例如，我希望它能够用不同的颜色分成4个百分比，而不是将100％的粉红色染成46％。有点像这样：

Data Display Example

让我知道它是否有意义，或者你是否有更好的避免画布和使用其他东西的解决方案，如SVG动画等。

提前谢谢！

带有<canvas>的动态数据表

0 个答案: