百分比柱状图

收藏

本帖最后由 JamesLv 于 2020-3-3 14:58 编辑

在仪表板中除了使用系统已有的可视化组件之外，还可以通过内置扩展插件，甚至自定义插件绘制更多样化的图表以更丰富的形式展示数据
版本更新记录

版本号	更新内容	支持Wyn Enterprise版本	下载地址
V1.0	第一次发布	3.0.04167.0	百分比柱状图.zip (274.76 KB, 下载次数: 873) 2020-3-3 14:11 上传点击文件名下载附件

1.内容概述
为了展示现有数据和总量数据的对比情况，我们常常会用到一些仪表盘、指示器或者KPI来表示，但是这些组件只能展示单一维度，不能分类展示多组，此时需要通过自定义组件实现，通过自定义的百分比柱状图来展示不同分类的现有数据和总体数据的对比信息。
本节为您介绍扩展组件百分比柱状图的基本用法。
image.png991721801.png

2.操作步骤
(1) 下载插件包
下载百分比柱状图插件包，将其保存到本地计算机并解压。

(2) 添加外部扩展插件
将解压后的文件夹放置到Wyn Enterprise安装目录Server\wwwroot\Web Contents\ 路径下即可在产品中体验
例如: D:\Wyn Enterprise\Server\wwwroot\Web Contents\
image.png899755248.png

(3) 新建仪表板添加外部扩展组件
将外部扩展组件拖拽到仪表板编辑区。

(4) 选择插件
单击组件右上角的编辑按钮进入编辑状态，选择“百分比柱状图”，然后单击“确定”。
image.png41451109.png

(5) 数据绑定
使用外部扩展中的插件进行数据展示时，需进行数据绑定。
添加外部扩展组件后，“数据绑定”面板会自动打开，将数据集中的字段拖拽到绑定区即可完成数据绑定。
如果仪表板中未加载数据集，则需要先选择一个数据集进行加载，然后再绑定数据字段。
image.png437716979.png

注意：
维度绑定区域仅能绑定一个字段，如绑定多个字段，则仅第一个生效。
数值绑定区域仅能绑定两个字段，第一个字段为当前数据，第二个字段为总体数据，如绑定多个字段，则仅前两个生效。

(6) 属性设置
在编辑区右侧选择“属性设置”进行图形样式设置。
image.png851475829.png

自定义属性说明如下：

{ "textColor": "#fff",
"barWidth": 14,
"barBackgroundColor": "#444a58",
"barStartColor": "#57eabf",
"barEndcolor": "#2563f9"
}

1.“textColor” ：字体颜色
2.“barWidth”：柱子宽度
3.“barBackgroundColor”：柱子背景色
4.“barStartColor”：柱子填充起始颜色
5.“barEndcolor”：柱子填充终止颜色

(7) 预览仪表板
预览后如效果满意，即可保存仪表板。
image.png78582152.png

dlxubo · dlxubo

Bella.Yuan · Bella.Yuan

dlxubo 发表于 2022-6-18 16:21

fanhuayimeng · fanhuayimeng

感谢分享

Bella.Yuan · Bella.Yuan

fanhuayimeng 发表于 2023-1-30 09:46
感谢分享

		自动登录	找回密码
密码			立即注册

[图表] 百分比柱状图

4 个回复

活字格认证

活字格高级认证

Wyn高级认证

Wyn认证

微信认证勋章

讲师达人

元老葡萄

悬赏达人

时代开发者征文活动

圣诞拼拼乐