javascript - 长数组的小数据点呈现为锯齿线

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
        }]
    });
};

图表和示例数据集都显示在以下 fiddle 中: 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)
        }]
    });
});

此方法还有一个优点，您可以(可能)重用该函数来比较平均数据和常规数据，甚至可以在平均数据之间切换。