长数组小数据点呈现为锯齿状线

Question

目标

我试图将一系列长数据(大约200个滴答,从小浮点值,如1.3223)渲染成折线图.

问题

当我使用一系列仅少量变化的数据(每个刻度约0.0001)时,图表呈现为非常锯齿状(像剪刀一样).我想以某种方式修复它以在图表上的每个点之间具有"更健全"的半径.

一个很好的例子

另一方面,当渲染更高的值(大约1382.21)并且刻度之间的差异更大(从0.01到0.05 +/-)时,图形变得更加平滑和美观.

编辑:正如用户 Arie Shaw指出的那样,实际的低值或高值并没有什么区别,它仍然是一个代表小的"单调"变化的问题是一种不那么参差不齐的形式.

代码

var initChart = function(data, container) {
    new Highcharts.Chart({
        chart: {
            type: "area",
            renderTo: container,
            zoomType: 'x'
        },
        title: {
            text: ''
        },
        xAxis: {
            labels: {
                enabled: false
            }
        },
        yAxis: {
            title: {
                text: ''
            }
        },
        legend: {
            enabled: false
        },
        color: '#A3D8FF',
        plotOptions: {
            area: {
                fillColor: '#C6E5F4',
                lineWidth: 1,
                marker: {
                    enabled: false
                },
                shadow: false,
                states: {
                    hover: {
                        lineWidth: 1
                    }
                },
                threshold: null
            }
        },
        exporting: {
            enabled: false
        },
        series: [{
            name: "TEST",
            data: data
        }]
    });
};

图表和示例数据集都显示在以下小提琴中:http: //jsfiddle.net/YKbxy/2/

Answer 1

您遇到的问题是不可避免的：如果随着时间的推移有很多小的变化，那么只要您显示每个数据点，图表就会出现锯齿状。

重点是最后那句话。

“平滑”粗糙部分的一种方法是对数据进行平均。例如：

var myData = []; //... Some array of data; assuming just numbers

var averageData = function (data, factor) {
    var i, j, results = [], sum = 0, length = data.length, avgWindow;

    if (!factor || factor <= 0) {
        factor = 1;
    }

    // Create a sliding window of averages
    for(i = 0; i < length; i+= factor) {
        // Slice from i to factor
        avgWindow = data.slice(i, i+factor);
        for (j = 0; j < avgWindow.length; j++) {
            sum += avgWindow[j];
        }
        results.push(sum / avgWindow.length)
        sum = 0;
    }
    return results;
};

var var initChart = function(data, container) {
    new Highcharts.Chart({
        series: [{
            name: "TEST",
            data: averageData(myData, 2)
        }]
    });
});

此方法的优点还在于您可以（可能）重用该函数来将平均数据与常规数据进行比较，甚至可以在平均数据的数量之间切换。