LightningChartJS在aardio中的简单调用示例

By admin at 12 天前 • 0人收藏 • 233人看过

image.png

自从有人论坛里说了这个图表, 垂涎这个好久.

优点: 支持gpu加速, 绘制3d速度快, 各种图表支持.....


测试gpu加速

我进行了3d绘制测试, 发现确实旋转的时候gpu利用率会明显的上升,而cpu上升并不明显.

不知道我的测试方式对不对,

我生成了600*600 共36万个点, 然后对它进行旋转缩放, 流畅度还不错, 同样的点数, 在echart和ProEssentials里卡的根本旋转不动

screenshots.gif

从今天开始进行各种简单的测试吧 , 移植官方的例程.

有测试过的aardio调用代码的也可以回帖分享下. , 大家一起努力把这个例程弄全, 加油

import win.ui;
/*DSG{{*/
mainForm = win.form(text="aardio工程";right=1042;bottom=606)
mainForm.add()
/*}}*/

import web.view;
var wb = web.view(mainForm);
wb.go("/html/index.html");

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


补充一点, 如果要把html和js打包进exe生成独立软件, 

  1. 首先把html文件夹设置为: 内嵌=true

  2. 添加http服务器.

import web.view;
import wsock.tcp.simpleHttpServer;
var wb = web.view(mainForm);
wb.go(wsock.tcp.simpleHttpServer.startUrl("/html/index.html"));


lightTest.zip


说明一下: 

我对html不熟 , 后面都是针对我自己的理解来写, 正确不正确自己判断.....

以下都是直接对html文件里直接修改, 先不添加aardio交互. 等所有图表测试完, 再弄.

11 个回复 | 最后更新于 11 天前
12 天前   #1

示例1:  XY折线图


第一步 , 模拟两组数据

        const data1 = [
           { x: 0, y: 1.52 },
			{ x: 1, y: 1.52 },
			{ x: 2, y: 1.52 },
			{ x: 3, y: 1.58 },
			{ x: 4, y: 2.00 },
			{ x: 5, y: 2.00 },
			{ x: 6, y: 2.00 },
			{ x: 7, y: 2.00 },
			{ x: 8, y: 2.26 },
			{ x: 9, y: 1.90 },
			{ x: 10, y: 1.90 },
			{ x: 11, y: 1.90 },
			{ x: 12, y: 1.90 },
			{ x: 13, y: 1.60 },
			{ x: 14, y: 1.60 },
			{ x: 15, y: 1.60 },
			{ x: 16, y: 1.00 },
			{ x: 17, y: 1.00 },
			{ x: 18, y: 1.00 },
			{ x: 19, y: 1.74 },
			{ x: 20, y: 1.47 },
			{ x: 21, y: 1.47 },
			{ x: 22, y: 1.47 },
			{ x: 23, y: 1.74 },
			{ x: 24, y: 1.74 },
			{ x: 25, y: 1.74 },
			{ x: 27, y: 1.5 },
			{ x: 28, y: 1.5 },
			{ x: 29, y: 1.5 }
        ]

		const data2 = [
			{ x: 0, y: 1.35 },
			{ x: 1, y: 1.35 },
			{ x: 2, y: 1.35 },
			{ x: 3, y: 1.35 },
			{ x: 4, y: 1.90 },
			{ x: 5, y: 1.90 },
			{ x: 6, y: 1.90 },
			{ x: 7, y: 1.92 },
			{ x: 8, y: 1.50 },
			{ x: 9, y: 1.50 },
			{ x: 10, y: 1.3 },
			{ x: 11, y: 1.3 },
			{ x: 12, y: 1.3 },
			{ x: 13, y: 1.3 },
			{ x: 14, y: 1.3 },
			{ x: 15, y: 1.32 },
			{ x: 16, y: 1.40 },
			{ x: 17, y: 1.44 },
			{ x: 18, y: 1.02 },
			{ x: 19, y: 1.02 },
			{ x: 20, y: 1.02 },
			{ x: 21, y: 1.02 },
			{ x: 22, y: 1.02 },
			{ x: 23, y: 1.02 },
			{ x: 24, y: 1.02 },
			{ x: 25, y: 1.02 },
			{ x: 27, y: 1.30 },
			{ x: 28, y: 1.30 },
			{ x: 29, y: 1.30 }
		]

2. 用 addLineSeries() 将数据添加到波形图里

        // Add a line series.
        const lineSeries1 = chart.addLineSeries()
            .setName('测试数据1')
            .add(data1)

		const lineSeries2 = chart.addLineSeries()
            .setName('测试数据2')
            .add(data2)

image.png


3. 增加图例显示

const legend = chart.addLegendBox()
    .add(chart)

image.png


4. 设置XY轴名称 和 间隔

chart.getDefaultAxisY()
	.setTitle('Y精度')
	.setInterval(0, 3, false, true)
chart.getDefaultAxisX()
	.setTitle('X精度')
	.setInterval(0, 8, false, false)

image.png


5. 将图例横过来放置

    5.1 首先在引用中新增图例属性

        const {
            lightningChart,
			LegendBoxBuilders,
        } = lcjs

    5.2 在图例添加函数中增加参数

const legend = chart.addLegendBox(LegendBoxBuilders.HorizontalLegendBox)

image.png


补充: 平滑曲线

将上面第2步中添加函数改为  addSplineSeries() 即可

image.png

点状线图

将上面第2步中添加函数改为  addPointLineSeries() 即可

image.png

12 天前   #2

示例2: 点状图


在示例1的基础上修改. 

将示例1的第二步 用 addPointSeries() 代替.

image.png

上面默认每个数据点都是方块♦, 那么如果要改变下更好区分.

顺便将数据修改的和官方的一样.

  1. 在头部引用中增加 形状引用 PointShape


const {
    lightningChart,
    LegendBoxBuilders,
    PointShape,
} = lcjs

2. 在addPointSeries函数里增加属性参数

const smartPhonesSeries = chart.addPointSeries({ pointShape: PointShape.Circle })
const laptopsSeries = chart.addPointSeries({ pointShape: PointShape.Triangle })

image.png

发现了吗? 

头部的图例还是都是以⚪来提示的每个数据点系列, 那么能不能定义成和设定的形状一样呢?

1. 引用中增加 UIElementBuilders / UIButtonPictures

        const {
            lightningChart,
			LegendBoxBuilders,
			PointShape,
			UIElementBuilders,
			UIButtonPictures,
        } = lcjs

2. 在图例legend中添加参数

const legend = chart.addLegendBox(LegendBoxBuilders.HorizontalLegendBox)
	.add(smartPhonesSeries,
		{
			builder: UIElementBuilders.CheckBox
				.setPictureOff(UIButtonPictures.Circle)
				.setPictureOn(UIButtonPictures.Circle)
		}
	)
	.add(laptopsSeries,
		{
			builder: UIElementBuilders.CheckBox
				.setPictureOff(UIButtonPictures.Rectangle)
				.setPictureOn(UIButtonPictures.Rectangle)
		}
	)

image.png

12 天前   #3

示例3: 实时波形图


基础代码还是参考示例1的,

但是我们为了能和aardio交互, 那么先在js里定义一个函数, 用来提供数据给图表

然后我们在aardio里提供参数给这个函数.

function Add_FromEx(Vx,Vy){
	lineSeries.add({x: Vx, y: Vy})
}

完整的html代码如下:

<!DOCTYPE html>
<head>
    <title>Using chart in HTML page</title>
    <meta charset="utf-8" />

    <!-- Flexbox styling to have the chart and header fill the page.
        Chart will take as much space as possible. -->
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
        }

        .box {
            display: flex;
            flex-flow: column;
            height: 100%;
        }

        .box .row.header {
            flex: 0 1 auto;
        }

        .box .row.content {
            flex: 1 1 auto;
        }
    </style>

	<script src="lcjs.iife.js"></script>
</head>

<body class="box">
    <!-- Create div to render the chart into-->
    <div id="target" class="row content"></div>

    <!--Actual chart related script tag-->
    <script>

        const {
            lightningChart
        } = lcjs

        // Create a XY Chart.
        const chart = lightningChart().ChartXY({
            container: 'target'
        })
            .setTitle('aardio 调用 LightningChartJS') // Set chart title

        // Add a line series.
        const lineSeries = chart.addLineSeries()
            .setName('测试数据1')

		function Add_FromEx(Vx,Vy){
			lineSeries.add({x: Vx, y: Vy})
		}

    </script>
</body>

</html>

在aardio的mainform中开启定时器, 产生随机数给它,用doScript来执行

import web.view;
var wb = web.view(mainForm);
wb.go("/html/index.html");

var index = 0;
mainForm.setInterval(
    100,function(){
        wb.doScript(string.concat("Add_FromEx(",index,",",math.random()*134,")"));
        index++;
    }
);

screenshots.gif

11 天前   #4

步进图 (台阶图)


  1. 虚拟数据

  2. 将示例1中第2步函数改为 addStepSeries()

const data1 = [
           { x: 0, y: 1.52 },
            { x: 1, y: 1.52 },
            { x: 2, y: 1.52 },
            { x: 3, y: 1.58 },
            { x: 4, y: 2.00 },
            { x: 5, y: 2.00 },
            { x: 6, y: 2.00 },
            { x: 7, y: 2.00 },
            { x: 8, y: 2.26 },
            { x: 9, y: 1.90 },
            { x: 10, y: 1.90 },
            { x: 11, y: 1.90 },
            { x: 12, y: 1.90 },
            { x: 13, y: 1.60 },
            { x: 14, y: 1.60 },
            { x: 15, y: 1.60 },
            { x: 16, y: 1.00 },
            { x: 17, y: 1.00 },
            { x: 18, y: 1.00 },
            { x: 19, y: 1.74 },
            { x: 20, y: 1.47 },
            { x: 21, y: 1.47 },
            { x: 22, y: 1.47 },
            { x: 23, y: 1.74 },
            { x: 24, y: 1.74 },
            { x: 25, y: 1.74 },
            { x: 27, y: 1.5 },
            { x: 28, y: 1.5 },
            { x: 29, y: 1.5 }
        ]


const lineSeries = chart.addStepSeries()
    .setName('测试数据')
    .add(data1)

image.png

11 天前   #5

共享X轴 / 双Y轴 波形图


共享x轴就是获取到默认X轴引用, 获取默认Y轴引用, 然后新增一个Y轴引用, 然后在add里定义引用哪个X或者哪个Y, 所以可以很灵活的, 不局限于两个Y, 可以N个Y轴共用......

  1. 获取和新增XY轴引用

const axisX = chart.getDefaultAxisX()
axisX.setTitle('共享X轴')
const axisY1 = chart.getDefaultAxisY()
axisY1.setTitle('独立Y1')
const axisY2 = chart.addAxisY()
axisY2.setTitle('独立Y2')

2. 在addSplineSeries()里增加定义X和Y轴引用参数

const lineSeries1 = chart.addSplineSeries({
    xAxis: axisX,
    yAxis: axisY1
})
	.setName('独立Y1数据')
	.add(data1)

const lineSeries2 = chart.addSplineSeries({
    xAxis: axisX,
    yAxis: axisY2
})
	.setName('独立Y2数据')
	.add(data2)

image.png

如果你想要把Y2显示在右边, 那么可以

const axisY2 = chart.addAxisY({
    opposite: true
})
axisY2.setTitle('独立Y2')

image.png

11 天前   #6

分裂表 ( 多个图表在一个表里显示 )


  1. 创建绘图板, 设置拆分表

  2. 设置每个表的属性

下面分裂为两行一列, 显示上下两个表

// Create Dashboard.
const db = lightningChart().Dashboard({
    // theme: Themes.darkGold 
    numberOfRows: 2,
    numberOfColumns: 1
})
// Create two XY-charts.
const chart1 = db.createChartXY({
    columnIndex: 0,
    rowIndex: 0,
    columnSpan: 1,
    rowSpan: 1
})
chart1.setTitle('测试1')

const chart2 = db.createChartXY({
    columnIndex: 0,
    rowIndex: 1,
    columnSpan: 1,
    rowSpan: 1
})
chart2.setTitle('测试2')

// Add a line series.
const lineSeries1 = chart1.addLineSeries()
	.setName('测试数据1')
	.add(data1)

const lineSeries2 = chart2.addLineSeries()
	.setName('测试数据2')
	.add(data2)

screenshots.gif

11 天前   #7

区域极性图

image.png

add函数改为: addAreaSeries , 然后参数内只需要添加 baseline 即可

const lineSeries1 = chart.addAreaSeries({ baseline: 1.65, type: AreaSeriesTypes.Bipolar })



11 天前   #8

蜡烛图

image.png

没啥好说的, 直接上代码

<script>
const {
	lightningChart,
	OHLCFigures,
	AxisTickStrategies
} = lcjs //Note: @arction/lcjs is not needed here, when using IIFE assembly

// Create a XY Chart.
const chart = lightningChart().ChartXY({
	// Set the chart into a div with id, 'target'. 
	// Chart's size will automatically adjust to div's size. 
	container: 'target'
})
	.setTitle('aardio 调用 LightningChartJS') // Set chart title

const axisX = chart.getDefaultAxisX()
    .setTickStrategy(
        AxisTickStrategies.DateTime,
        (tickStrategy) => tickStrategy.setDateOrigin(new Date())
    )

const data = [
    [new Date(2019, 6, 29).getTime(), 208.46, 210.64, 208.44, 209.68],
    [new Date(2019, 6, 30).getTime(), 208.76, 210.16, 207.31, 208.78],
    [new Date(2019, 6, 31).getTime(), 216.42, 221.37, 211.3, 213.04],
    [new Date(2019, 7, 1).getTime(), 213.9, 218.03, 206.74, 208.43],
    [new Date(2019, 7, 2).getTime(), 205.53, 206.43, 201.63, 204.02],
    [new Date(2019, 7, 5).getTime(), 197.99, 198.65, 192.58, 193.34],
    [new Date(2019, 7, 6).getTime(), 196.31, 198.07, 194.04, 197],
    [new Date(2019, 7, 7).getTime(), 195.41, 199.56, 193.82, 199.04],
    [new Date(2019, 7, 8).getTime(), 200.2, 203.53, 199.39, 203.43],
    [new Date(2019, 7, 9).getTime(), 201.3, 202.76, 199.29, 200.99],
    [new Date(2019, 7, 12).getTime(), 199.62, 202.05, 199.15, 200.48],
    [new Date(2019, 7, 13).getTime(), 201.02, 212.14, 200.48, 208.97],
    [new Date(2019, 7, 14).getTime(), 203.16, 206.44, 202.59, 202.75],
    [new Date(2019, 7, 15).getTime(), 203.46, 205.14, 199.67, 201.74],
    [new Date(2019, 7, 16).getTime(), 204.28, 207.16, 203.84, 206.5],
    [new Date(2019, 7, 19).getTime(), 210.62, 212.73, 210.03, 210.35],
    [new Date(2019, 7, 20).getTime(), 210.88, 213.35, 210.32, 210.36],
    [new Date(2019, 7, 21).getTime(), 212.99, 213.65, 211.6, 212.64],
    [new Date(2019, 7, 22).getTime(), 213.19, 214.44, 210.75, 212.46],
    [new Date(2019, 7, 23).getTime(), 209.43, 212.05, 201, 202.64]
]

// Add a line series.
const lineSeries1 = chart.addOHLCSeries({ positiveFigure: OHLCFigures.Candlestick })
	.setName('测试数据1')
	.add(data)

</script>


11 天前   #9

网页如果放在资源目录:
1、资源目录「内嵌资源」属性设为 true。
2、资源目录「本地构建」属性设为 true,如果设为 false,那么需要右键点资源目录 —— 然后点「同步本地目录」,让网页自动或手动添加到 aardio 工程内 —— 发布后才会带上网页。

那个 Add_FromEx 函数也可以不写,可以直接调用 lineSeries.add 函数:

wb.invoke("lineSeries.add",{x:index,y:math.random()*134});

完整代码:

import win.ui;
/*DSG{{*/
mainForm = win.form(text="LightningChart")
/*}}*/

import web.view;
var wb = web.view(mainForm);
wb.html = /**
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">
    <style>
        html, body { height: 100%; margin: 0;}
        .box { display: flex; flex-flow: column; height: 100%;}
        .box .row.header {  flex: 0 1 auto;}
        .box .row.content {flex: 1 1 auto;}
    </style>
    </style>
    <script src="https://gcore.jsdelivr.net/npm/@arction/lcjs@3.3.3/dist/lcjs.iife.min.js"></script>
</head>
<body class="box"> 
    <div id="target" class="row content"></div> 
    <script> 
        const { lightningChart  } = lcjs  
        const chart = lightningChart().ChartXY({  ontainer: 'target' }).setTitle('aardio 调用 LightningChartJS')
        const lineSeries = chart.addLineSeries() .setName('测试数据')  
    </script>
</body>
</html>
**/
 
var index = 0;
mainForm.setInterval(
    100,function(){
        wb.invoke("lineSeries.add",{x:index,y:math.random()*134});
        index++;
    }
);
 
mainForm.show();
win.loopMessage();


11 天前   #10

实例代码:  COVID-19 实时全球大数据

GIF.gif

html代码太长了, 就不发了, 提供文件下载

lightTest.zip


11 天前   #11

3D散点图

GIF.gif

    <script>

        const {
            lightningChart
        } = lcjs

        const chart3D = lightningChart().Chart3D({
            container: 'target'
        })
            .setTitle('3D Scatter Chart')

	chart3D.getDefaultAxisX().setTitle('Axis X')
	chart3D.getDefaultAxisY().setTitle('Axis Y')
	chart3D.getDefaultAxisZ().setTitle('Axis Z')

    // Add a line series.
    const series  = chart3D.addPointSeries()
        .setName('测试数据1')

	for ( let row = 0; row < 200; row ++ ) {
		for ( let column = 0; column < 200; column ++ ) {
			series.add({ x: row, z: column, y: Math.random()*8 })
		}
	}

    </script>


所以, 步骤

  1. 创建

// Create a new ChartXY.
const chart3D = lightningChart().Chart3D()

// Add a line series using default X, Y and Z axes.
const series = chart3D.addPointSeries()

2. 添加数据

// Single point.
series.add({ x: 50, y: 60, z: 40 })

// Multiple points at once.
series.add([
    { x: 55, y: 60, z:40 },
    { x: 60, y: 62, z:40 },
    { x: 65, y: 65, z:50 }
])


登录后方可回帖

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

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

AARDIO语言QQ群:70517368
Aardio 官方站:Aardio官方
Aardio最新功能:Aardio官方更新日志
C大Aardio论坛:Aar爱好者论坛
本 站 主 站:Stm32cube中文网
Sciter中文在线文档Sciter在线学习文档
赞助商:才仁机械
Loading...