问题描述
我正在尝试将一组加速度计数据加载到我的vue js应用程序中,以便可以将x和y坐标点绘制到图形上。我从加载这样的数据开始
import Acc from "../TEST_DATA/acc";
我得到了错误
ERROR in ./TEST_DATA/acc.json
Module build Failed: Error: ENOENT: no such file or directory,open '/mnt/c/Users/brenn/OneDrive/Desktop/Folders/code/Floormap-app/floormap/TEST_DATA/acc.json'
@ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue 14:0-35
@ ./src/App.vue
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
数据格式
{"time":"2020-09-01 13:43:52","acc":[0.084869384765625,2.9331207275390625,9.295639038085938]}
{"time":"2020-09-01 13:43:52","acc":[0.4720611572265625,2.5552520751953125,9.557861328125]}
{"time":"2020-09-01 13:43:52","acc":[0.443389892578125,2.306732177734375,9.475082397460938]}
{"time":"2020-09-01 13:43:52","acc":[0.5052337646484375,2.26214599609375,9.519134521484375]}
{"time":"2020-09-01 13:43:53","acc":[0.5268402099609375,2.266632080078125,9.568099975585938]}
{"time":"2020-09-01 13:43:53","acc":[0.3914947509765625,2.3137359619140625,9.50543212890625]}
{"time":"2020-09-01 13:43:53","acc":[0.4478302001953125,2.31158447265625,9.463180541992188]}
{"time":"2020-09-01 13:43:53","acc":[0.4195709228515625,2.37359619140625,9.527877807617188]}
在哪里可以忽略“时间”的方式和
"mag":[X-coordinate,y-coordinate,z-coordinate]
这使我意识到数据需要采用.json或.csv格式而不是.txt。但是,acc.txt文件不包含逗号分隔的值或正确的json格式。文件大小很大,每次数据更新时我都不能在1000-50000个数据点之间插入逗号。是否可以通过某种在线转换器运行代码或在程序中创建重新格式化功能?如果是这样的话,如果有人可以指出正确的方向,那将是非常糟糕的。谢谢您的帮助。
解决方法
我认为在将数据重新提供给您的应用程序之前,最好将其重新格式化。
1-将数据重新格式化为JSON
创建一个script.js
文件,稍后您将使用该文件执行
node script.js
。
基本上,您的脚本需要在文件中进行替换查找,例如将}
替换为},
,并在开头添加[
,在末尾添加]
。有一些不错的节点库可以做到这一点:Replace a string in a file with nodejs。
2-(可选)只选择您需要的东西。
现在您有了一个有效的.json,您可以解析它并根据需要重新格式化数据。 您可以在同一脚本中将此操作作为第二步,这样最终文件将更轻
3-加载JSON
这里有2个选项:
- 就像您使用
import Acc from "../TEST_DATA/acc.json";
那样,因为最终包很大,而且每次数据更改都需要重新部署。 - 使用ajax请求加载它。编码更多,但最终更易于管理。
PS:我不太担心50000个条目的数组,困难的部分是显示那些50000点X)