目标:
c语言实现一个最简化的csv转html波形图显示方案。
csv文件格式:
共两行数据,第一行是x轴数据,第二行是y轴数据。
csv文件名分为3段: 波形图名称,x轴名称,y轴名称。
c代码:
int csv2html_wave(csv_file_name,html_file_name);
html代码:文章来源:https://www.toymoban.com/news/detail-798643.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SimpleWave</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
</head>
<body>
<canvas id="SimpleWave" width="800" height="300" style="margin-left: 20px;"></canvas>
<script>
var canvas = document.getElementById('SimpleWave');
var ctx = canvas.getContext('2d');
var dataX = [1,2,3.5,4,5,6,7,8,9,10];//用csv第一行替换这里
var dataY = [10,20,30,40,50,60,70,80,90,100];//用csv第二行替换这里
var minX = Math.min.apply(null, dataX);
var maxX = Math.max.apply(null, dataX);
var stepX =(maxX-minX)/(dataX.length-1);
var minY = Math.min.apply(null, dataY);
var maxY = Math.max.apply(null, dataY);
var stepY =(maxY-minY)/(dataY.length-1);
var dataXY = dataX.map(function(x, index) {
return { x: x, y: dataY[index] };
});
var chart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: '(x=mp_avx,y=speedup)',//用csv文件名信息替换这里
data: dataXY,
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1,
fill: false
}]
},
options: {
animation: {
duration: 0
},
scales: {
x: {
type: 'linear',
position: 'bottom',
min: minX,
max: maxX,
ticks: {
stepSize: stepX,
callback: function(value, index, values) {
return value + ' ';
},
font: {
size: 14,
weight: 'bold'
}
}
},
y: {
min: minY,
max: maxY,
ticks: {
stepSize: stepY,
callback: function(value, index, values) {
return value + ' ';
},
font: {
size: 14,
weight: 'bold'
}
}
}
},
title: {
display: true,
text: 'SimpleWave'
}
}
});
chart.update();
</script>
</body>
</html>
效果图:
TODO:
XY轴的箭头。
XY轴显示范围外扩,让线条显示在范围内。
这些都不重要,实现出来会增加html代码量,在c语言中没有必要。文章来源地址https://www.toymoban.com/news/detail-798643.html
到了这里,关于c语言将csv文件中的XY轴数据转换为html波形图的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!