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。

如何制作气泡图随机位置

1 个答案: