C語言作圖-離開gnuplot輔助，還可用其他
阿新 • • 發佈：2018-11-17
文章目錄
概述
我在《如何最簡地將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 在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 的要求來做。