现在注册 登 录 首页

LightningChartJS在aardio中的简单调用示例

By admin at 2022-01-15 • 0人收藏 • 1294人看过
admin

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交互. 等所有图表测试完, 再弄.

12 个回复 | 最后更新于 2022-02-12
admin
admin
2022-01-15   #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

admin
admin
2022-01-15   #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

admin
admin
2022-01-15   #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

admin
admin
2022-01-16   #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

admin
admin
2022-01-16   #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

admin
admin
2022-01-16   #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

admin
admin
2022-01-16   #7

区域极性图

image.png

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

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



admin
admin
2022-01-16   #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>


admin
admin
2022-01-16   #9

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

GIF.gif

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

lightTest.zip


admin
admin
2022-01-16   #10

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 }
])


jerryxjr1220
jerryxjr1220
2022-02-12   #11

看上去挺好用的，但是好像是收费软件，价格还不低

admin
admin
2022-02-12   #12

回复#12 @jerryxjr1220 :

社区版是免费的,功能无限制

登录后方可回帖

登 录

现在注册     忘记密码

话题广场 查看更多
aardio csharp dll UI halcon 波形图 web 摄像头 chatGPT 工具 python excel wpf 软件成品 表格 js ocx htmlayout 图表 OCR
信息栏
 私人小站

本站域名

ChengXu.XYZ

投诉联系:  popdes@126.com



快速上位机开发学习,本站主要记录了学习过程中遇到的问题和解决办法及上位机代码分享

这里主要专注于学习交流和经验分享.
纯私人站,当笔记本用的,学到哪写到哪.
如果侵权,联系 Popdes@126.com

友情链接
Aardio官方
Aardio资源网


才仁机械


网站地图SiteMap

Loading...

上位机开发笔记 Powered By © 2006-2016 POPDES 论坛统计
Processed in 63.054 ms, 4 SQL Query(s), 503.27 KiB Memory Usage