SYSUI-自定义图表折线图代码-非svg和canvas

最新推荐文章于 2024-11-13 17:27:29 发布

胡向雷

最新推荐文章于 2024-11-13 17:27:29 发布

阅读量270

点赞数

分类专栏：图表框架 SYSUI 文章标签： javascript html 前端前端框架

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

版权

本文介绍了如何使用SYSUI前端框架创建非SVG和Canvas的折线图，通过DOM操作实现数据展示。提供了多折线图和单一折线图的示例代码，用户可以根据需求修改数据实现个性化图表。SYSUI同时也支持柱状图、圆点图等其他图表展示。

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

本示例将介绍使用SYUSI框架扩展的一个折线图图表功能模块，数据展示非svg和canvas模式，而是传统的html结构，以操作DOM处理。

//引入SYSUI框架
<script type="text/javascript" src="../js/SYSUI/SYSUI.js"></script>//本地地址

用户可以自己去下载下载地址：下载SYSUI.JS

var sys=new Global.SYSUI({
   
	Module:"#themeModule",//声明的元素对象
    JsFile:[{
   onlyId:"12",url:"../js/SYSBOX/js/box.min.js"},{
   onlyId:"13",url:"../js/SYSTABLE/js/systable3.1.js"}]//这里面引用的是其它插件
});//全局对象
sys.Methodset([{
   'module': '#chartdata',event: function(sys, obj) {
   
   //编辑方法
	}
}])

这里引用全局做操作，支持对象属性操作

 new SYSUI({
   
 Module:'#themeModule',
 Method:[{
   'module':'#pageModule',event:function(sys,obj,Callback){
   
 //方法操作
 	}
 }]
 })

以上两种都可以使用，用户根据自己的需求编辑
下面介绍如何使用，数据通过html代码结构展示，通过DOM进行操作。
效果图：

图一为多折线图效果，演示地址：http://www.husysui.com/material/demolist/sysui/summary_graph/index.html
下面为html代码结构，通过标签指令编辑模块，具体标签指令说明请查看文档说明

<div class="chartdata clearfix" id="chartdata" sys-charth="500" sys-charpart="7" sys-chartcount="1" sys-title="出售量">
	<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">
			<div class="pillaramount sys-region graph1" sys-amount-value="amount"  sys-keyset="amount" sys-type="height" sys-onclick="mouse">
				<span class="amount bgcolor3 sys-region" sys-type="onclick" sys-click="shijian(this)" sys-keyset="id,amount,title"  >
					<span class="sys-region PromptText" sys-keyset="amount" sys-type="text"></span>
					<span class="Polyline line-style1"></span>
				</span>
			</div>
		</div>
		<div  class="sys-region" sys-title-value="name" >
			<div class="pillaramount sys-region graph2" sys-amount-value="sales"   sys-keyset="sales" sys-type="height" sys-onclick="mouse">
				<span class="amount bgcolor4 sys-region"  sys-type="onclick" sys-click="shijian(this)" sys-keyset="id,sales,count-title" >
					<span class="sys-region PromptText" sys-keyset="sales" sys-type="text"></span>
					<span class="Polyline line-style2"></span>
				</span>
			</div>
		</div>
		<div  class="sys-region" sys-title-value="name"  >
			<div class="pillaramount sys-region graph3" sys-amount-value="count"  sys-keyset="count" sys-type="height" sys-onclick="mouse">
				<span class="amount bgcolor5 sys-region" sys-type="onclick" sys-click="shijian(this)" sys-keyset="id,count,sales-title">
					<span class="sys-region PromptText" sys-keyset="count" sys-type="text"></span>
					<span class="Polyline line-style3"></span>
				</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 class="clearfix"><label class="sys-region l_f">家电数量:</label><span class="sys-region l_f"  sys-keyset="sales" sys-type="text"></span>万台</div>
			<div class="clearfix"><label class="sys-region l_f">手机数量:</label><span class="sys-region l_f"  sys-keyset="count" sys-type="text"></span>万台</div>
	</div>
	</div>
</div>

上面html编写的就是你需要进行数据展示的代码，支持一个多个，没有数量限制。结构样式自由发挥，这里做的统一，具体css样式请查看事例
下面是js代码：只贴具体代码

 var jsondata=[
     {
   "id":1,"type":"1月","amount":'134',"sales":"256","count":"457","title":"家电数量","sales-title":'数码数量',"count-title":'手机数量'},
     {
   "id":2,"type":"2月","amount":'534',"sales":"314","count":"4457","title":"家电数量","sales-title":'数码数量',"count-title":'手机数量'},
     {
   "id":3,"type":"3月","amount":'124',"sales":"222","count":"457","title":"家电数量","sales-title":'数码数量',"count-title":