在deeple.js中处理大型数据集以渲染图表

Handling large datasets in dimple.js to render a chart

本文关键字：数据集 大型 deeple js 处理      更新时间：2023-09-26

我想用小酒窝.js为大型数据集绘制图表。我的代码运行得非常好。但唯一的问题是，图表需要超过45秒才能出现。我正在我的代码中寻找某种优化，以减少绘制图表所需的时间。以下是我的区域图代码：

var dataset = [];
// The arrays xpoints and ypoints are populated dynamically 
// with hundreds of thousands of points
var xpoints = chartData["xdata"];
var ypoints = chartData["ydata"];
var area1;
var svg = dimple.newSvg("#" + mychart, 700, 600);
var x, y;
for (var i = 0; i < xpoints.length; i++)
    dataset.push({
        x : xpoints[i],
        y1 : parseFloat(ypoints[i])
    });
var myChart = new dimple.chart(svg, dataset);
myChart.setBounds(75, 30, 480, 330);
y = myChart.addMeasureAxis("y", "y1");
x = myChart.addCategoryAxis("x", "x");
area1 = myChart.addSeries("First", dimple.plot.area, [ x, y ]);
var l = myChart.addLegend(65, 10, 510, 20, "right");        
myChart.draw(1500);

是否有一些方法可以在deplet.js本身或使用d3.js来优化此代码？

恐怕Dimple对数十万点的表现不是很好。它的绘图逻辑是为灵活性而构建的，对于这种情况，你需要编写特定的d3代码(把Dimple想象成瑞士军刀，但这里你需要一把手术刀(。即使使用原始d3，您也可能会遇到包含该数量点的路径问题。当然可以尝试原始d3，但您可能需要编写一些更复杂的附加逻辑来平均每n个点，然后在缩放时填充细节。还要记住，即使使用了完美的客户端代码，只要从服务器获取大量数据，也会经历明显的等待。

我找到了一个解决方案！！。我坚持使用小酒窝.js本身，而不是原始d3。

我所做的是首先聚合这些值，然后将它们传递给chart.draw()函数

现在渲染图形所需的时间从40秒减少到12秒，这要好得多。

目前，我的聚合函数只是对特定类别的值进行汇总。draw((函数中的实现可能有点复杂，因此需要额外的时间。CCD_ 2和CCD_。

早些时候，我刚刚做了这个：

dataset.push({
                x : xpoints[i],
                y1 : parseFloat(ypoints[i])
                });

现在，我首先应用如下聚合：

                var isPresent = false;
                for (var j = 0; j < unique_x.length; j++) {
                    if (xpoints[i] == unique_x[j]) {
                        y_val = parseFloat(ypoints[i]);
                        if (isNaN(y_val)) {
                            y_val = 0;
                        }
                        y_sum[j] = y_sum[j] + y_val;
                        isPresent = true;
                        break;
                    }
                }
                if (isPresent == false) {
                    unique_x.push(xpoints[i]);
                    y_sum.push(parseFloat(ypoints[i]));
                }

然后，我这样做：

for (var i = 0; i < unique_x.length; i++) {
                dataset.push({
                    x : unique_x[i],
                    y1 : y_sum[i]
                });
相关文章：