javascript - 优化具有数千个点的图表的网络流量

Question

问题

我正在使用 Improve this question 生成堆积面积图。它可能包含超过一千个点。

图表将从服务器获取实时更新。由于数据的性质，我无法传输部分信息。我必须通过网络发送全套 1000 多个点。

图表上几乎没有曲线，大部分数据预计是线性或分段线性的。

问题

减少需要通过线路发送的数据的好方法是什么？

当前想法

• 客户端和服务器端的文本压缩算法
• 由于它是线性图表，因此只需发送起点和终点并在 JavaScript 中生成其间的所有点
• 如果图表是分段线性的，只需发送多个部分并将它们分组在一起。
• 计算一个表示点集的函数并将该函数发送过来(我不知道从哪里开始)

编辑

这是图表，

c3js

和相应的数据点，在此图中，数组索引是 x 轴点，y 轴上的点是数组上的值。

这只是一个示例，还会有 5 或 6 个这样的图表，当输入发生变化时，这些图表都会发生变化，因此我必须重新渲染整个图表。

{


"GraphA": [41376, 41376, 41376, 41376, 41376, 41376, 41376, 41376, 41376, 41376, 41376, 41376, 41376, 41376, 41376, 41376, 41376, 41376, 41376, 41376, 41376, 41376, 41376, 41376, 41376, 41376, 41376, 41376, 41376, 41376, 41376, 41376, 41376, 41376, 41376, 41376, 41376, 41376, 41376, 41376, 41376, 41376, 41376, 41376, 41376, 41376, 41376, 41376, 41376, 41376, 41376, 28963.199999999997, 28963.199999999997, 28963.199999999997, 28963.199999999997, 28963.199999999997, 26894.4, 26894.4, 26894.4, 26894.4, 26894.4, 24825.6, 24825.6, 24825.6, 24825.6, 24825.6, 20688.0, 20688.0, 20688.0, 20688.0, 20688.0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 

"GraphB": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 30, 510, 1000, 1480, 1960, 2450, 2930, 3420, 3900, 4380, 4870, 5350, 5840, 6320, 6800, 7290, 7770, 8250, 8740, 9220, 9710, 10190, 10670, 11160, 11640, 12130, 12610, 13090, 13580, 14060, 14550, 15030, 15510, 16000, 16480, 16970, 17450, 17930, 18420, 18900, 19380, 19870, 20350, 20840, 21320, 21800, 22290, 22770, 23260, 23740, 24220, 24710, 25190, 25680, 26160, 26640, 27130, 27610, 28100, 28580, 29060, 29550, 30030, 30510, 31000, 31480, 31970, 32450, 32930, 33420, 33900, 34390, 34870, 35350, 35840, 36320, 36810, 37290, 37770, 38260, 38740, 39230, 39710, 40190, 40680, 41160, 41640, 42130, 42610, 43100, 43580, 44060, 44550, 45030, 45520, 46000, 46480, 46970, 47450, 47940, 48420, 48900, 49390, 49870, 50350, 50840, 51320, 51810, 52290, 52770, 53260, 53740, 54230, 54710, 55190, 55680, 56160, 56650, 57130, 57610, 58100, 58580, 59070, 59550, 60030, 60520, 61000, 61480, 61970, 62450, 62940, 63420, 63900, 64390, 64870, 65360, 65840, 66320, 66810, 67290, 67780, 68260, 68740, 69230, 69710, 70200, 70680, 71160, 71650, 72130, 72610, 73100, 73580, 74070, 74550, 75030, 75520, 76000, 76490, 76970, 77450, 77940, 78420, 78910, 79390, 79870, 80360, 80840, 81330, 81810, 82290, 82780], 

"GraphC": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 73, 143, 212, 281, 350, 419, 488, 557, 626, 696, 765, 834, 903, 972, 1041, 1110, 1179, 1249, 1318, 1387, 1456, 1525, 1594, 1663, 1733, 1802, 1871, 1940, 2009, 2078, 2147, 2216, 2286, 2355, 2424, 2493, 2562, 2631, 2700, 2769, 2839, 2908, 2977, 3046, 3115, 3184, 3253, 3323, 3392, 3461, 3530, 3599, 3668, 3737, 3806, 3876, 3945, 4014, 4083, 4152, 4221, 4290, 4359, 4429, 4498, 4567, 4636, 4705, 4774, 4843, 4913, 4982, 5051, 5120, 5189, 5258, 5327, 5396, 5466, 5535, 5604, 5673, 5742, 5811, 5880, 5949, 6019, 6088, 6157, 6226, 6295, 6364, 6433, 6502, 6572, 6641, 6710, 6779, 6848, 6917, 6986, 7056, 7125, 7194, 7263, 7332, 7401, 7470, 7539, 7609, 7678, 7747, 7816, 7885, 7954, 8023, 8092, 8162, 8231, 8300, 8369, 8438, 8507, 8576, 8646, 8715, 8784, 8853, 8922, 8991, 9060, 9129, 9199, 9268, 9337, 9406, 9475, 9544, 9613, 9682, 9752, 9821, 9890, 9959, 10028, 10097, 10166, 10236, 10305, 10374, 10443, 10512, 10581, 10650, 10719, 10789, 10858, 10927, 10996, 11065, 11134, 11203, 11272, 11342, 11411, 11480, 11549, 11618, 11687, 11756, 11826]

}

Answer 1

其中data是原始数据集:

var delta = {
    "GraphA": "41375,,,,,,,,,,,,,49375,41476,41372,41378,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,41399,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,26894.4,26894.4,,,,",
    "GraphB": "41375,,,,,,,,,,,,,49375,41476,41372,41378,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,41399,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,26894.4,26894.4,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,",
    "GraphC": "41375,,,,,,,,,,,,,49375,41476,41372,41378,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,41399,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,26894.4,26894.4,,,,,,,,,,,,,,,,,,,,,,,,,,,",
}

for(var i in delta){
    delta[i] = delta[i].split(",");
    for(var j in delta[i]){
        if(delta[i][j] == "")
            delta[i][j] = data[i][j] || 0; // fill empty values with data or zero
    }
}

// use delta