在 JavaScript 中生成平滑的随机趋势（随机游走）

Question

我正在寻找随机游走/随机趋势算法的 JavaScript 实现。我需要一些能坚持趋势的东西（所以，只是简单的随机增量），同时仍然保持在一些指定的边界内。 我尝试通过基于加权平均值（权重是使用高斯函数计算的）选择数字来从头顶写下一些东西，并最终得到一条稍微平滑的线（不够好）。然后我采取了一种不太直接的方法并尝试在互联网上搜索，虽然我找到了一些大纲，但没有什么具体到我理解的程度。

事实证明（我最初并没有意识到这一点），似乎已经有一系列算法使用高斯方程来产生随机趋势。但是，尽管搜索了数小时，但除了对我没有用的抽象方程式外，我找不到更多。我能找到的最好的是this blog，他在其中展示了我正在寻找的随机数据的图片。他列出了方程式，但我不知道这些实际应该是什么意思（对我来说，这似乎不是一个完整的解决方案）。

已经有哪些算法（最好是 JavaScript 或类似 C 的实现）来生成这样的数据？

Answer 1

这是我通过阅读您链接的博客得出的结论。据我所知，这就是作者为他的第一张图表所做的。

CSS

#container {
    min-width: 310px;
    height: 400px;
    margin: 0 auto;
}

HTML

<div id="container"></div>

Javascript

Box–Muller transform 生成Gaussian Random Numbers

var boxMullerRandom = (function () {
    var phase = 0,
        RAND_MAX,
        array,
        random,
        x1, x2, w, z;

    if (crypto && typeof crypto.getRandomValues === 'function') {
        RAND_MAX = Math.pow(2, 32) - 1;
        array = new Uint32Array(1);
        random = function () {
            crypto.getRandomValues(array);

            return array[0] / RAND_MAX;
        };
    } else {
        random = Math.random;
    }

    return function () {
        if (!phase) {
            do {
                x1 = 2.0 * random() - 1.0;
                x2 = 2.0 * random() - 1.0;
                w = x1 * x1 + x2 * x2;
            } while (w >= 1.0);

            w = Math.sqrt((-2.0 * Math.log(w)) / w);
            z = x1 * w;
        } else {
            z = x2 * w;
        }

        phase ^= 1;

        return z;
    }
}());

Random Walk 生成器

function randomWalk(steps, randFunc) {
    steps = steps >>> 0 || 100;
    if (typeof randFunc !== 'function') {
        randFunc = boxMullerRandom;
    }

    var points = [],
        value = 0,
        t;

    for (t = 0; t < steps; t += 1) {
        value += randFunc();
        points.push([t, value]);
    }

    return points;
}

从随机游走点获取 Y 值的辅助函数

function getYValues(points) {
    return points.map(function (point) {
        return point[1];
    });
}

辅助函数为图形生成 X 图

function generatePlots(howMany) {
    howMany = howMany >>> 0 || 10;
    var plots = [],
        index;

    for (index = 0; index < howMany; index += 1) {
        plots.push({
            name: 'plot' + index,
            data: getYValues(randomWalk())
        });
    }

    return plots;
}

绘制结果，使用jQuery和highcharts.js

$('#container').highcharts({
    title: {
        text: 'Random Walk',
        x: -20 //center
    },
    subtitle: {
        text: 'Random Walk',
        x: -20
    },
    xAxis: {
        type: 'linear'
    },
    yAxis: {
        title: {
            text: 'Value'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    tooltip: {
        valueSuffix: ' units'
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        borderWidth: 0
    },
    series: generatePlots(10)
});

开启jsFiddle