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

DataGear做一个支持表单交互和多图表联动的数据可视化看板

时间:2023-04-02 22:28:04 HTML

.dg-chart{display:inline-block;宽度:400px;height:400px;}对于数据可视化,有时需要根据用户输入的查询条件,展示有限范围的数据图表。DataGear的看板表单功能可以快速方便地实现这样的需求。下面的看板示例包括条形图、饼图和地图。用户可以通过看板形式设置柱状图和饼图中的数据条数和地图的显示区域。首先,创建三个新的参数化数据集。第一个数据集的SQL语句为:SELECTCOL_NAME,COL_VALUEFROMT_ANALYSIS_0limit0,${querynumber}参数定义为:参数名类型为必填querynumber取值与第一个数据集类似,SQL语句为:SELECTCOL_NAME,COL_VALUEFROMT_ANALYSIS_1limit0,${查询次数}参数定义为:参数名称类型必填,查询次数的值为第三个数据集。SQL语句为:SELECT'${province}'ASCOL_MAP,COL_NAME,COL_VALUEFROMT_ANALYSIS_CITYWHERECOL_PROVINCE='${province}'参数定义为:参数名称类型所需省份字符串则,使用以上三个数据集创建直方图、饼图和地图。第一列图表:图表类型:基本列数据集:第一个数据集数据集列标签:COL_NAME名称;COL_VALUE值第二个饼图:图表类型:基本饼图数据集:第二个数据集数据集列标签:COL_NAME名称;COL_VALUE值第三张图:图表类型:basic基础数据集:第三数据集Dataset列标签:COL_NAME地区名称;COL_VALUE索引值;COL_MAP图名然后,新建一个可视化板,看板模板内容填写如下:DataGearKanbanExample.dg-chart{display:inline-block;宽度:400px;height:400px;}DataGear
http://www.datagear.tech

DataGear仪表板示例

 

点击【保存并显示】按钮打开board显示页面,完成!!!效果图如下:官网地址:http://www.datagear.tech源码地址:Gitee:https://gitee.com/datagear/datagearGithub:https://github.com/datageartech/datagear