cchart波形图表在aardio中的简单调用示例

By admin at 2020-03-08 • 2人收藏 • 4865人看过

首先介绍下这个图表:

CChart可以绘制多种二维、三维曲线,包括折线图、等高线图、云图、饼图、柱图、散点图、面积图、直方图、极线图、甘特图、雷达图、瀑布图、K线图,频谱图等,功能非常全面。 而且,CChart内部选项极为丰富,无论是曲线本身,还是标题、坐标轴、图例、背景、图像注释等部分,都有大量的选项可供设置,甚至消息响应、右键菜单等元素,都提供了自定义的方法。

CChart最大的优势,还是在于其对用户的友好性。在追求功能的同时,CChart在简化调用方面,做到了极致,一般只用几句代码就可以画出精致的图像。这一点可以说不仅胜过绝大部分非商业的图表软件,甚至不输于大部分商业图表软件。


CChart 开源免费, 支持MIT开源协议

CChart官方: http://www.cchart.net/


aardio调用cchart示例的github地址:

https://github.com/popde/aardio-cchart



/////////本地下载地址 /////////////////////////////////////////////////

2021/10/12 最新版Cchart_x86.dll

更新: 添加了函数ChooseCurChart,参数可以是序号,也可以是hwnd句柄,主要用于同一个界面包含多个波形图的情况, 用来进行内存隔离.

CChartu_20211012.zip

新版CChartu完整示例工程.7z

使用文档.zip

//////////////////////////////////////////////////////////////////////////////





image.png


15 个回复 | 最后更新于 2022-10-05
2020-04-18   #1

添加双Y轴曲线图:(共享X轴曲线)

import win.ui;
/*DSG{{*/
var winform = win.form(text="aardio form";right=759;bottom=469)
winform.add(
static={cls="static";text="Static";left=0;top=0;right=760;bottom=467;db=1;dl=1;dr=1;dt=1;notify=1;transparent=1;z=1}
)
/*}}*/

import cchart;
  
winform.static.onEraseBkgnd  = function(hwnd,message,wParam,lParam){
    return 0;//禁止擦除背景
};

cchart.CreateChart();
cchart.Attach1(winform.static.hwnd,10);//kTypeShareX=10 共享X轴
cchart.ChooseCurChart1(winform.static.hwnd);
 
//X轴共享波形
cchart.ResizePlots(2);
var x = { double arr[200] = {0} };
var y = { double arr[200] = {0} };
for(i=1;200;1){
    x.arr[i] = i ;
    y.arr[i] = 5.0*math.sin(i*2.0*3.14/360.0*3.0) ;
}
//添加曲线
cchart.AddCurve1(x,y,200,0);
//设置曲线0的Y轴到左边
cchart.AddAxis(0,0);
for(i=1;200;1){
    y.arr[i] = 2.0*math.sin(i*1.0*3.14/360.0*3.0) ;
}
//再增加一跳曲线
cchart.AddCurve1(x,y,200,1);
//设定曲线1的Y轴到右边
cchart.AddAxis(2,1)
//设置标题
cchart.SetTitle("双Y轴");
cchart.ReDraw2();

 
winform.show();
win.loopMessage();
return winform;

image.png



2020-04-19   #2

cchart 第一个示例:

image.png

import win.ui;
/*DSG{{*/
var winform = win.form(text="aardio form";right=759;bottom=469)
winform.add(
static={cls="static";left=0;top=0;right=760;bottom=462;db=1;dl=1;dr=1;dt=1;notify=1;transparent=1;z=1}
)
/*}}*/

//调用CChart波形图动态库函数
import cchart;

cchart.CreateChart();
cchart.Attach1(winform.static.hwnd,0);

cchart.ChooseCurChart1(winform.static.hwnd);

cchart.AddPoint2D(-3.0, 9.0 ,0,0);
cchart.AddPoint2D(-2.0, 4.0 ,0,0);
cchart.AddPoint2D(-1.0, 1.0 ,0,0);
cchart.AddPoint2D(0.0, 0.0 ,0,0);
cchart.AddPoint2D(1.0, 1.0 ,0,0);
cchart.AddPoint2D(2.0, 4.0 ,0,0);
cchart.AddPoint2D(3.0, 9.0 ,0,0);

cchart.SetTitle("Hello World,我的第一个CChart程序!");
cchart.ReDraw2();

winform.onClose = function(hwnd,message,wParam,lParam){
    cchart.Detach(winform.static.hwnd);
    cchart.DestroyChart();
}


winform.show();
win.loopMessage();
return winform;


2020-04-19   #3

第二例: 开启cchart的交互功能

这个在aardio中不需要什么修改, 在属性里开启[事件回调]即可

image.png

然后, 还是原来 第一个示例里面的代码, 运行即可. 然后在波形图显示区就可以点鼠标右键弹出系统默认菜单了.

image.png

其实右键菜单的功能非常丰富,看看各条菜单的作用和效果。

其他详细功能可以参考官方的 第三课 

2020-04-19   #4

第三例: 等高线

image.png

import win.ui;
/*DSG{{*/
var winform = win.form(text="aardio form";right=759;bottom=469)
winform.add(
static={cls="static";left=0;top=0;right=760;bottom=457;db=1;dl=1;dr=1;dt=1;notify=1;transparent=1;z=1}
)
/*}}*/

//调用CChart波形图动态库函数
import cchart;

cchart.CreateChart();
cchart.Attach1(winform.static.hwnd,4);//kTypeContourLine=4 等高线图
cchart.ChooseCurChart1(winform.static.hwnd);

//定义静态回调函数
func = function(x,y){
    var ret = 1.0/((x-1.0)*(x-1.0)+y*y+1.0);
    return ret;
}
//dll中在别的线程中调用,所以这里用thread
func_c = thread.tocdecl(func,"double(double,double)");
//cchart.SetType(6);
cchart.SetFieldFcn(func_c);
cchart.SetPlotRange(-2.0, 2.0, -2.0, 2.0);
cchart.SetTitle("Cchart等高线");
//设置等高线的精度,一般设置为5或者6就可以了。设置得越高,第一次绘制的时候延迟就越长
cchart.SetContourPrecision(5);
//设置等高线高度的个数
cchart.SetContourLineNum(50);
cchart.ReDraw2();


winform.onClose = function(hwnd,message,wParam,lParam){
    cchart.Detach(winform.static.hwnd);
    cchart.DestroyChart();
}


winform.show();
win.loopMessage();
return winform;



2020-04-19   #5

第四例: 折线图 的一些操作

image.png

import win.ui;
/*DSG{{*/
var winform = win.form(text="aardio form";right=759;bottom=469)
winform.add(
static={cls="static";left=0;top=0;right=760;bottom=428;db=1;dl=1;dr=1;dt=1;notify=1;transparent=1;z=1}
)
/*}}*/

import cchart;

cchart.CreateChart();
cchart.Attach1(winform.static.hwnd,0);//kTypeXY=0 折线图
cchart.ChooseCurChart1(winform.static.hwnd);

var x = { double arr[200] = {0} };
var y = { double arr[200] = {0} };
for(i=1;200;1){
	x.arr[i] = i ;
	y.arr[i] = 5.0*math.sin(i*2.0*3.14/360.0*3.0) ;
}

cchart.AddCurve1(x,y,200,0);
//显示图例
cchart.SetLegendShow(true,0)
//设置图例名称
cchart.SetDataTitle("aardio王菲",0,0)
//设置轴名,左坐标轴为0,下坐标轴为1,右坐标轴为2,上坐标轴为3
cchart.SetAxisTitle1("左边轴名",0,0);
cchart.SetAxisTitle1("下边轴名",1,0);
//设置显示网格
cchart.SetGridLine(true,true,true,true,0);
//设置背景色
cchart.SetBkgndColor(0xFFE6C2,0);
cchart.ReDraw2();

winform.onClose = function(hwnd,message,wParam,lParam){
    cchart.Detach(winform.static.hwnd);
    cchart.DestroyChart();
}


winform.show();
win.loopMessage();
return winform;


2020-04-19   #6

第五例: 饼图

image.png

import win.ui;
/*DSG{{*/
var winform = win.form(text="aardio form";right=759;bottom=469)
winform.add(
static={cls="static";left=0;top=0;right=760;bottom=428;db=1;dl=1;dr=1;dt=1;notify=1;transparent=1;z=1}
)
/*}}*/

import cchart;

cchart.CreateChart();
cchart.Attach1(winform.static.hwnd,1);//kTypePie=1 饼图
cchart.ChooseCurChart1(winform.static.hwnd);

cchart.AddPie1(28,"VB");
cchart.AddPie1(22,"C++");
cchart.AddPie1(21,"无名氏");
cchart.AddPie1(39,"aardio");
cchart.ReDraw2();

winform.onClose = function(hwnd,message,wParam,lParam){
    cchart.Detach(winform.static.hwnd);
    cchart.DestroyChart();
}

winform.show();
win.loopMessage();
return winform;


2020-04-19   #7

第六例: 柱状图

image.png

import win.ui;
/*DSG{{*/
var winform = win.form(text="aardio form";right=759;bottom=469)
winform.add(
static={cls="static";left=0;top=0;right=760;bottom=465;db=1;dl=1;dr=1;dt=1;notify=1;transparent=1;z=1}
)
/*}}*/

import cchart;

cchart.CreateChart();
cchart.Attach1(winform.static.hwnd,2);//kTypeStem=2 柱图
cchart.ChooseCurChart1(winform.static.hwnd);
var data = { double arr[4]={0}; };

data.arr[1]=28;
data.arr[2]=22;
data.arr[3]=21;
data.arr[4]=39;


cchart.AddStems(data,4);
//显示图例
cchart.SetLegendShow(true,0)
cchart.SetDataTitle("使用率1",0,0)

cchart.SetStemLabel("VB",0);
cchart.SetStemLabel("C++",1);
cchart.SetStemLabel("无名氏",2);
cchart.SetStemLabel("aardio",3);

data.arr[1]=20;
data.arr[2]=38;
data.arr[3]=12;
data.arr[4]=30;

cchart.AddStems(data,4);
cchart.SetLegendShow(true,1)
cchart.SetDataTitle("使用率2",1,0)

cchart.ReDraw2();

winform.onClose = function(hwnd,message,wParam,lParam){
    cchart.Detach(winform.static.hwnd);
    cchart.DestroyChart();
}
winform.show();
win.loopMessage();
return winform;


2020-04-19   #8

第七例: 动态显示波形(实时波形)

此例子在第一个折线图例子上添加定时器得来

方式1:波形压缩

GIF.gif

import win.ui;
/*DSG{{*/
var winform = win.form(text="aardio form";right=759;bottom=469)
winform.add(
button={cls="button";text="动起来";left=0;top=440;right=119;bottom=470;db=1;dl=1;z=2};
button2={cls="button";text="暂停";left=134;top=440;right=253;bottom=470;db=1;dl=1;z=3};
static={cls="static";left=0;top=0;right=760;bottom=428;db=1;dl=1;dr=1;dt=1;notify=1;transparent=1;z=1}
)
/*}}*/

import cchart;

cchart.CreateChart();
cchart.Attach1(winform.static.hwnd,0);//kTypeXY=0 折线图
cchart.ChooseCurChart1(winform.static.hwnd);
//修改开屏版权提示
//cchart.SetDefMainString("hello aardio");
//cchart.SetDefSubString("这里是副提示信息...");

//设置显示网格
cchart.SetGridLine(true,true,true,true,0);
//设置背景色
cchart.SetBkgndColor(0xFFE6C2,0);

var timeid;
var index = 0;

//开定时器
timeid = winform.setInterval(
	300,function(){
		cchart.AddPoint2D(index, math.random(0,50) ,0,0);
		cchart.ReDraw2();
		index++;
	}
);

winform.button.oncommand = function(id,event){
    //开定时器
	winform.changeInterval(timeid,300);
}
winform.button2.oncommand = function(id,event){
    if(timeid){
        //暂停定时器
    	winform.changeInterval(timeid,-1);	
    }
	
}

//防止闪烁
winform.static.onEraseBkgnd  = function(hwnd,message,wParam,lParam){
    return 0;//禁止擦除背景
};


winform.onClose = function(hwnd,message,wParam,lParam){
    cchart.Detach(winform.static.hwnd);
    cchart.DestroyChart();
}



winform.show();
win.loopMessage();
return winform;


方式2:波形清除

修改两处地方即可。

screenshots.gif


K_M3NXZB4FBGPZMNRB7WLFH.png


2020-04-19   #9

第八例: 三维线图个曲面图 (3dLine/surface)

image.png

import win.ui;
/*DSG{{*/
var winform = win.form(text="aardio form";right=759;bottom=469)
winform.add(
static={cls="static";left=0;top=0;right=760;bottom=428;db=1;dl=1;dr=1;dt=1;notify=1;transparent=1;z=1}
)
/*}}*/

import cchart;

cchart.CreateChart();
cchart.Attach1(winform.static.hwnd,13);//kType3DSurface=13 3维曲面图
cchart.ChooseCurChart1(winform.static.hwnd);
var x = { double arr[200] = {0} };
var y = { double arr[200] = {0} };
var z = { double arr[200] = {0} };
for(i=1;200;1){
	x.arr[i] = 2.0*3.1415926536*i/200*5; ;
	y.arr[i] = math.cos(x.arr[i]);
	z.arr[i] = math.sin(x.arr[i]);
}

cchart.AddCurve2(x,y,z,200);
cchart.ReDraw2();

winform.onClose = function(hwnd,message,wParam,lParam){
    cchart.Detach(winform.static.hwnd);
    cchart.DestroyChart();
}


winform.show();
win.loopMessage();
return winform;



2020-04-19   #10

第九例: 分裂图

image.png

import win.ui;
/*DSG{{*/
var winform = win.form(text="aardio form";right=759;bottom=469)
winform.add(
static={cls="static";text="Static";left=0;top=0;right=760;bottom=466;db=1;dl=1;dr=1;dt=1;notify=1;transparent=1;z=1}
)
/*}}*/

import cchart;

        
winform.static.onEraseBkgnd  = function(hwnd,message,wParam,lParam){
    return 0;//禁止擦除背景
};


cchart.CreateChart();
cchart.Attach1(winform.static.hwnd,9);//kTypeSplit=9 分裂视图
cchart.ChooseCurChart1(winform.static.hwnd);
//cchart.ReDraw2();
//第一个参数mode表示分裂的模式。查看Chart.h文件头部被注释掉的代码可知:mode=0表示不分裂;mode=1表示行列分裂;mode=2表示左一右二分裂;mode=3表示左二右一分裂;mode=3表示上一下二分裂;mode=4表示上二下一分裂
//第二个参数nRows表示分裂的行数,第三个参数nCols表示分裂的列数。这两个参数只有当mode=1时候才起作用,其它时候被忽略
cchart.ResizePlots1(2,1,2);
var x = { double arr[200] = {0} };
var y = { double arr[200] = {0} };
for(i=1;200;1){
	x.arr[i] = i ;
	y.arr[i] = 5.0*math.sin(i*2.0*3.14/360.0*3.0) ;
}

cchart.AddCurve1(x,y,200,0);
cchart.AddAxis(0,0);
for(i=1;200;1){
	y.arr[i] = 2.0*math.sin(i*1.0*3.14/360.0*3.0) ;
}
cchart.AddCurve1(x,y,200,1);
cchart.AddAxis(0,1)

for(i=1;200;1){
	y.arr[i] = math.sin(i*6.0*3.14/360.0*3.0) ;
}
cchart.AddCurve1(x,y,200,2);
cchart.AddAxis(0,1)


cchart.SetTitle("分裂图");
cchart.ReDraw2();

winform.onClose = function(hwnd,message,wParam,lParam){
    cchart.Detach(winform.static.hwnd);
    cchart.DestroyChart();
}

winform.show();
win.loopMessage();
return winform;


2020-09-16   #11

非常感谢,很好的教程!

2020-10-23   #12

这个ccchar收藏了好久了, 好教程,省得摸索了

2022-10-05   #13

想请教下,我下载了示例,运行不了,怎么解决。运行之后显示这个RAW CALLBACK ERROR 210922.png

2022-10-05   #14

回复#13 @onecp :

我刚刚专门下载试了下, 没出现你那个问题, 

这个dll是vc++编写的, 你这个问题有可能是c++运行库的缺失造成的, 

你百度搜下 [VC运行库合集] ,或者从华军直接下载最新版VC运行库 https://www.onlinedown.net/soft/1164015.htm

安装下应该就可以了. 

2022-10-05   #15

回复#14 @admin :谢谢


登录后方可回帖

登 录
信息栏
公 告:

专注分享

谢绝纯提问

谢谢合作!
本站域名:HtmLayout.Cn
aardio可以快速开发上位机,本站主要记录了学习过程中遇到的问题和解决办法及aardio代码分享

这里主要专注于aardio学习交流和经验分享.
纯私人站,当笔记本用的,学到哪写到哪.

Aardio 官方站:Aardio官方
Aardio最新功能:Aardio官方更新日志
本 站 主 站:Stm32cube中文网
Sciter中文在线文档Sciter在线学习文档
空间赞助:才仁机械
打赏本站
Loading...