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语言中没有必要。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

springboot集成shiro+前端vue,前后端分离项目遇到跨域以及sessionid拿不到等问题

近期在写前后端分离的项目&#xff0c;由于前后端分离导致原来使用的shiro配置无法满足现有系统要求。同时在前后端分离项目中存在的一些问题。例如&#xff0c;一些用户信息需要存储在后端方便进行安全性判断&#xff0c;但这些存储在后端的session前端却获取不到&#xff08;…

开发知识点-java基础

java基础知识整理 windows 多版本java jar包不能直接打开 需要java -jar问题解决 windows 多版本 控制面板 java15 download 多版本 https://www.cnblogs.com/chenmingjun/p/9941191.html https://gitee.com/shixinke/JC-jEnv/repository/archive/master.zip java jar包不…

2024年AMC8历年真题练一练和答案详解(10),以及全真模拟题

六分成长继续为您分享AMC8历年真题&#xff0c;最后两天通过高质量的真题来体会快速思考、做对题目的策略。 题目从575道在线题库&#xff08;来自于往年真题&#xff09;中抽取5道题&#xff0c;每道题目均会标记出自年份和当年度的序号&#xff0c;并附上详细解析。【使用六…

CUDA tips

命令行查看核函数消耗的寄存器和共享内存数量 nvcc --ptxas-options-v reduce_sum.cu nvprof 使用 由于 8.0 及以上计算能力的显卡用不了 nvprof&#xff0c;官方建议用 nsight system 和 ncu&#xff0c;但是如果只想命令行打印表格查看 kernel 概况感觉还是 nvprof 方便&am…

三个方法解决pycharm中 ,alt +enter自动导入包的快捷键失效的问题

目录 1. 检查IDE设置&#xff1a;查看IDE的设置&#xff0c;确保自动导入包的功能是启用的 2. file>settings>keymap 里没有找到 alt enter 的快捷键 3. 按照网上教程说的如下选项勾上&#xff0c;也没用 4. 在右侧的General设置界面中&#xff0c;找到并点击Auto I…

YOLOv5改进 | 2023主干篇 | 多种轻量化卷积优化PP-HGNetV2改进主干(全网独家创新)

一、本文介绍 Hello,大家好,上一篇博客我们讲了利用HGNetV2去替换YOLOv5的主干,经过结构的研究我们可以发现在HGNetV2的网络中有大量的卷积存在,所以我们可以用一种更加轻量化的卷积去优化HGNetV2从而达到更加轻量化的效果(亲测优化后的HGNetV2网络比正常HGNetV2精度更高…

Mac OS系统 SVN客户端 smartSVN 安装和基础使用

一、下载SVN客户端 官网地址&#xff0c;可以根据自己的系统下载 https://www.smartsvn.com/download/ 二、安装客户端和激活 第一步安装&#xff0c;很简单。 第二步&#xff0c;激活&#xff0c;选择激活文件 创建一个许可文件&#xff0c;例如 smartSvn.license。 内容如…

RabbitMQ交换机(1)

1.交换机Exchange RabbitMQ消息传递模型的核心思想是: 生产者生产的消息从不会直接发送到队列。实际上&#xff0c;通常生产者甚至都不知道这些消息传递传递到了哪些队列中。 相反&#xff0c;生产者只能将消息发送到交换机(exchange)&#xff0c;交换机工作的内容非常简单&am…

PDF有编辑密码怎么办

目录 注意&#xff1a; windows方法&#xff1a; 1 python 下载 2 打开命令行 3 安装 pikepdf 4 编写python脚本 5 使用py脚本 6解密完成 Linux方法&#xff1a; 注意&#xff1a; 此方法可以用于破解PDF的编辑密码&#xff0c;而不是PDF的打开密码 当遇到类似如下问…

Matlab交互式的局部放大图

在数据可视化中&#xff0c;很多时候需要对某一区间的数据进行局部放大&#xff0c;以获得对比度更高的可视化效果。下面利用 MATLAB 语言实现一个交互式的局部放大图绘制。 源码自行下载&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1yItVSinh6vU4ImlbZW6Deg?pwd9d…

【机器学习300问】10、学习率设置过大或过小对训练有何影响?

在上一篇文章中&#xff0c;首次出现了学习率这个词&#xff0c;在这篇文章中我会详细介绍一下它是什么&#xff0c;到底对机器学习的训练有着怎样的影响。 一、学习率是什么&#xff1f; 先来复习一下梯度下降算法&#xff0c;在每次迭代过程中&#xff0c;算法计算目标函数关…

给WordPress网站增加一个带时间的led广告牌

WordPress 后台》外观》小工具》自定义html》添加到合适位置 其他系统可自行添加合适位置 <style type"text/css">.studytextgzbox {background: #F9F9F9; border: 1px solid #999999;margin: 1px;text-align:center; float: left;line-height: 28px;hei…

WordPress回收站自动清空时间?如何关闭回收站或设置自动清理天数?

我们在WordPress后台的文章、页面、评论等页面都可以看到有回收站&#xff0c;意思就是我们不能直接删除某篇文章、页面、评论&#xff0c;而是需要现将它们移至回收站&#xff0c;然后再到回收站永久删除&#xff0c;或等回收站自动清理。 如上图所示&#xff0c;WordPress 6.…

【机组】算术逻辑运算单元实验的解密与实战

​&#x1f308;个人主页&#xff1a;Sarapines Programmer&#x1f525; 系列专栏&#xff1a;《机组 | 模块单元实验》⏰诗赋清音&#xff1a;云生高巅梦远游&#xff0c; 星光点缀碧海愁。 山川深邃情难晤&#xff0c; 剑气凌云志自修。 ​ 目录 &#x1f33a; 一、 实验目的…

服务器推送数据你还在用 WebSocket么?

当涉及到推送数据时,人们首先会想到 WebSocket。 的确,WebSocket 允许双向通信,可以自然地用于服务器到浏览器的消息推送。 然而,如果只需要单向的消息推送,HTTP 通过服务器发送的事件也有这种功能。 WebSocket 的通信过程如下: 首先,通过 HTTP 切换协议。服务器返回 101 状…

rust获取本地ip地址的方法

大家好&#xff0c;我是get_local_info作者带剑书生&#xff0c;这里用一篇文章讲解get_local_info的使用。 get_local_info是什么&#xff1f; get_local_info是一个获取linux系统信息的rust三方库&#xff0c;并提供一些常用功能&#xff0c;目前版本0.2.4。详细介绍地址&a…

直接写一区! ZOA-PCNN-AT-SVM斑马优化并行卷积-支持向量机融合注意力机制的故障识别程序,特征可视化,实验多!图多!

适用平台&#xff1a;Matlab2023版本及以上 本原创程序提出的ZOA-PCNN-AT-SVM故障识别模型还没有人写&#xff01;在此基础上进一步对参考模型进行多重改进&#xff0c;程序注释清晰&#xff0c;干货满满&#xff0c;下面对文章和程序做简要介绍&#xff01; ①识别模型部分参…

计算机导论10-软件与软件工程

文章目录 软件软件的概念软件的定义软件的特征 软件的保护与授权软件的法律保护软件许可 软件工程软件危机软件危机的概念产生软件危机的原因 软件工程的概念软件工程的定义软件工程基本原理软件工程框架软件工程三要素 软件工程方法学软件工程方法软件工程工具软件工程过程 软…

【RPC】网络通信:哪种网络IO模型最适合RPC框架?

一、背景 RPC是解决进程间通信的一种方式。一次RPC调用&#xff0c;本质就是服务消费者与服务提供者间的一次网络信息交换的过程。服务调用者通过网络IO发送一条请求消息&#xff0c;服务提供者接收并解析&#xff0c;处理完相关的业务逻辑之后&#xff0c;再发送一条响应消息…

AttributeError: module ‘openai‘ has no attribute ‘error‘解决方案

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…