具有移动平均线的HTML5/JS图表

Question

问题:如何计算移动平均线并在JS/HTML5图表上绘制？

我能找到的最接近的例子是这个网站.看看它的JS文件,我无法识别绘图图表库.经过仔细检查,似乎移动平均线不是在服务器端计算,而是在客户端计算.

任何建议赞赏!

Answer 1

这是一个快速示例,它计算3点移动平均客户端并使用Highcharts绘制它:

var N = 100;
var someData = [];
for (var i = 0; i < N; i++)
{
    someData.push([i,Math.random() * 100]);
}

var moveMean = [];
for (var i = 1; i < N-1; i++)
{
    var mean = (someData[i][1] + someData[i-1][1] + someData[i+1][1])/3.0;
    moveMean.push([i,mean]);
}

Answer 2

我在下面写了一个更通用的函数。

要使用它，只需传递一个值数组、移动平均线的计数（或长度）和一个可选的限定符函数。

例如：

movingAvg(arr, 10)将返回数组中值的 10 个数据点移动平均值arr。

movingAvg(arr, 20, function(val){ return val != 0; }) 将返回数组中非零值的 20 个数据点移动平均值 arr

例如，对于 Chart.js，您可以像这样使用它：

...
,datasets: [
     {
         label: "Values"
        ,data: values
    }
    ,{
         type: "line"
        ,label: "20 Point Moving Average"
        ,data: movingAvg(values, 20, function(val){ return val != 0; })
    }
]
...

功能：

    /**
    * returns an array with moving average of the input array
    * @param array - the input array
    * @param count - the number of elements to include in the moving average calculation
    * @param qualifier - an optional function that will be called on each 
    *  value to determine whether it should be used
    */
    function movingAvg(array, count, qualifier){

        // calculate average for subarray
        var avg = function(array, qualifier){

            var sum = 0, count = 0, val;
            for (var i in array){
                val = array[i];
                if (!qualifier || qualifier(val)){
                    sum += val;
                    count++;
                }
            }

            return sum / count;
        };

        var result = [], val;

        // pad beginning of result with null values
        for (var i=0; i < count-1; i++)
            result.push(null);

        // calculate average for each subarray and add to result
        for (var i=0, len=array.length - count; i <= len; i++){

            val = avg(array.slice(i, i + count), qualifier);
            if (isNaN(val))
                result.push(null);
            else
                result.push(val);
        }

        return result;
    }