Javascript HTML/CSS/JS线条图

我正试图找到在一页上画上千行的最有效的方法

我有一个数据库，它包含我想要绘制的每个点，我可以将这些点拉入python坐标列表中，看起来像：[[0,0]，[200100]，[400250]]。这个列表包括大约2000个点。我想用一条线段把这些点连接起来，形成一条大直线。每个部分可能需要不同的颜色

在每一页上，我想画2-3条这样的大线（因此每页大约有2000-6000点）

我的两个问题是：

在不降低浏览器速度的情况下绘制这么多线的最有效方法是什么

有没有办法使生成的图像/画布可缩放，以便用户可以放大此行的特定部分并四处导航

我目前正在使用一些类似这样的测试代码，但有没有更有效的方法：

<canvas id="myCanvas" width="400" height="400"
style="border:1px solid #ffffff;"></canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.strokeStyle = '#ff0000';
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.moveTo(200,100);
ctx.lineTo(400,250);
ctx.strokeStyle = '#6b44cc';
ctx.stroke();
ctx.closePath();

</script>

var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.beginPath（）；
ctx.moveTo（0,0）；
ctx.lineTo（200100）；
ctx.strokeStyle='#ff0000'；
ctx.stroke（）；
ctx.closePath（）；
ctx.beginPath（）；
ctx.moveTo（200100）；
ctx.lineTo（400250）；
ctx.strokeStyle='#6b44cc'；
ctx.stroke（）；
ctx.closePath（）；

将这些点编译成SVG文件似乎是最有效的选择。如果我没弄错你的问题，你已经有了一个你想画的点的数据库。这意味着不需要动态生成此图像

我猜预编译的SVG图像的加载速度要比画布上绘制的线条快得多。Canvas在动态生成图像时可能会更快，但如果您可以提前生成图像，这将节省您在浏览器中的大量时间。SVG也可以缩放，所以我认为这最符合您的标准

下面是一个你可以用来

编辑：

我创建了一个包含100000行的大型SVG图像（类似于dwana的画布图像：jsfiddle.net/dqkksbz6/2），发现我的猜测是错误的。正如MarkE指出的那样，大量的DOM节点确实对浏览器性能有重大影响SVG实际上速度较慢。使用画布要快得多，而且不会像大型SVG那样破坏浏览器

---

尽管如此，我的出发点仍然是在请求之前生成图像。马克的评论很有帮助，也许其中有一些东西。您可以生成一个PNG，一旦达到某个缩放级别，它就会切换到相关区域的小型SVG。这需要做大量的工作，但我想不出更好的方法来优化速度和质量。

为什么不在子集上运行性能测试：为了提高效率，我很可能不会尝试其中一个插件（如D3），而是依赖画布（如您在这里看到的）或SVG。而且，如果以上的性能测试是任何指标，那么你就在正确的道路上。我做了一个小测试，使用了200k不同颜色的线条和画布绘制，然后速度非常快，所以速度应该不是问题，但对于每页2000行，你只会看到随机性（不要认为缩放会有那么大的影响，稍后会进行测试）当涉及到调整大小时，很容易使用SVG，因为基于矢量的SVG将在不进行像素化的情况下进行缩放。但我确实有一个担忧……提问者计划有6000个点加6000条线连接这些点=12000个多色svg儿童！我怀疑向DOM添加那么多内容会破坏性能。也许是一种混合方法：（1）放大时呈现高PPI img元素。（2） 放大img，直到它像素化（可能2-5倍缩放），然后（3）使用SVG显示更小的缩放点/线集。