调用html5图标控件之百度echarts
html5技术已经很普及了,各种图形和图表都可以实现.
推荐了百度的图表js ,
百度搜:百度图表里面各种波形图样式,饼状图,等等等超多种类
这些都太精美了. 上位机上面要是用到估计软件能上个档次了...
那么应该如何实现呢?
目前有两种方式: web.kit 和web.blink , 其中貌似blink是webkit的后续升级版本.
aardio中新建功能,选择webkit网页形式.
将下载到的百度图表的js文件放到相应的js文件夹中,修改main.html文件内容如下:
首先打开刚才创建的工程文件目录:
html文件夹里面放好相应的js文件之后,用代码编辑器打开main.html文件
写入内容如下:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/echarts.min.js"></script>
<style type="text/css">
#main { height:100% ; width:100%; position:absolute;}
body { margin:0px; padding:0px; overflow:hidden;}
</style>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main"></div>
</body>
</html>意思一路了然,就是弄了个全屏的div,准备里面放图表用.
然后就是在aardio软件打开代码视图,将里面的代码更改为:
import win.ui;
/*DSG{{*/
var winform = win.form(text="webkit浏览器支持库";right=858;bottom=420;border="dialog frame")
winform.add(
button={cls="button";text="button";left=608;top=291;right=824;bottom=362;z=2};
custom={cls="custom";text="custom";left=47;top=41;right=582;bottom=370;autosize=1;center=1;edge=1;transparent=1;z=1}
)
/*}}*/
//导入webkit支持库
import web.kit.form;
import web.kit.fileSystem; //支持嵌入资源文件
//创建webkit浏览器窗口
var webkit = web.kit.form(winform.custom);
webkit.go("\html\main.html");
webkit.wait()
var js = /*
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 100, 100, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
*/
webkit.doScript(js);
winform.button.oncommand = function(id,event){
//winform.msgbox( winform.button.text );
var jschange = /*
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [100, 100, 100, 100, 100, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
*/
webkit.doScript(jschange);
}
//添加可拖动边框
import win.ui.resizeBorder;
win.ui.resizeBorder(winform);
//添加阴影
import win.ui.shadow;
win.ui.shadow(winform);
//限定最大化范围
import win.ui.minmax;
win.ui.minmax(winform);
winform.show();
win.loopMessage();上面注释的很清楚了.就是调用了js代码,第一个js代码里面的代码是怎么来的呢?
这个是直接复制进去的,代码百度已经提供了.
地址就是:http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
这个百度五分钟教程里面的代码,我一个字都没改!!!!
怎么样?够简单了吧!
下面的代码就是我增加了个按钮,按钮里面写了 个js,js里面是更新数据用的.
嗯,结束
上面的折线图中,不是圆滑过渡,需要平滑过渡的话,添加一个smooth: true,
winform.button.oncommand = function(id,event){
//winform.msgbox( winform.button.text );
var jschange = /*
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'line',
smooth: true,
data: [10, 100, 83, 36, 100, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
*/
webkit.doScript(jschange);
}
刚才又去找了几个示例试了试.基本上可以肯定一个流程:
每次加载数据js用下面的模板:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/echarts.min.js"></script>
<style type="text/css">
#main { height:100% ; width:100%; position:absolute;}
body { margin:0px; padding:0px; overflow:hidden;}
</style>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
//-----------------------------------
//这里写入百度提供的数据代码//
//-----------------------------------
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>上面提到的百度提供的数据示例代码再这里查看:
记录:想直接用doscript来运行js, 必须用双引号引出代码:
mainForm.button21.oncommand = function(id,event){
//mainForm.msgbox( mainForm.button21.text );
/**
var jschange = /*
// 指定图表的配置项和数据
var option = {
series: [{
data: [1000, 130, 813, 346, 10, 230,110, 100, 83, 36, 100, 20,155,182,146,85,342]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
*/
**/例如上面的js代码,就需要
webkit.doScript("
// 指定图表的配置项和数据
var option = {
series: [{
data: [1000, 130, 813, 346, 10, 230,110, 100, 83, 36, 100, 20,155,182,146,85,342]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
");
}这样引用才行.
定时器的用法:
mainForm.button19.oncommand = function(id,event){
//mainForm.msgbox( mainForm.button19.text );
mainForm.button19.disabled = true;//防止多次触发
tmid = mainForm.addtimer(
1/*毫秒*/,
function(hwnd,msg,id,tick){//定时执行代码
mainForm.settimer(tmid,-1);//暂停定时器,等待下方程序运行完在开启
var buf = raw.malloc(1000, 0);
var len = 100;
var Rxlength = Usbhidapi.Hidapi_read_timeout(Hiddevice, buf, len,10);//这里用了超时读取方式,这种方式有等待有数据读出才退出,符合要求
if(Rxlength == -1){
console.log("读取失败!")
}else {
console.log("读取成功!!读取长度为:",Rxlength,'\n读取到:' /*,raw.tostring(databuf)*/);
//console.log(raw.tostring(databuf, 1, Rxlength));
if(Rxlength == 0){
return 1;//没数据退出,重新定时1ms
}
var str = "";
//str = Aiscii(buf,Rxlength);
str = Hex(buf,Rxlength);
mainForm.Rxdata.add(str);
console.log(str);
}
return 1; //重新定时1ms
//mainForm.killtimer(id)//移除此定时器
//mainForm.settimer(id,2000)//重新设定时间间隔
})
}
mainForm.button20.oncommand = function(id,event){
//mainForm.msgbox( mainForm.button20.text );
mainForm.settimer(tmid,-1);//暂停定时
mainForm.button19.disabled = false;//使能上面的按钮
}
要想要实现echart与aar软件数据动态交互，需要特别注意两点：
波形的X轴和Y轴数据都需要，要不然的话，你只是增加（push）和删除（shift）Y轴数据的话，波形在更新的时候会整个界面更新（更新的时候整个界面闪动然后重绘了波形），这是因为你的x轴数据每更新，图表认为你只是更新了每个x轴坐标的数据，并不是删除了数据
交互的话，需要用到external函数，类似web里面的使用方法
如下是利用aar的webkit组件加载html界面，并定义两个供js数据交互的aar函数
//导入webkit支持库
import web.kit.form;
import web.kit.jsFunction;
var wbKitView = web.kit.form(mainForm.custom);//创建webkit浏览器窗口
import wsock.tcp.simpleHttpServer;
wbKitView.go( wsock.tcp.simpleHttpServer.startUrl("/html/main.aardio") );
var i = 1;
wbKitView.external = {
getData = function( ){
return math.random(10, 17);
}
gettime = function(){
i++;
return i;
}
};
wbKitView.wait();//等待html加载完毕，要不然不能调用js上面函数的意思：getdata是获取一个随机10-17之间的数给Y轴做数据用，gettime是获取一个自加的数用来给x轴坐标用
紧接着：是创建一个echart的js调用
var js = /*
// 基于准备好的dom，初始化echarts实例
// var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var data = [];//给Y轴数据使用
var time = [];//给X轴坐标用
for (var i = 0; i < 100; i++) {//初始化100个数据，来显示完整的图表先
data.push(external.getData());
time.push(external.gettime())
}
var option = {
title: {
text: 'AD采集数据'
},
tooltip: {
trigger: 'axis',
axisPointer: {
animation: false
}
},
legend: {
data:['C滑动滤波']
},
toolbox: {
show:true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
magicType: {
type: ['line', 'bar']
}
}
},
xAxis: {
//type: 'value',
data:time,//把刚才初始化的time数据定义给x轴
// position:'top',
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
splitLine: {
show: false
}
},
series: [
{
name: 'C滑动滤波',
type: 'line',
smooth: true,
showSymbol: false,
hoverAnimation: false,
data:data //把刚才定义的Y轴数据给Y轴用
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
*/
wbKitView.doScript(js);//运行js上面就初始化完成了echart图表的配置了。后面使用的时候只需要修改里面的数据就可以了。
mainForm.button4.oncommand = function(id,event){
//利用js的定时器动态更新波形
var jss = /*
//myChart.hideLoading();//如果开启了加载动画，则隐藏加载动画
setInterval(function () {//这个是js方法的定时器函数
time.shift();//time这个数据左边第一个数据移除（X轴坐标）
data.shift();//data这个数据左边第一个数据移除（Y轴数据）
data.push(external.getData());//获取一个外部数据然后加到data的最后一位
time.push(external.gettime());//获取一个外部数据加到time的最后一位
option.series[0].data= data;//将这个data数据赋给series[0]的data值
option.xAxis.data = time;//将这个time数据赋给xAxis变量的data值
myChart.setOption(option);//重新配置和加载echart
}, 100);//定时100ms
*/
wbKitView.doScript(jss);//执行
}
mainForm.button7.oncommand = function(id,event){
//利用aar的按钮功能，清空echart的波形和数据
//mainForm.msgbox( mainForm.button7.text );
var jss = /*
// myChart.clear();//不能使用此函数，它的功能是清空echart组件，即整个界面都没东西了
data = [];//清空Y轴data数据
time = [];//清空x轴time数据
option.series[0].data= data;
option.xAxis.data = time;
myChart.setOption(option);
*/
wbKitView.doScript(jss);
}
mainForm.button5.oncommand = function(id,event){
//利用aar的定时器动态加载数据
tmid = mainForm.addtimer(
100/*毫秒*/,
function(hwnd,msg,id,tick){//定时执行代码
var jss = /*
time.shift();
data.shift();
data.push(external.getData());
time.push(external.gettime());
option.series[0].data= data;
option.xAxis.data = time;
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
*/
wbKitView.doScript(jss);
}
);
}
mainForm.button6.oncommand = function(id,event){
mainForm.settimer(tmid,-1);//暂停aar定时器
}
上面的利用aar的定时器动态加载数据这个貌似有点问题：
本来图形应该是可以随意切换直方图和曲线图的，但是上面的会导致一直显示曲线图，直方图一闪就消失了。。
究其原因是因为我们用的是
option.series[0].data= data; option.xAxis.data = time; // 使用刚指定的配置项和数据显示图表。 // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option);
这个option我们模式配置是曲线图，所以当你点击直方图切换的时候，程序再次调用option配置，就又变成曲线图了。
那么我们应该怎么办？？
mainForm.button5.oncommand = function(id,event){
tmid = mainForm.addtimer(
100/*毫秒*/,
function(hwnd,msg,id,tick){//定时执行代码
var jss = /*
time.shift();
data.shift();
data.push(external.getData());
time.push(external.gettime());
option = {
xAxis: {
data:time,
},
series: [{
data:data //把刚才定义的Y轴数据给Y轴用
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
*/
wbKitView.doScript(jss);
}
);
}这样操作就ok了，相当于我们只是重新配置了数据，而没有去更改其他被认为点击事件修改过的东西，这样就可以来回切换直方图和曲线图了。
显示多线条写法在https://echarts.apache.org/v4/examples/zh/editor.html?c=line-simple
网站测试能成功绘制出曲线，但在aardio代码里不能输出相应的图形,楼主能帮忙看看问题出在那里吗，aardio js代码如下：
var js = /*
var myChart = echarts.init(document.getElementById('main'));
var A=[
[38.95,38.95,38.95,38.94,38.93,38.91,38.9,38.87,38.85,38.82,38.79,38.76,38.74,38.67,38.61,38.54,38.5],
[38.51,38.6,38.78,39.08,39.49,39.79,39.98,40.08,40.11,40.08,40.03,39.99,39.96,39.98,40,40.02,40.04],
[40.05,40.07,40.09,40.11,40.14,40.16,40.2,40.23,40.27,40.31,40.35,40.39,40.44,40.48,40.53,40.57,40.61]
]
var series = [];
for (var i=0;i<3;i++){
series.push({
type:'line',
data:A[i]
})
}
var Xzhou=[];
for (var i=0;i<11;i++){
Xzhou.push(i)
}
option = {
xAxis: {
data:Xzhou
},
yAxis:{type:'value'},
series,
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
*/
，谢谢！登录后方可回帖
用这中的好处是:只需要改一个单词,就可以变化图表的样式,下面将bar改成了line,里面就变成了线状波形图