上位机编写之aardio调用html5图表控件
上次说到现在html5技术已经很普及了,各种图形和图表都可以实现.
推荐了百度的图表js , 百度搜:百度图表
里面各种波形图样式,饼状图,等等等超多种类
这些都太精美了. 上位机上面要是用到估计软件能上个档次了...
那么应该如何实现呢?
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.jsFunction;
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里面是更新数据用的.
嗯,结束
21 个回复
admin
赞同来自:
用这中的好处是:只需要改一个单词,就可以变化图表的样式,下面将bar改成了line,里面就变成了线状波形图
admin
赞同来自:
上面的折线图中,不是圆滑过渡,需要平滑过渡的话,添加一个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);
}
admin
赞同来自:
刚才又去找了几个示例试了试.基本上可以肯定一个流程:
每次加载数据js用下面的模板:
上面提到的百度提供的数据示例代码再这里查看:
直接将左侧提供的代码复制到上面指示的地方,运行就能看到效果了.
admin
赞同来自:
记录:想直接用doscript来运行js, 必须用双引号引出代码:
例如上面的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);
");
}
这样引用才行.
admin
赞同来自:
定时器的用法:
admin
赞同来自:
listbox添加数据后,滚动条显示在底部:
调用方式:
mainForm.button8.oncommand = function(id,event){
//mainForm.msgbox( mainForm.button8.text );
var buf = raw.malloc(1000, 0);
var len,ms = 100,1000;
var Rxlength = Usbhidapi.Hidapi_read_timeout(Hiddevice, buf, len, ms);
if(Rxlength == -1){
console.log("读取失败!")
}else {
console.log("读取成功!!读取长度为:",Rxlength,'\n读取到:' /*,raw.tostring(databuf)*/);
//console.log(raw.tostring(databuf, 1, Rxlength));
if(Rxlength == 0){
return; //没数据退出
}
var str = "";
//str = Aiscii(buf,Rxlength);
str = Hex(buf,Rxlength);
mainForm.Rxdata.add(str);
mainForm.Rxdata.scrollToBottom();//显示到底部
console.log(str);
}
}
admin
赞同来自:
listbox,横向滚动条显示不出来
首先在窗体设计器 中 点击listbox控件，在属性面板中设置水平滚动条为true( 启用 )
然后切换到代码视图，添加下面的代码：
::SendMessageInt( winform.listbox.hwnd,0x194/*_LB_SETHORIZONTALEXTENT*/,500,0)
admin
赞同来自:
listbox读取某一行的值
console.log(mainForm.Rxdata.getItemText(1));//从1开始的
读取所有的值
for(i=1;winform.listbox.count;1){winform.edit.text=winform.listbox.getItemText(i)
}//取listbox内容
另外一种读取所有的值
admin
赞同来自:
//创建webkit浏览器窗口
var webkit = web.kit.form(mainForm.custom);
webkit.go("\html\main.html");
webkit.wait()
var js = /*
// 基于准备好的dom，初始化echarts实例
// var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var data = [];
var option = {
title: {
text: 'AD采集数据'
},
tooltip: {
trigger: 'axis',
axisPointer: {
animation: false
}
},
legend: {
data:['AD值']
},
xAxis: {
position:'top',
data: []
},
yAxis: {
min: 'dataMax',
axisLabel: {
formatter: '{value} dBm'
},
},
dataZoom: [
{ // 这个dataZoom组件，默认控制x轴。
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
start: 10, // 左边在 10% 的位置。
end: 60 // 右边在 60% 的位置。
},
{ // 这个dataZoom组件，也控制x轴。
type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件
start: 10, // 左边在 10% 的位置。
end: 60 // 右边在 60% 的位置。
}],
series: [{
name: 'AD值',
type: 'line',
smooth: true,
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
},
animationDelay: function (idx) {
return idx * 10;
},
data:[10, 100, 83, 36, 100, 20,10]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
*/
webkit.doScript(js);
admin
赞同来自:
利用分层窗体和百度图标创建一个加载百分比图形:
主界面代码如下:
所需要的html页面代码如下:
注意这里的波浪形状需要另外一个js插件支持
http://echarts.baidu.com/resource/echarts-liquidfill-1.0.4/dist/echarts-liquidfill.js
整体文件结构如下:
admin
赞同来自:
接上面的那个水波波形百分比,我发现水波荡漾的速度太慢,
打开下载的那个js文件的1050行,把这个speed从默认的5000设置为1000或者500,变小就可以了
走的速度就会加快
admin
赞同来自:
使用JQuery结合HIghcharts实现从后台获取JSON实时刷新图表
Rick
赞同来自:
有意思
admin
赞同来自:
要想要实现echart与aar软件数据动态交互，需要特别注意两点：
波形的X轴和Y轴数据都需要，要不然的话，你只是增加（push）和删除（shift）Y轴数据的话，波形在更新的时候会整个界面更新（更新的时候整个界面闪动然后重绘了波形），这是因为你的x轴数据每更新，图表认为你只是更新了每个x轴坐标的数据，并不是删除了数据
交互的话，需要用到external函数，类似web里面的使用方法
如下是利用aar的webkit组件加载html界面，并定义两个供js数据交互的aar函数
上面函数的意思：getdata是获取一个随机10-17之间的数给Y轴做数据用，gettime是获取一个自加的数用来给x轴坐标用
紧接着：是创建一个echart的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定时器
}
admin
赞同来自:
上面的利用aar的定时器动态加载数据这个貌似有点问题：
本来图形应该是可以随意切换直方图和曲线图的，但是上面的会导致一直显示曲线图，直方图一闪就消失了。。
究其原因是因为我们用的是
这个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了，相当于我们只是重新配置了数据，而没有去更改其他被认为点击事件修改过的东西，这样就可以来回切换直方图和曲线图了。
Harold_Wang
赞同来自:
有源码不？
pigeep
赞同来自:
这个还真挺漂亮的
evyhui
赞同来自:
使用JQuery结合HIghcharts实现从后台获取JSON实时刷新图表 这个是咋个弄的呢？ echarts 有没有后台获取json格式实时刷新的呢？
爱哭的热带鱼
赞同来自:
好i东西,照着做一下,学习学习
TTfox
赞同来自:
import win.ui;
/*DSG{{*/
var winform = win.form(text="webkit浏览器支持库";right=858;bottom=420;border="dialog frame")
winform.add(
button={cls="button";text="更新数据";left=713;top=335;right=816;bottom=377;z=2};
button2={cls="button";text="清空数据";left=712;top=276;right=815;bottom=318;z=3};
button3={cls="button";text="加载数据";left=711;top=213;right=814;bottom=255;z=4};
button4={cls="button";text="停止加载";left=712;top=152;right=815;bottom=194;z=5};
custom={cls="custom";text="custom";left=12;top=9;right=678;bottom=411;autosize=1;center=1;edge=1;transparent=1;z=1}
)
/*}}*/
//导入webkit支持库
import web.kit;
import web.kit.fileSystem; //支持嵌入资源文件
import web.kit.form;
//创建webkit浏览器窗口
var webkit = web.kit.form(winform.custom);
webkit.go("\web\index.html");
var i=1;
webkit.external = {
getData = function( ){
return math.random(10, 30);
}
gettime = function(){
i++;
return i;
}
}
webkit.wait()
var js = /*
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var dd = [];//给Y轴数据使用
var dt = [];
var time = [];//给X轴坐标用
for (var i = 0; i < 130; i++) {//初始化100个数据，来显示完整的图表先
dd.push(external.getData());
dt.push(external.getData());
time.push(external.gettime())
}
var option;
option = {
color: ['#5b9bd5', '#ed7d31'],
backgroundColor: '#FFF',
title: {
text: '测试曲线图',
left: 'center',
top:'-2',
textStyle:{
fontSize:14
}
},
grid: {
top: 20,
bottom: 100,
left: '12%',
right: '2%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
animation: false
}
},
legend: {
bottom: '40',
itemWidth: 30,
itemHeight: 6,
data: ['逐月总逆温日', '逐月PM2.5浓度']
},
toolbox: {
show:true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {}
}
},
dataZoom: [
{
show: true,
realtime: true,
start: 0,
end: 100,
xAxisIndex: [0, 1]
},
{
type: 'inside',
realtime: true,
start: 0,
end: 100,
xAxisIndex: [0, 1]
}
],
xAxis: [{
name: '城市',
nameLocation: 'center',
nameGap: 25,
axisLine: {
show: false,
onZero: true,
},
axisTick: {
show: false
},
axisLabel: {
rotate: 50
},
splitLine: {
show: true,
lineStyle: {
color: '#CCC'
}
},
data:time,
}],
yAxis: [{
name: '地面风速（m/s）',
nameLocation: 'center',
nameGap: 40,
nameTextStyle: {
color: '#000'
},
type: 'value',
boundaryGap: [0, '10%'],
axisLine: {
lineStyle: {
color: '#CCC'
},
},
axisTick: {
show: false
},
splitLine: {
show: true,
lineStyle: {
color: '#CCC'
}
},
axisLabel: {
color: '#000'
}
}],
series: [{
name: '逐月总逆温日',
type: 'line',
symbol: 'none',
smooth: 0.6,
itemStyle: {
color: '#5b9bd5',
borderColor: '#5b9bd5',
borderWidth: 4
},
lineStyle: {
width: 2
},
data: dd
},
{
name: '逐月PM2.5浓度',
type: 'line',
symbol: 'none',
smooth: 0.6,
itemStyle: {
color: '#ed7d31',
borderColor: '#ed7d31',
borderWidth: 4
},
lineStyle: {
width: 2
},
data: dt
}
],
};
// 使用刚指定的配置项和数据显示图表。
option && myChart.setOption(option);
*/
webkit.doScript(js);
winform.button.oncommand = function(id,event){
//利用js的定时器动态更新波形
var js = /*
setInterval(function () { //这个是js方法的定时器函数
time.shift();//time这个数据左边第一个数据移除（X轴坐标）
dd.shift();//data这个数据左边第一个数据移除（Y轴数据）
dt.shift();//data这个数据左边第一个数据移除（Y轴数据）
dd.push(external.getData());//获取一个外部数据然后加到data的最后一位
dt.push(external.getData());//获取一个外部数据然后加到data的最后一位
time.push(external.gettime());//获取一个外部数据加到time的最后一位
option.series[0].data= dd;//将这个data数据赋给series[0]的data值
option.series[1].data= dt;//将这个data数据赋给series[0]的data值
option.xAxis.data = time;//将这个time数据赋给xAxis变量的data值
myChart.setOption(option);//重新配置和加载echart
}, 100);//定时100ms
*/
webkit.doScript(js);//执行
}
winform.button2.oncommand = function(id,event){
//利用aar的按钮功能，清空echart的波形和数据
//mainForm.msgbox( mainForm.button7.text );
var js = /*
// myChart.clear();//不能使用此函数，它的功能是清空echart组件，即整个界面都没东西了
dd = [];//清空Y轴data数据
dt = [];//清空Y轴data数据
time = [];//清空x轴time数据
option.series[0].data= dd;
option.series[0].data= dt;
option.xAxis.data = time;
myChart.setOption(option);
*/
webkit.doScript(js);
}
winform.button3.oncommand = function(id,event){
tmid = winform.addtimer(
100/*毫秒*/,
function(hwnd,msg,id,tick){//定时执行代码
var js = /*
time.shift();
dd.shift();
dt.shift();
dd.push(external.getData());
dt.push(external.getData());
time.push(external.gettime());
option.series[0].data= dd;
option.series[1].data= dt;
option.xAxis.data = time;
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
*/
webkit.doScript(js);
}
);
}
winform.button4.oncommand = function(id,event){
winform.settimer(tmid,-1);//暂停aar定时器
}
winform.show();
win.loopMessage();
return winform;
harvardx
赞同来自:
哪位高手有源码啊 学习用 太合适了