概述
我在《如何最简地将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.js
( http://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 的要求来做。