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

此方法还具有以下优点：您可以（可能）重复使用该函数将平均数据与常规数据进行比较，甚至可以在数据平均值之间切换。

Answer 2

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

Answer 3

为什么不把你.00001数据当作1，所以要10000，然后把它写在你的传奇中。

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

Answer 4

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

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个平均点。您可以根据需要更改值。

Answer 5

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

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

意味着锯齿状是由于常数yAxis进展的微小变化，这与nt3rp的答案最相似

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

目标

问题

一个好例子

守则

5 个答案: