javascript - 如何创建一个范围内的随机数的简单分布图(java或javascript)

Question

在我的简单应用程序中，我经常选择给定范围(0..~500000)内的随机数。我需要一种简单的方法来在浏览器中可视化分布。那么输出选项是 png、html/js、svg、ascii？ 。

数据存储在一个简单的映射(guava 的 AtomicLongMap )索引->计数中。我不需要任何选择。我只想看看发行的粗略质量。最好的选择是专门用于可视化分布的工具，可以直接使用 map (或序列化为 json 的 map )。在 json 中，数据将如下所示

{
   "0":6
   "1":3
   "2":4
   "3":0
   "4":2
}

(范围 [0..4])

我首先查看了 jfreechart 和 google 图表，因为我必须将 map 转换为特殊的数据格式，并且必须提供标签(我不需要任何标签)。几年前，我与 Birt 合作，但这对于我的简单要求来说也非常复杂/过度。

Answer 1

一种简单的方法是创建一个图像并为每列绘制一条线，其高度为每个随机数。一个简单的 java 代码如下所示。

final int AmountNumbers = 1000;
final int MaxSize = 500000;

// create Random Numbers
Random rnd = new Random();
ArrayList<Integer> randomNumbers = new ArrayList<>();
for(int i = 0; i < AmountNumbers; i++)
    randomNumbers.add(rnd.nextInt(MaxSize));

// create picture
int width = AmountNumbers, height = 200;    
BufferedImage bi = new BufferedImage(width, height, BufferedImage.TYPE_INT_ARGB);
Graphics2D ig2 = bi.createGraphics();
ig2.setPaint(Color.red);

// draw lines for every number
for(int i = 0; i < AmountNumbers; i++){
    int rndNumber = randomNumbers.get(i);
    ig2.drawLine( i, rndNumber * height / MaxSize, i,  height); 
}

// save as png
ImageIO.write(bi, "PNG", new File("chart.PNG"));