小编Lis*_*isa的帖子

如何使用 HTML、JS 和 Chart.js 处理大型 CSV 文件

我必须上传一个 90 MB 的 CSV 文件,然后使用 Chart.js 作为图表对其进行分析。CSV 文件包含每分钟记录的测量值。这 90 MB 几乎相当于一年的数据量。我已经将网站响应时间设置为较高的值。但我的代码正在付诸东流。这就是为什么我只显示一定数量的数据值,然后每隔一段时间单击图表。即使这样仍然很慢而且不好。对于评估来说,至少每月进行一次概述会更好。但我不知道我还能做出哪些调整。你有什么想法?

\n

超文本标记语言

\n
<!DOCTYPE html>\n<html lang="de">\n   <head>\n      <meta charset="UTF-8">\n      <meta name="viewport" content="width=device-width, initial-scale=1.0">\n      <title>CSV Diagramm mit Chart.js</title>\n      <link rel="stylesheet" href="styles.css">\n   </head>\n   <body>\n      <div id="drop-area" class="drop-area" style="width: 100%;" ondrop="handleDrop(event)" ondragover="handleDragOver(event)">\n         <p>Datei hier ablegen</p>\n         <input type="file" id="csvFileInput" accept=".csv" style="display:none;" onchange="handleUpload()">\n      </div>\n      <div class="chart-container" style="width: 100%;">\n         <canvas id="myChart"></canvas>\n      </div>\n      <button onclick="showPreviousData()">Vorheriger Tag</button>\n      <button onclick="showNextData()">N\xc3\xa4chster Tag</button>\n      <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>\n      <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js" integrity="sha512-UXumZrZNiOwnTcZSHLOfcTs0aos2MzBWHXOHOuB0J/R44QB0dwY5JgfbvljXcklVf65Gc4El6RjZ+lnwd2az2g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>\n      <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/2.0.1/chartjs-plugin-zoom.min.js" integrity="sha512-wUYbRPLV5zs6IqvWd88HIqZU/b8TBx+I8LEioQ/UC0t5EMCLApqhIAnUg7EsAzdbhhdgW07TqYDdH3QEXRcPOQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>\n      <script src="script.js"></script>\n   </body>\n</html>\n
Run Code Online (Sandbox Code Playgroud)\n …

html javascript chart.js

6
推荐指数
1
解决办法
140
查看次数

标签 统计

chart.js ×1

html ×1

javascript ×1