找回密码
 立即注册

QQ登录

只需一步，快速开始

首页 › Wyn 商业智能专区 › 产品教程 › 查看内容
发新帖

lucas.Yan

超级版主

60

主题

620

帖子

1566

积分

超级版主

Rank: 8Rank: 8

积分
1566
最新发帖

GridChart：魔术图（Card）组件的简单替代

lucas.Yan
超级版主   /  发表于：2024-11-12 18:15  /   查看：202  /  回复：0
本帖最后由 lucas.Yan 于 2024-11-21 16:50 编辑

       当我们需要展示今年12个月的指标时，可以使用魔术图（Magic Chart）。通过在魔术图中绑定简单的富文本和条件格式化，可以轻松实现所需的效果。然而，当大量使用魔术图时，浏览器会发送许多HTTP请求。由于HTTP协议的限制，这些请求无法迅速完成，从而拖慢了大屏的展示速度。

       虽然魔术图可以根据用户自定义的模板和绑定的数据，循环生成最终的图表结果，但在这种场景下显得有些大材小用，且首屏加载性能不佳。因此，建议使用新的GridChart组件来替代魔术图，以提高加载性能。

       GridChart组件不仅轻量级，还能有效减少HTTP请求次数，加快页面加载速度。同时，它支持数据绑定和条件格式化，能够满足展示多维度指标的需求，确保大屏展示既美观又高效。
魔术图
image.png26979369.png
GridChart
image.png888878784.png


使用方法：
本插件使用handlebarsjs实现条目的复用，所以在使用中要参考handlebarsjs的语法。
1 首先我们使用GridChart组件并绑定数据
image.png43324278.png

2 输入自定义helpers
  1. Handlebars.registerHelper({
  2.   compare: function (v1, v2, options) {
  3.     const number1= parseFloat(v1, 10); // 提取整数部分
  4.     const number2 = parseFloat(v2, 10); // 提取整数部分
  5.     if (number1 > number2) {
  6.       //满足添加继续执行
  7.       return options.fn(this);
  8.     } else {
  9.       //不满足条件执行{{else}}部分
  10.       return options.inverse(this);
  11.     }
  12.   },
  13.   text: function () {
  14.     return "<p>tefsdafasxt</p>";
  15.   },
  16. });
复制代码
3 输入条目模板
  1. <p class="head">{{"订购日期(月)"}} 月</p>
  2. {{#compare "17万" 订单利润 }}
  3. <p class="item" style="color: red">{{订单利润}}</p>
  4. {{else}}
  5. <p class="item">{{订单利润}}</p>
  6. {{/compare}}

  8. <style>
  9.   .head ,.item {
  10.     margin: 5px 0 0 0;
  11.     background: #18b48a;
  12.     text-align: center;
  13.     font-size: 1.2em;
  14.     color: white;
  15.   }
  16. </style>
复制代码

4 调整插件的条目布局等
image.png81029356.png

语法参考文档：https://handlebarsjs.com/


感谢用户Run2024提供的插件GridChart！
插件下载： gridvisual.viz (95.47 KB, 下载次数: 13)

0 个回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
产品与服务
活字格低代码平台
Wyn 商业智能软件
SpreadJS纯前端表格控件
技术服务体系
技术博客
低代码技术
客户与案例
典型客户
成功案例
用户访谈
合作与生态
合作伙伴网络
葡萄城市场
葡萄城与国产化
活字格用友客开工具
品牌活动
葡萄城公开课
品牌战略发布会
赋能开发者高峰论坛
企业级低代码发展研讨会
企业级低代码应用大赛
表格技术研讨会
了解葡萄城
葡萄城简介
愿景使命
研发与创新
荣誉奖项
加入我们
联系方式
联系我们
400-657-6008

葡萄城社区二维码

关注“葡萄城社区”

赋能开发者

西安葡萄城软件有限公司
专业的软件开发技术和低代码平台提供商

陕ICP备2020018819号  |   陕公网安备：61019002000258  |   隐私政策  |   网站地图  

邮箱： info.xa@grapecity.com  |  © 2024 葡萄城软件，保留所有权利

Archiver| 手机版| 小黑屋|

返回顶部