c语言将csv文件中的XY轴数据转换为html波形图

本文主要是介绍c语言将csv文件中的XY轴数据转换为html波形图，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

目标：
c语言实现一个最简化的csv转html波形图显示方案。

csv文件格式：
共两行数据，第一行是x轴数据，第二行是y轴数据。
csv文件名分为3段: 波形图名称，x轴名称，y轴名称。

c代码：
int csv2html_wave(csv_file_name,html_file_name);

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>