js解析示波器csv并使用Highcharts绘图
前段时间淘了个玩具级的正点原子的mini示波器，示波器有个导出数据到csv的功能，但是官方却没给解析的工具，然后就百度被，找了好几页，不是要环境，就是得装各种软件的，感觉都挺麻烦。最后打算干脆自己造吧，反正需求不复杂，就想画个图表。还好咱有点底子，自学js+面向搜索引擎/csdn/ai编程，总算抄出来了点成品。水个帖子，抛砖引玉。
Highcharts在官网上下载就行，或者直接用官方提供的链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>正点原子示波器csv解析</title>
</head>
<body>
<div>
读取文件：
<input type="file" id="file1" accept="*.csv" />
</div>
<div>
显示进度：
<progress id="pro" value="0"></progress>
</div>
<div>
<button type="button">测试</button>
</div>
<!-- 图表容器 DOM -->
<div id="container" style="width: 600px; height: 400px"></div>
<!-- 引入 highcharts.js -->
<script src="./Highcharts-10.0.0/code/highcharts.js"></script>
<script src="./Highcharts-10.0.0/code/modules/exporting.js"></script>
<script src="./Highcharts-10.0.0/code/modules/boost.js"></script>
<!--<script src="./Highcharts-10.0.0/code/themes/dark-unica.js"></script>-->
<script>
var strDw = ["nS", "uS", "mS", "S"];
let container = document.getElementById("container"),
highlightPoint = function (e) {
var chart, point, i, event;
for (i = 0; i < Highcharts.charts.length; i = i + 1) {
chart = Highcharts.charts;
// Find coordinates within the chart
event = chart.pointer.normalize(e);
// Get the hovered point
point = chart.series.searchPoint(event, true);
if (point) {
point.highlight(e);
}
}
};
["mousemove", "touchmove", "touchstart"].forEach(function (eventType) {
container.addEventListener(eventType, function (e) {
highlightPoint(e);
});
});
/**
* 重写内部的方法， 这里是将提示框即十字准星的隐藏函数关闭
*/
Highcharts.Pointer.prototype.reset = function () {
return undefined;
};
/**
* 高亮当前的数据点，并设置鼠标滑动状态及绘制十字准星线
*/
Highcharts.Point.prototype.highlight = function (event) {
this.onMouseOver(); // 显示鼠标激活标识
this.series.chart.tooltip.refresh(this); // 显示提示框
this.series.chart.xAxis.drawCrosshair(event, this); // 显示十字准星线
};
/**
* 同步缩放效果，即当一个图表进行了缩放效果，其他图表也进行缩放
*/
function syncExtremes(e) {
var thisChart = this.chart;
if (e.trigger !== "syncExtremes") {
Highcharts.each(Highcharts.charts, function (chart) {
if (chart !== thisChart) {
if (chart.xAxis.setExtremes) {
chart.xAxis.setExtremes(e.min, e.max, undefined, false, {
trigger: "syncExtremes",
});
}
}
});
}
}
function Addchart(obj) {
var chartDiv = document.createElement("div");
chartDiv.className = "chart";
container.appendChild(chartDiv);
Highcharts.chart(chartDiv, {
boost: {
useGPUTranslations: true,
},
chart: {
type: "line", //指定图表的类型，默认是折线图（line）
marginLeft: 40, // Keep all charts left aligned
spacingTop: 20,
zoomType: "x", //x轴缩放
spacingBottom: 20,
panning: true, //开启平移
panKey: "shift", //平移按键
},
title: {
text: obj.name, // 标题
align: "left",
margin: 0,
x: 30,
},
subtitle: {
text: "时间单位 " + obj.dw + " 按shift平移",
align: "right",
},
credits: {
enabled: false,
},
legend: {
enabled: false,
},
xAxis: {
gridLineWidth: 1, //网格线宽度
crosshair: true,
events: {
setExtremes: syncExtremes,
},
//labels: {
// format: "{value} km",
//},
},
yAxis: {
title: {
text: "电压",
},
},
/*
tooltip: {
positioner: function () {
return {
// right aligned
x: this.chart.chartWidth - this.label.width,
y: 10, // align to title
};
},
borderWidth: 0,
backgroundColor: "none",
pointFormat: "{point.y}",
headerFormat: "",
shadow: false,
style: {
fontSize: "18px",
},
valueDecimals: dataset.valueDecimals,
},
*/
series: [
{
data: obj.data,
name: obj.name,
step: obj.step,
//type: dataset.type,
//color: Highcharts.getOptions().colors,
//fillOpacity: 0.3,
//tooltip: {
// valueSuffix: " " + dataset.unit,
//},
},
],
});
}
//解析csv
var file1 = document.getElementById("file1");
file1.onchange = function () {
var file = file1.files;
//读取为二进制
var reader = new FileReader();
reader.readAsText(file, "utf-8");
//显示进度
var pro = document.getElementById("pro");
pro.max = file.size;
pro.value = 0;
reader.onprogress = function (e) {
pro.value = e.loaded;
};
reader.onload = function () {
var str = reader.result;
var rows = str.split("\n");
var clients = {
data: [],
};
var clients1 = {
data: [],
};
var multi = false;
for (var i = 0; i < rows.length; i++) {
var row = rows.split(",");
//判断是否首行
if (i == 0) {
clients.name = row;
clients.step = "left"; //转折位置
if (row.length == 3) {
multi = true;
clients1.name = row;
clients1.step = "left"; //转折位置
}
//处理采样时间
var s = row;
var number = s.match(/\d+/);
//1秒
var num1s = 1 * 1000 * 1000 * 1000;
number = num1s / number;
num1s = 0;
while (number / 1000 >= 1) {
number = number / 1000;
num1s++;
}
clients.dw = number + strDw;
} else {
clients.data.push(parseFloat(row));
if (multi) clients1.data.push(parseFloat(row));
}
}
//options.series.push(clients);
//options.series.push(clients1);
// 图表初始化函数
Addchart(clients);
Addchart(clients1);
//var chart = Highcharts.chart("container", options);
};
};
function btnCeshi() {
var txtFile;
txtFile = new XMLHttpRequest();
txtFile.open("GET", "./test.CSV", false);
txtFile.send();
var txtDoc = txtFile.responseText;
var rows = txtDoc.split("\n");
var clients = {
data: [],
};
var clients1 = {
data: [],
};
var multi = false;
for (var i = 0; i < rows.length; i++) {
var row = rows.split(",");
//判断是否首行
if (i == 0) {
clients.name = row;
clients.step = "left"; //转折位置
if (row.length == 3) {
multi = true;
clients1.name = row;
clients1.step = "left"; //转折位置
}
//处理采样时间
var s = row;
var number = s.match(/\d+/);
//1秒
var num1s = 1 * 1000 * 1000 * 1000;
number = num1s / number;
num1s = 0;
while (number / 1000 >= 1) {
number = number / 1000;
num1s++;
}
clients.dw = number + strDw;
} else {
clients.data.push(parseFloat(row));
if (multi) clients1.data.push(parseFloat(row));
}
}
//options.series.push(clients);
//options.series.push(clients1);
// 图表初始化函数
Addchart(clients);
Addchart(clients1);
}
</script>
</body>
</html>
我只能说，大佬就是大佬，膜拜 @苏紫方璇老哥，我害怕ai模型难哭了你，你竟然会给自己加难度了，你是人形ai。 牛人哦，能分享出来用用吗？ 大佬就是大佬, 这也太厉害了 这东西简单 支持楼主 高技术，学习学习 csv是什么文件啊 大佬这是怎么做的 有没有教程
页:
[1]
2