SYSUI-自定义图表模板代码

最新推荐文章于 2024-08-15 11:02:12 发布

胡向雷

最新推荐文章于 2024-08-15 11:02:12 发布

阅读量294

点赞数

分类专栏： SYSUI 框架文章标签： js javascript html css

本文链接：https://blog.csdn.net/weixin_43962384/article/details/118889312

版权

本文介绍了如何使用SYSUI框架创建自定义柱状图模板，通过HTML+CSS配合少量JS实现。详细讲解了配置项，包括html代码中的各种指令，如sys-charth、sys-charpart、sys-onclick等，并提供了简单的柱状图示例代码。同时，讨论了CSS3实现3D效果相对于canvas的优势。

摘要由CSDN通过智能技术生成

有时候我们需要对数据进行一种图表展示效果，一般情况下我们用的最多的是插件，主要通过H5的canvas实现。图表往往是定死的样式。如果想改变样式或者添加新的功能比较困难了。这里我使用SYSUI开发一套自定义模板的图表，主要通过html+css，配合少了的js实现。
以下是通过SYSUI框架实现的效果图：事例地址：演示地址
在这里插入图片描述
基于SYSUI开发的图表其中柱状图图表是图表中配置最简单的，只需要通过标签指令配置完成，以及css样式实现，可以自己扩展方法，可以随便修改展示的效果。
下面介绍下最基本的配置：
1.html代码：

<div class="chartdata clearfix" id="chartdata" sys-charth="300" sys-charpart="7">
   <div class="chartamount sys-chart" sys-onclick="mouse">
	 <div class="typename sys-region" sys-keyset="type" sys-type="text"></div>
	 <div  class="sys-region" sys-title-value="name" sys-type="onclick" sys-click="shijian(this)" sys-keyset="id" >
		<div class="pillaramount sys-region" sys-amount-value="amount"  sys-keyset="amount" sys-type="height">
			<span class="amount sys-region"  sys-keyset="amount" sys-type="text"></span>
		</div>
	</div>
	//鼠标移入移出的显示的内容
	<div class="mousestyle Bombbox sys-bombbox">
		<div class="sys-region" sys-keyset="type" sys-type="text"></div>
		<div class="clearfix">
			<label class="sys-region l_f">出售数量:</label>
			<span class="sys-region l_f"  sys-keyset="amount" sys-type="text"></span></div>
		</div>
	</div>
</div>

主体结构皆为html+css，这种自定义布局方式很方便，编写也简单，修改也方便，实现效果也方便，需要注意是需要编辑相应的标签属性，这里我们需要标签指令：

sys-charth=“int” 必填
定义图表的高度，无需设置宽度，宽度根据实际需求设置
sys-charpart=“int” 选填
定义分界线，用于数据分隔统计，用户可以选择性填写，不填则无分隔线和左侧统计量，填写则自动分配每隔的数量。
sys-οnclick=“mouse” 选填
启用鼠标放置在改柱状栏目下，移入移出的操作，主要用于栏目数据的统计展示，起展示的统计数据样式通过 class=“sys-bombbox”实现
class=“sys-bombbox” 选填
该值和sys-οnclick=“mouse” 一同使用，用于鼠标移入移出操作层显示隐藏的方法。具体内容编辑到这里面。
sys-type=“height” 必填
柱状高度设置，用于显示每个柱状图的高度（数量） sys-type="对象"根据里面的对象实现数据的展示的效果，text为文本新式。onclick点击新式
sys-keyset=“渲染值”
数据渲染键值名称，多个值用逗号隔开
sys-click=“声明定义函数（this,值）”
申明一个事件的函数，里面的参数除默认第一个tihs,后面的则根据sys-keyset来定义，支持定义多个参数
**

以上为一个简单的柱状图需要的配置，下面为js部分：

new SYSUI({
   
		Module:'#themeModule',
		Method:[{
   'module':'#pageModule',event:function(sys,obj,Callback){
   
				obj.style.cssText="height:"+ (sys.h