C语言作图-离开gnuplot辅助,还可用其他

概述

我在《如何最简地将C语言计算的数据通过gnuplot作出波形图来 》一文中讲了如何用gnuplot来对用C语言生成的信号处理数据进行可视化作图,生成png或svg图片等。可以通过这种方法,解决数据显示的问题。

其实,数据的可视化还有很多方法,gnuplot并非唯一选择,在大数据时代,数据可视化是共同的需求。百度也在此做了很多工作,百度的开源项目echarts ( http://www.echartsjs.com/ )有很强的数据作图能力。此外,vis.js ( http://visjs.org/ )在绘图上也很不错。

本文说明如何使用echarts来绘制C语言输出数据的曲线图,仍用调幅波数据进行说明。

echarts 要求的数据格式

echarts 要求的数据格式是:用一对方括号包裹横轴、纵轴数据,x,y间以逗号分隔,每行最后也以逗号结束。例如:

[0.000000e+000,1.500000e+000],
[1.250000e-004,1.212279e+000],
[2.500000e-004,4.616232e-001],
[3.750000e-004,-4.592564e-001],
[5.000000e-004,-1.193727e+000],
[6.250000e-004,-1.461940e+000],
[7.500000e-004,-1.169437e+000],
[8.750000e-004,-4.407572e-001],
......

在数据之前,使用html文本(记为echartshtml1.txt文件):

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
<script src="echarts.simple.min.js"></script>
  <title>Document</title>
 </head>
 <body>
    <div id="main" style="width: 1000px;height:400px;"></div>
	<script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
  xAxis: {},
    yAxis: {},
    series: [{
        type: 'line',
		showSymbol: false,
        smooth: true,
        data: [

data: [ 后插入数据段,在数据段之后,是html文本尾(记为echartshtml2.txt文件):

		]
    }]
        };
        myChart.setOption(option);
    </script> 
 </body>
</html>

因此,作图的html代码就是html前部(echartshtml1.txt)与 数据, 再与html 尾部(echartshtml2.txt)的合成。

C语言代码

本代码演示了如何读取文本文件并与数据组合输出为了静态html网页的基本方法。

//amdata.c
//用于计算AM调幅波数据并生成echarts绘图网页
#include<stdio.h>
#include<math.h>
#define pi 3.14159265
int printtxtfile(char str[])
{
  char ch;
  FILE *fp;
  fp=fopen(str,"r");
  ch=fgetc(fp);
  while(ch!=EOF)
    {
      putchar(ch);
      ch=fgetc(fp);
    }
  fclose(fp);
}
int main()
{
  double s,t;
  int i;      //循环变量
  printtxtfile("echartshtml1.txt");//输出html前部
   for (i=0; i<200; i++)
    {
      t=i/8000.0;
      s=(1+0.5*cos(2*pi*100*t))*cos(2*pi*800*t);
      printf("[%e,%e],\n",t,s);
    } 
  printtxtfile("echartshtml2.txt");//输出html尾部
}

编译:

tcc amdata.c

将echartshtml1.txt和echartshtml2.txt准备好,放在 amdata.exe 同一文件夹中。由于使用了echarts的js代码,所以也要从百度echarts网站下载echarts.simple.min.jshttp://www.echartsjs.com/dist/echarts.simple.min.js ) 也放在 amdata.exe 同一文件夹中。

执行:

> amdata.exe     //【将在屏幕上打出生成的html文本字串:】


<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
<script src="echarts.simple.min.js"></script>
  <title>Document</title>
 </head>
 <body>
    <div id="main" style="width: 1000px;height:400px;"></div>
        <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
  xAxis: {},
    yAxis: {},
    series: [{
        type: 'line',
                showSymbol: false,
        smooth: true,
        data: [
[0.000000e+000,1.500000e+000],
[1.250000e-004,1.212279e+000],
[2.500000e-004,4.616232e-001],
[3.750000e-004,-4.592564e-001],
[5.000000e-004,-1.193727e+000],
[6.250000e-004,-1.461940e+000],
[7.500000e-004,-1.169437e+000],
[8.750000e-004,-4.407572e-001],
[1.000000e-003,4.340170e-001],
[1.125000e-003,1.116608e+000],
[1.250000e-003,1.353553e+000],
[1.375000e-003,1.071724e+000],
[1.500000e-003,3.998348e-001],
[1.625000e-003,-3.897475e-001],
[1.750000e-003,-9.926600e-001],
[1.875000e-003,-1.191342e+000],
[2.000000e-003,-9.340170e-001],
[2.125000e-003,-3.450863e-001],
[2.250000e-003,3.331874e-001],
[2.375000e-003,8.407544e-001],
[2.500000e-003,1.000000e+000],
[2.625000e-003,7.772796e-001],
[2.750000e-003,2.848466e-001],
[2.875000e-003,-2.729477e-001],
[3.000000e-003,-6.840170e-001],
[3.125000e-003,-8.086583e-001],
[3.250000e-003,-6.253740e-001],
[3.375000e-003,-2.282865e-001],
[3.500000e-003,2.181992e-001],
[3.625000e-003,5.463097e-001],
[3.750000e-003,6.464466e-001],
[3.875000e-003,5.014263e-001],
[4.000000e-003,1.840170e-001],
[4.125000e-003,-1.772768e-001],
[4.250000e-003,-4.485973e-001],
[4.375000e-003,-5.380602e-001],
[4.500000e-003,-4.243066e-001],
[4.625000e-003,-1.587776e-001],
[4.750000e-003,1.564107e-001],
[4.875000e-003,4.057555e-001],
[5.000000e-003,5.000000e-001],
[5.125000e-003,4.057555e-001],
[5.250000e-003,1.564108e-001],
[5.375000e-003,-1.587776e-001],
[5.500000e-003,-4.243065e-001],
[5.625000e-003,-5.380602e-001],
[5.750000e-003,-4.485973e-001],
[5.875000e-003,-1.772769e-001],
[6.000000e-003,1.840170e-001],
[6.125000e-003,5.014263e-001],
[6.250000e-003,6.464466e-001],
[6.375000e-003,5.463098e-001],
[6.500000e-003,2.181992e-001],
[6.625000e-003,-2.282865e-001],
[6.750000e-003,-6.253740e-001],
[6.875000e-003,-8.086583e-001],
[7.000000e-003,-6.840170e-001],
[7.125000e-003,-2.729477e-001],
[7.250000e-003,2.848465e-001],
[7.375000e-003,7.772796e-001],
[7.500000e-003,1.000000e+000],
[7.625000e-003,8.407544e-001],
[7.750000e-003,3.331875e-001],
[7.875000e-003,-3.450862e-001],
[8.000000e-003,-9.340170e-001],
[8.125000e-003,-1.191342e+000],
[8.250000e-003,-9.926600e-001],
[8.375000e-003,-3.897475e-001],
[8.500000e-003,3.998347e-001],
[8.625000e-003,1.071724e+000],
[8.750000e-003,1.353553e+000],
[8.875000e-003,1.116608e+000],
[9.000000e-003,4.340171e-001],
[9.125000e-003,-4.407571e-001],
[9.250000e-003,-1.169437e+000],
[9.375000e-003,-1.461940e+000],
[9.500000e-003,-1.193727e+000],
[9.625000e-003,-4.592565e-001],
[9.750000e-003,4.616232e-001],
[9.875000e-003,1.212278e+000],
[1.000000e-002,1.500000e+000],
[1.012500e-002,1.212279e+000],
[1.025000e-002,4.616233e-001],
[1.037500e-002,-4.592563e-001],
[1.050000e-002,-1.193727e+000],
[1.062500e-002,-1.461940e+000],
[1.075000e-002,-1.169437e+000],
[1.087500e-002,-4.407572e-001],
[1.100000e-002,4.340169e-001],
[1.112500e-002,1.116608e+000],
[1.125000e-002,1.353553e+000],
[1.137500e-002,1.071724e+000],
[1.150000e-002,3.998349e-001],
[1.162500e-002,-3.897474e-001],
[1.175000e-002,-9.926600e-001],
[1.187500e-002,-1.191342e+000],
[1.200000e-002,-9.340170e-001],
[1.212500e-002,-3.450864e-001],
[1.225000e-002,3.331874e-001],
[1.237500e-002,8.407543e-001],
[1.250000e-002,1.000000e+000],
[1.262500e-002,7.772797e-001],
[1.275000e-002,2.848466e-001],
[1.287500e-002,-2.729476e-001],
[1.300000e-002,-6.840170e-001],
[1.312500e-002,-8.086583e-001],
[1.325000e-002,-6.253740e-001],
[1.337500e-002,-2.282866e-001],
[1.350000e-002,2.181991e-001],
[1.362500e-002,5.463097e-001],
[1.375000e-002,6.464466e-001],
[1.387500e-002,5.014264e-001],
[1.400000e-002,1.840170e-001],
[1.412500e-002,-1.772768e-001],
[1.425000e-002,-4.485973e-001],
[1.437500e-002,-5.380602e-001],
[1.450000e-002,-4.243066e-001],
[1.462500e-002,-1.587776e-001],
[1.475000e-002,1.564107e-001],
[1.487500e-002,4.057554e-001],
[1.500000e-002,5.000000e-001],
[1.512500e-002,4.057555e-001],
[1.525000e-002,1.564108e-001],
[1.537500e-002,-1.587775e-001],
[1.550000e-002,-4.243065e-001],
[1.562500e-002,-5.380602e-001],
[1.575000e-002,-4.485973e-001],
[1.587500e-002,-1.772769e-001],
[1.600000e-002,1.840169e-001],
[1.612500e-002,5.014263e-001],
[1.625000e-002,6.464466e-001],
[1.637500e-002,5.463098e-001],
[1.650000e-002,2.181992e-001],
[1.662500e-002,-2.282865e-001],
[1.675000e-002,-6.253739e-001],
[1.687500e-002,-8.086583e-001],
[1.700000e-002,-6.840170e-001],
[1.712500e-002,-2.729478e-001],
[1.725000e-002,2.848465e-001],
[1.737500e-002,7.772796e-001],
[1.750000e-002,1.000000e+000],
[1.762500e-002,8.407544e-001],
[1.775000e-002,3.331876e-001],
[1.787500e-002,-3.450862e-001],
[1.800000e-002,-9.340169e-001],
[1.812500e-002,-1.191342e+000],
[1.825000e-002,-9.926601e-001],
[1.837500e-002,-3.897476e-001],
[1.850000e-002,3.998347e-001],
[1.862500e-002,1.071724e+000],
[1.875000e-002,1.353553e+000],
[1.887500e-002,1.116608e+000],
[1.900000e-002,4.340171e-001],
[1.912500e-002,-4.407570e-001],
[1.925000e-002,-1.169437e+000],
[1.937500e-002,-1.461940e+000],
[1.950000e-002,-1.193728e+000],
[1.962500e-002,-4.592566e-001],
[1.975000e-002,4.616231e-001],
[1.987500e-002,1.212278e+000],
[2.000000e-002,1.500000e+000],
[2.012500e-002,1.212279e+000],
[2.025000e-002,4.616234e-001],
[2.037500e-002,-4.592562e-001],
[2.050000e-002,-1.193727e+000],
[2.062500e-002,-1.461940e+000],
[2.075000e-002,-1.169437e+000],
[2.087500e-002,-4.407573e-001],
[2.100000e-002,4.340168e-001],
[2.112500e-002,1.116608e+000],
[2.125000e-002,1.353553e+000],
[2.137500e-002,1.071724e+000],
[2.150000e-002,3.998350e-001],
[2.162500e-002,-3.897473e-001],
[2.175000e-002,-9.926599e-001],
[2.187500e-002,-1.191342e+000],
[2.200000e-002,-9.340171e-001],
[2.212500e-002,-3.450864e-001],
[2.225000e-002,3.331873e-001],
[2.237500e-002,8.407543e-001],
[2.250000e-002,1.000000e+000],
[2.262500e-002,7.772797e-001],
[2.275000e-002,2.848467e-001],
[2.287500e-002,-2.729476e-001],
[2.300000e-002,-6.840169e-001],
[2.312500e-002,-8.086583e-001],
[2.325000e-002,-6.253740e-001],
[2.337500e-002,-2.282866e-001],
[2.350000e-002,2.181991e-001],
[2.362500e-002,5.463097e-001],
[2.375000e-002,6.464466e-001],
[2.387500e-002,5.014264e-001],
[2.400000e-002,1.840171e-001],
[2.412500e-002,-1.772768e-001],
[2.425000e-002,-4.485972e-001],
[2.437500e-002,-5.380602e-001],
[2.450000e-002,-4.243066e-001],
[2.462500e-002,-1.587776e-001],
[2.475000e-002,1.564107e-001],
[2.487500e-002,4.057554e-001],
                ]
    }]
        };
        myChart.setOption(option);
    </script>
 </body>
</html>

结果

所以,用重定向可生成html文件:

 amdata.exe  >amdata.html

然后,用浏览器(IE9以上版本)打开amdata.html即可。

在这里插入图片描述

关于echart的使用,在Echarts官网上有很多例子。

同理,用 vis.js ( http://visjs.org/ )也可实现,只不过数据格式要按 vis.js 的要求来做。

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值