5

目标

我正在尝试将一长串数据（大约 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/

4

5 回答 5

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

此方法还有一个优点，即您可以（可能）重用该函数来将平均数据与常规数据进行比较，或者甚至在平均数据的多少之间切换。

于 2013-06-26T19:47:19.070 回答
0

最后，问题在于点的频率或它们在 yAxis 上的绘图。

当我提供更真实的定位（例如时间戳）时，它看起来会很好。

这意味着锯齿状是恒定 yAxis 进程的微小变化的结果，这与 nt3rp 的答案最相似

于 2013-07-01T03:25:48.350 回答
0

您必须仅使用几个小数位来近似您的数据，或者您必须使用以下方法对值进行平均：

var data = new Array(200);
var smallArray = new Array(5);
var averagedData = new Array(20);
for (var index=0; index<=averagedData.length; index++){
    for(var i = 0; i<=smallArray.length; i++){
        smallArray[i] = data[i + index * 5];
    }
    averagedData[index] = (smallArray[1] + smallArray[2] + smallArray[3] + smallArray[4] + smallArray[5])/smallArray.length;
}

然后，您只需要在 200 个数据点的数组上绘制 20 个平均点。您可以根据需要更改值。

于 2013-06-28T23:51:27.510 回答
0

为什么不将 .00001 数据视为 1，乘以 10000，然后像这样将其写在您的图例中。

您甚至应该将其作为测试进行，因为如果图表看起来不错，则意味着当您将其恢复正常时数据集编号存在问题，因为高图表需要高低之间的差异......

于 2013-06-10T13:42:45.680 回答
0

您始终可以使用areaspline代替area，请参阅：http: //jsfiddle.net/YKbxy/3/

于 2013-06-10T13:36:48.003 回答