如何使气泡图随机位置

How to make Bubble Chart Random Position

本文关键字：随机 位置 气泡 何使      更新时间：2023-09-26

我想让气泡的位置是随机的，而不是人们需要设置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，因为我想在用户填充值

时使其随机

我会使用Math.random()。它给你一个0到1之间的随机数，你只需要把它乘以你的范围（在你的情况下，我想它是你的窗口的宽度和高度）。

查看random（）文档。

相关文章：