1. Highcharts
- 散点图，100万个点官方示例(https://www.highcharts.com/demo/highcharts/scatter-boost)
- 可能需要付费才能商用。
2. echarts
- 散点图，100万个点官方示例(https://echarts.apache.org/examples/zh/editor.html?c=scatter-nebula)
- 本地Demo实测（boost高性能模式，非WebGL渲染器），100万个点，可以在1s内渲染出来，但是因为点是分批异步渲染的，所以在滚动等图表刷新视图的时候，画面会有明显闪烁；最致命的问题是，添加圈选之后，再进行滚动或缩放等交互会非常卡，而且图中会丢失大量点数据，几乎是不可用的状态。
- 页面缩放到150%以上后清晰度下降较为明显。
3. AntV/G2
- 散点图，官方无大数据示例(https://g2.antv.antgroup.com/examples/general/point/#point-basic)
- 本地Demo实测，1万个点可以渲染出来，10万级别就页面卡死崩溃，交互也很不成熟，整体做得较为简陋，不推荐使用。
4. LightningChart.js
- 散点图，100万个点官方示例(https://lightningchart.com/js-charts/interactive-examples/examples/lcjs-example-0016-largeScatterChartXY.html)
- 看起来性能很强，但交互拓展性可能稍小，而且是收费的。
5. Chart.js
- 散点图，官方无大数据示例(https://www.chartjs.org/docs/latest/samples/other-charts/scatter.html)
- 交互约等于没有，主要应用场景还是纯展示的。
6. Plotly.js
- 散点图，非大数据量官方示例(https://plotly.com/javascript/line-and-scatter/)
- 在交互性方面较强，在某些方面可能接近甚至超过echarts，且有MIT License，可商用。
- 在性能方面，由于可以使用WebGL渲染器，大数据量时的渲染性能和交互流畅度可以远超echarts。
- 实测页面缩放到200%后图中内容依然清晰。
- 散点图，本地Demo实测（测试设备：M1 Pro MacBook Pro）：
- 100万个点依然非常流畅，刷选放大响应非常迅速，几乎瞬时响应；
- 500万个点未圈选时进行缩放的响应时间实测大约0.4s；圈选后依然可以较流畅地进行滚动，圈选后进行缩放的响应时间实测大约1.1s；
- 1000万个点未圈选时进行缩放的响应时间实测大约0.5s；圈选后进行滚动较为卡顿，略好于100万数据量的echarts的表现，进行缩放的响应时间实测大约2.2s；此时的卡顿估计主要为内存、CPU和GPU等硬件性能的瓶颈，当前标签页堆内存激增到1~2GB左右，CPU和GPU均有60%~100%的占用。
-
以下是Plotly.js绘制100万个点的散点图Demo：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Plotly.js High-Volume Scatter Plot Demo</title> <script src="https://cdn.plot.ly/plotly-2.18.2.min.js"></script> </head> <body> <h2>High-Volume Scatter Plot with Plotly.js (WebGL)</h2> <p id="webgl-status"></p> <div id="scatter-plot" style="width: 100%; height: 600px;"></div> <script> // 检查 WebGL 支持 function isWebGLSupported() { try { const canvas = document.createElement("canvas"); return !!window.WebGLRenderingContext && (canvas.getContext("webgl") || canvas.getContext("experimental-webgl")); } catch (e) { return false; } } // 显示 WebGL 支持状态 const statusElement = document.getElementById('webgl-status'); if (isWebGLSupported()) { statusElement.innerText = "WebGL is supported on this device."; statusElement.style.color = "green"; } else { statusElement.innerText = "WebGL is NOT supported on this device."; statusElement.style.color = "red"; } // 生成100万个随机数据点 const data = { type: 'scattergl', // 使用WebGL渲染模式 mode: 'markers', x: Array.from({ length: 1000000 }, () => Math.random() * 100), y: Array.from({ length: 1000000 }, () => Math.random() * 100), marker: { color: 'rgba(0, 150, 255, 0.6)', // 数据点颜色，带透明度 size: 3, // 数据点大小 } }; const layout = { title: 'Scatter Plot with 1,000,000 Data Points', xaxis: { title: 'X Axis' }, yaxis: { title: 'Y Axis' }, height: 840 }; // 创建图表 Plotly.newPlot('scatter-plot', [data], layout); </script> </body> </html> - 需要注意的是，实际渲染性能依赖用户的设备硬件水平，且需要浏览器支持WebGL。
Comments NOTHING