javascript - 如何制作气泡图随机位置

Question

我想让气泡位置是随机的，而不是人们需要设置 y 和 x 位置。

这里是示例气泡图的链接

http://codepen.io/anon/pen/LowKD

这里是js脚本

 $(document).ready(function() {
  $('.graph-bar').each(function() {
     var dataWidth = $(this).data('value');
     $(this).css("width", dataWidth + "%");
  });
});

// Positioning of .bubbleChart
$(document).ready(function() {
  $('.chart-bubble').each(function() {
    // Bubble Size
    var bubbleSize = $(this).data('value');    
    $(this).css("width", function() {
      return (bubbleSize * 10) + "px"
    });
    $(this).css("height", function() {
      return (bubbleSize * 10) + "px"
    });

    // Bubble Position
    var posX = $(this).data('x');
    var posY = $(this).data('y');    
    $(this).css("left", function() {
      return posX - (bubbleSize * 0.5) + "%"
    });
    $(this).css("bottom", function() {
      return posY - (bubbleSize * 0.5) + "%"
    });
  }); 
});

我要这张气泡图随机定位

<div data-value="7" data-label="500" data-x="50" data-y="50" class="chart-bubble"></div>

所以我不必设置数据 x 和 y 因为我想在用户填写值时使其随机化

Answer 1

我会使用 Math.random()。它会为您提供一个介于 0 和 1 之间的随机数，您只需将它乘以您的范围(在您的情况下，我猜这将是您窗口的宽度和高度)。

看random() documentation .