当前位置: 首页 > Web前端 > HTML

DataGear异步加载图表联动数据可视化看板

时间:2023-04-02 13:45:33 HTML

.dg-chart{显示:内联块;宽度:600px;高度:500px;}#loadChartWrapper{位置:绝对;顶部:0;左:650px;宽度:400px;:300px;盒子-shadow:0px0px6px#474747;-webkit-box-shadow:0px0px6px#474747;显示:无;}#loadChart{位置:绝对;顶部:2em;左:0;右:0;bottom:0;}通过DataGear的参数化数据集、图表事件处理和KanbanAPI函数,您可以轻松创建异步加载图表联动的数据可视化看板。首先创建参数化SQL数据集,如下:SELECTCOL_NAME,--regionnameCOL_VALUE,--regionindexvalueFROMT_ANALYSISWHERE<#ifsuperiorregionname??>COL_PARENT='${superiorregionname}'<#else>COL_PARENT='China'参数:nametyperequired上级区域名称string否T_ANALYSIS表数据示例:COL_NAMECOL_VALUECOL_PARENT山东160中国北京200中国...朝阳区195北京海淀区200北京...青岛City10Shandong济南市160Shandong然后,利用上面的数据集新建两个图表,第一个是显示全国指标的地图图表:图表类型:基础地图数据集columnlabel:COL_NAME:地区名称(名称)COL_VALUE:指标值(value)第二个是显示指定区域指标的直方图:图表类型:基本直方图数据集列标签:COL_NAME:名称(name)COL_VALUE:值(value)然后,新建一个可视板,填写看板模板内容如下:.dg-chart{显示:内联块;宽度:600px;高度:500px;}#loadChartWrapper{位置:绝对;顶部:0;左:650px;宽度:400px;:300px;盒子-shadow:0px0px6px#474747;-webkit-box-shadow:0px0px6px#474747;显示:无;}#loadChart{位置:绝对;顶部:2em;左:0;右:0;bottom:0;}DataGear
http://www.datagear.tech

DataGear看板展示例

X点击【保存并显示】按钮,打开看板展示页面,完成!!!注意上面模板中的“[第一个图表ID]”和“[第二个图表ID]”需要替换成实际ID效果图如下:官网地址:http://www.datagear.tech源码地址:Gitee:https://gitee.com/datagear/datagearGithub:https://github.com/datageartech/datagear