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>

效果图:
在这里插入图片描述
TODO:
XY轴的箭头。
XY轴显示范围外扩,让线条显示在范围内。
这些都不重要,实现出来会增加html代码量,在c语言中没有必要。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/628793.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

网络命令ping和telnet

1. 请解释ping和telnet的工作原理。 ping和telnet是两种常用的网络工具&#xff0c;其工作原理分别如下&#xff1a; ping&#xff1a; 目的&#xff1a;ping主要用于检查网络是否通畅以及测量网络连接速度。工作原理&#xff1a;ping是基于ICMP&#xff08;Internet Control …

HTML5:dialog

JavaScript 练手小技巧&#xff1a;HTML5 的 dialog 标签制作对话框_dialog html-CSDN博客 <dialog id"dialog"> <h2 align"center">修改</h2> <input type"text" id"title1" placeholder"标题" value…

智能小程序小部件(Widget)导航、地图、画布等组件,以及开放能力、原生组件说明

智能小程序小部件(Widget)导航、地图、画布等组件&#xff0c;以及开放能力、原生组件说明。 导航组件 navigator 页面链接&#xff0c;控制小程序的跳转。navigator 子节点的背景色应为透明色。 属性说明 属性名类型默认值必填说明urlstring是跳转地址deltanumber1否当 …

海思SD3403,SS928/926,hi3519dv500,hi3516dv500移植yolov7,yolov8(9)

上一节yolov8的训练已经完成了,现在要开始做模型的转换了,这里和yolov7方式相似,但是有一些差异,尤其是yolov7的不带NMS部分的输出顺序和yolov8的输出顺序与格式是有差异的。 首先还是要自己手动加入rpn_op,这里包含了filter,sort,nms部分。 我们一个一个看,首先filter.py…

IDEA 2022.3.3 安装教程

1.下载2022.3.3版本IDEA 链接&#xff1a;https://pan.baidu.com/s/1z-Yfl7fWHgqz8SQLn2-u0g?pwd949u 提取码&#xff1a;949u 2.安装 下载完成后&#xff0c;双击exe安装包&#xff0c; 点击next 3.选择方式3 4.将下面文件复制到任意位置&#xff08;不要有中文路径&…

css 3D立体动画效果怎么转这个骰子才能看到5

css 3D立体动画效果怎么转这个骰子才能看到5 <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equ…

[机缘参悟-128] :人的思想体系与架构:佛学是一套自恰的世界观、人生观、价值观的系统

目录 一、概述 二、佛学的世界观&#xff1a;世界的本质与生命的意义 三、佛学的人生观&#xff1a;人的一生 四、佛学的价值观&#xff1a;评判事事的标准 五、为什么说佛学是自恰的 六、佛学的假设与前提 七、佛学常见术语 7.1 业力&#xff08;能量、有善恶之分&…

《微信小程序开发从入门到实战》学习八十一

6.11 内部音频API 6.11.2 内部音频事件监听API 内部音频上下文对象可以设置一些事件监听函数 。在音频播放过程&#xff0c;发生 特定事件会执行特定的回调函数。代码如下&#xff1a; // 监听音频进入可以播放状态的事件&#xff0c;但不保证后面可以流畅播放 innerAudioCon…

鸿蒙使用 axios

1、已安装ohpm&#xff0c;可参考上一篇 2、回到项目的根目录执行 ohpm install ohos/axios 安装成功后&#xff0c;查看项目的package 3、开放网络权限 在模块的module.json5中添加权限 "module": {"requestPermissions": [{"name": "…

【数据库原理】(25)数据完整性

一.完整性概述 数据库的完整性是保证数据正确性和一致性的关键。它防止数据库中存在不符合业务逻辑或语义规则的数据&#xff0c;避免错误信息的输入和输出。数据库的完整性和安全性不同&#xff0c;安全性关注的是防止非法用户的访问和恶意操作&#xff0c;而完整性则关注数据…

黑马苍穹外卖学习Day7

文章目录 缓存菜品实现思路代码开发 缓存套餐Spring Cache入门案例实现思路代码开发 添加购物车需求分析和设计代码开发 查看购物车需求分析代码开发 清空购物车需求分析代码实现 缓存菜品 实现思路 代码开发 Controller层 RestController("userDishController") …

2024.1.16 GCC 编译选项 屏蔽某些警告 CMAKE_CXX_FLAGS

gcc警告选项汇总 请求或取消警告的选项 警告是诊断消息&#xff0c;报告的结构本质上不是错误的&#xff0c;但是有风险或表明可能有错误。 以下与语言无关的选项不会启用特定的警告&#xff0c;但会控制GCC生成的诊断类型。 -fsyntax-only 检查代码中的语法错误&#xff0c;…

ROS第 6 课 编写简单的订阅器 Subscriber

文章目录 第 6 课 编写简单的订阅器 Subscriber1. 编写订阅者节点2. 测试发布者和订阅者 第 6 课 编写简单的订阅器 Subscriber 订阅器是基于编辑了发布器的基础上创建的&#xff0c;只有发布了消息&#xff0c;才有可能订阅。若未编辑发布器&#xff0c;可前往"ROS第5课 …

FlinkSQL【分组聚合-多维分析-性能调优】应用实例分析

FlinkSQL处理如下实时数据需求&#xff1a; 实时聚合不同 类型/账号/发布时间 的各个指标数据&#xff0c;比如&#xff1a;初始化/初始化后删除/初始化后取消/推送/成功/失败 的指标数据。要求实时产出指标数据&#xff0c;数据源是mysql cdc binlog数据。 代码实例 --SET t…

解决kali beef启动失败解问题

只限于出现这个提示的时候使用 卸载 ruby apt remove ruby 卸载 beef apt remove beef-xss 重新安装ruby apt-get install ruby apt-get install ruby-dev libpcap-dev gem install eventmachine 重新安装beef apt-get install beef-xss 弄完以上步骤如果还是不行就重启kali再试…

cmake构建动态库实例(cmakelist)

文章目录 一、开发实例1.1 代码目录1.2 代码内容1.2.1 CMakeLists.txt1.2.2 mylib.cpp1.2.2 mylib.h1.2 编译二、动态库使用方法一、动态链接源代码构建运行方法二:dlopen方式一、开发实例 通过cmake构建静态开发实例如下: 1.1 代码目录 代码目录结构如下:

nestjs 装饰器

1、装饰器定义 装饰器是一种特殊的类型声明&#xff0c;它可以附加在类、方法、属性、参数上边 需开启tsconfig.json中 "experimentalDecorators":true 生成tsconfig.json文件 tsc -init 2、类装饰器 // 类装饰器 主要是通过符号添加装饰器 // 装饰器会自动把cl…

CCC数字钥匙标准3.0版本解读(23)

文章目录 17.8 数据结构定义17.8.1 请求报头17.8.2 响应报头17.8.3 Key类型17.8.4 EncryptedDataContainer17.8.5 未加密的uiBundle17.8.6 数字钥匙状态17.8.7 manageKey操作类型17.8.8 钥匙操作类型17.8.9 通知的事件类型17.8.10 事件通知的事件数据17.8.11 未加密的时间通知数…

【MySQL】MySQL表的增删查改以及聚合函数/group by句子的使用

文章目录 一、创建--Create1.单行数据 全列插入2.多行数据 指定列插入3.插入否则更新4.替换 -- replace 二、读取--Retrieve1.SELECT列1.1全列查询1.2指定列查询1.3查询字段为表达式1.4为查询结果指定别名1.5 结果去重 -- distinct 2.WHERE 条件3.结果排序4.筛选分页结果 三、…

《数据结构》学习笔记

1.算法分析的两个主要任务&#xff1a;正确性&#xff08;不变性 单调性&#xff09; 复杂度。 2.复杂度分析的主要方法&#xff1a; 迭代&#xff1a;级数求和&#xff1b;递归&#xff1a;递归跟踪 递推方程猜测 验证 3.级数&#xff1a; &#xff08;1&#xff09;算…