Extjs 桑基图绘制实现（前端+后端）

桑基图效果如下：

准备工作：

1、新建 SanKey.aspx.cs ，如下所示，将对于部分删除。

删除多余部分，保留头部如下：

2、新建 SanKey.html 页面，如下所示；

在html页面中添加如下信息：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="Scripts/bootExtJS.js" type="text/javascript"></script><script src="Scripts/Jquery/jquery.min.js" type="text/javascript"></script><script src="Scripts/ECharts4.0.2/echarts.min.js" type="text/javascript"></script><script src="Scripts/SanKey.js"></script>
</head>
<body><div id="main1" style="float: left; width: 1300px; height: 800px; background-color: #efefef;"><div id="pic1" style="float: left; width: 1000px; height: 600px; background-color: #efefef;"></div></div>
</body>
</html>

3、新建SanKey.js文件,如下：

/*
*
* 页面前台
*
* 页面：桑吉图
* 作者：凌霜残雪
*
*/
Ext.onReady(function () {//开启提示功能Ext.QuickTips.init();//通过ajax发送添加请求Ext.Ajax.request({url: "SanKey.aspx?method=GetData",method: 'POST',success: function (response) {var data = response.responseText;if (data != "" && data != null) {var pic1 = echarts.init(document.getElementById('pic1'));var eValue = eval('(' + data + ')'); //要先转换pic1.setOption(option = {title: {text: '工厂能耗桑基图(功率kW)',left: 45,textStyle:{fontSize: 20}},tooltip: {trigger: 'item',triggerOn: 'mousemove'},series: [{type: 'sankey',layout: 'none',data: eValue.nodes,links: eValue.links,itemStyle: {normal: {borderWidth: 1,borderColor: '#aaa'}},lineStyle: {normal: {color: 'source',curveness: 0.5}},top: 20}]});}}});//页面总布局var viewport = Ext.create('Ext.container.Viewport', {layout: 'border',items:[{region: 'center',border: 0,bodyStyle: 'padding: 10px; background-color: #efefef; overflow-y: auto; overflow-x: hidden;',layout: 'fit',contentEl: 'main1'}]});
});

4、后端SanKey.aspx 代码如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Reflection;
using System.Web;
using System.Web.Script.Serialization;
using System.Web.UI;
using System.Web.UI.WebControls;namespace ExtExample.Pages
{public partial class SanKey : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e){String methodName = Request["method"]; //方法名称MethodInfo method = this.GetType().GetMethod(methodName);if (method == null)throw new Exception("method is null");try{method.Invoke(this, null); //方法调用}catch{}}public void GetData(){#region 静态桑基图数据源List<Nodes> nodes = new List<Nodes>();Nodes n1 = new Nodes { name = "总用量", value = "1403.97", itemStyle = new ItemStyle() { color = "#9d9ca3" } };nodes.Add(n1);Nodes n2 = new Nodes { name = "厂房1", value = "118.38", itemStyle = new ItemStyle() { color = "#00a800" } };nodes.Add(n2);Nodes n3 = new Nodes { name = "机器1", value = "0", itemStyle = new ItemStyle() { color = "#81be8a" } };nodes.Add(n3);Nodes n4 = new Nodes { name = "机器2", value = "0", itemStyle = new ItemStyle() { color = "#81be8a" } };nodes.Add(n4);Nodes n5 = new Nodes { name = "机器3", value = "0", itemStyle = new ItemStyle() { color = "#81be8a" } };nodes.Add(n5);Nodes n6 = new Nodes { name = "厂房2", value = "1191.22", itemStyle = new ItemStyle() { color = "#8888ff" } };nodes.Add(n6);Nodes n7 = new Nodes { name = "机器4", value = "396.26", itemStyle = new ItemStyle() { color = "#8888ff" } };nodes.Add(n7);Nodes n8 = new Nodes { name = "电机1", value = "0", itemStyle = new ItemStyle() { color = "#8888ff" } };nodes.Add(n8);Nodes n9 = new Nodes { name = "电机2", value = "0", itemStyle = new ItemStyle() { color = "#8888ff" } };nodes.Add(n9);Nodes n10 = new Nodes { name = "电机3", value = "0", itemStyle = new ItemStyle() { color = "#8888ff" } };nodes.Add(n10);Nodes n11 = new Nodes { name = "电机4", value = "0", itemStyle = new ItemStyle() { color = "#8888ff" } };nodes.Add(n11);Nodes n12 = new Nodes { name = "电机5", value = "0", itemStyle = new ItemStyle() { color = "#8888ff" } };nodes.Add(n12);Nodes n13 = new Nodes { name = "电机6", value = "0", itemStyle = new ItemStyle() { color = "#8888ff" } };nodes.Add(n13);Nodes n14 = new Nodes { name = "电机7", value = "0", itemStyle = new ItemStyle() { color = "#8888ff" } };nodes.Add(n14);Nodes n15 = new Nodes { name = "电机8", value = "0", itemStyle = new ItemStyle() { color = "#8888ff" } };nodes.Add(n15);Nodes n16 = new Nodes { name = "电机9", value = "0", itemStyle = new ItemStyle() { color = "#8888ff" } };nodes.Add(n16);Nodes n17 = new Nodes { name = "电机10", value = "0", itemStyle = new ItemStyle() { color = "#8888ff" } };nodes.Add(n17);Nodes n18 = new Nodes { name = "电机11", value = "0", itemStyle = new ItemStyle() { color = "#8888ff" } };nodes.Add(n18);Nodes n19 = new Nodes { name = "厂房3", value = "94.37", itemStyle = new ItemStyle() { color = "#8888ff" } };nodes.Add(n19);Nodes n20 = new Nodes { name = "电机12", value = "0", itemStyle = new ItemStyle() { color = "#ff9a35" } };nodes.Add(n20);Nodes n21 = new Nodes { name = "电机13", value = "0", itemStyle = new ItemStyle() { color = "#ff9a35" } };nodes.Add(n21);List<Links> links = new List<Links>();Links l1 =  new Links { source = "总用量", target = "厂房1", value = "118.38", lineStyle = new ItemStyle() { color = "#81be8a" } };Links l2 =  new Links { source = "厂房1", target = "机器1", value = "53.50", lineStyle = new ItemStyle() { color = "#81be8a" } };Links l3 =  new Links { source = "厂房1", target = "机器2", value = "57.68", lineStyle = new ItemStyle() { color = "#81be8a" } };Links l4 =  new Links { source = "厂房1", target = "机器3", value = "7.20", lineStyle = new ItemStyle() { color = "#81be8a" } };Links l5 =  new Links { source = "总用量", target = "厂房2", value = "1191.22", lineStyle = new ItemStyle() { color = "#3e0fee" } };Links l6 =  new Links { source = "厂房2", target = "机器4", value = "396.26", lineStyle = new ItemStyle() { color = "#3e0fee" } };Links l7 =  new Links { source = "机器4", target = "电机1", value = "170.10", lineStyle = new ItemStyle() { color = "#8888ff" } };Links l8 =  new Links { source = "机器4", target = "电机2", value = "82.00", lineStyle = new ItemStyle() { color = "#8888ff" } };Links l9 =  new Links { source = "机器4", target = "电机3", value = "144.16", lineStyle = new ItemStyle() { color = "#d6a18f" } };Links l10 = new Links { source = "厂房2", target = "电机4", value = "204.32", lineStyle = new ItemStyle() { color = "#d6a18f" } };Links l11 = new Links { source = "厂房2", target = "电机5", value = "321.48", lineStyle = new ItemStyle() { color = "#d6a18f" } };Links l12 = new Links { source = "厂房2", target = "电机6", value = "14.72", lineStyle = new ItemStyle() { color = "#d6a18f" } };Links l13 = new Links { source = "厂房2", target = "电机7", value = "21.76", lineStyle = new ItemStyle() { color = "#d6a18f" } };Links l14 = new Links { source = "厂房2", target = "电机8", value = "1.28", lineStyle = new ItemStyle() { color = "#d6a18f" } };Links l15 = new Links { source = "厂房2", target = "电机9", value = "51.20", lineStyle = new ItemStyle() { color = "#d6a18f" } };Links l16 = new Links { source = "厂房2", target = "电机10", value = "19.28", lineStyle = new ItemStyle() { color = "#d6a18f" } };Links l17 = new Links { source = "厂房2", target = "电机11", value = "160.92", lineStyle = new ItemStyle() { color = "#d6a18f" } };Links l18 = new Links { source = "总用量", target = "厂房3", value = "94.37", lineStyle = new ItemStyle() { color = "#81be8a" } };Links l19 = new Links { source = "厂房3", target = "电机12", value = "45.15", lineStyle = new ItemStyle() { color = "#8888ff" } };Links l20 = new Links { source = "厂房3", target = "电机13", value = "48.48", lineStyle = new ItemStyle() { color = "#8888ff" } };links.Add(l1);          links.Add(l2);          links.Add(l3);          links.Add(l4);          links.Add(l5);          links.Add(l6);          links.Add(l7);          links.Add(l8);          links.Add(l9);          links.Add(l10);         links.Add(l11);         links.Add(l12);         links.Add(l13);         links.Add(l14);         links.Add(l15);         links.Add(l16);         links.Add(l17);         links.Add(l18);         links.Add(l19);         links.Add(l20);Rootobject b = new Rootobject();b.nodes = nodes;b.links = links;#endregion#region 将数据源转换成Json格式JavaScriptSerializer oSerializer = new System.Web.Script.Serialization.JavaScriptSerializer();var json = oSerializer.Serialize(b);#endregion//由于页面定义了Div等Html元素，所以在Response json格式需要将Html页面元素清除，只输出json，这样前台就只收到Json格式不包含html元素。Response.Clear();Response.Write(json);Response.Flush();Response.End();}#region 桑吉图Json格式类定义public class Rootobject{public List<Nodes> nodes { get; set; }public List<Links> links { get; set; }}public class Nodes{public string name { get; set; }public string value { get; set; }public ItemStyle itemStyle { get; set; }}public class Links{public string source { get; set; }public string target { get; set; }public string value { get; set; }public ItemStyle lineStyle { get; set; }}public class ItemStyle{public string color { get; set; }}#endregion}
}

运行后效果如开头所示，源代码下载：猛戳这里

Extjs 桑基图绘制实现（前端+后端）相关推荐

R语言多层桑基图_R语言可视化（二十三）：桑基图绘制
23. 桑基图绘制清除当前环境中的变量 rm(list=ls()) 设置工作目录 setwd("C:/Users/Dell/Desktop/R_Plots/23sankey/") ...
桑基图绘制的简易操作
1.什么是桑吉图? 桑基图 (Sankey Diagram),是一种特定类型的流图,用于描述一组值到另一组值的流向.上图为1869年,查尔斯米纳德(Charles Minard)绘制的1812年拿破仑 ...
ggalluvial | 冲击图/ 桑基图绘制
Alluvial_0 ❝ 小伙伴写的ggalluvial使用指南. ❞ 冲击图是一种对能量分流的可视化展示图,在富集分析中可以用来展示基因在各通路中的富集流向,展示效果类比于弦图. ggalluvia ...
python 桑基图_3行代码基于python的matplotlib绘制桑基图
背景桑基图作为1种表达数据流动方向的可视化方式,在商业数据分析,地理可视化,生物医学领域有着广泛应用.比如:在基因组学领域,有研究利用桑基图来表示生物分子之间的调控关系. 目前多数桑基图软件包(如p ...
数据治理 Python桑基图处理表关系
数据治理 Python桑基图处理表关系需求随着hive库表越来越多,调度出问题后,排查时间越来越长.计划通过桑基图以及血缘图谱解决,当前先用桑基图页面顶一段时间.后期做成web服务,如果有可能,尽 ...
【Python基础】用Python制作漂亮的流动桑基图
来源:Python数据之道作者:Peter 整理:Lemon 桑基图绘制实践本文中介绍的是如何制作桑基图,使用的可视化库是强大的 Pyecharts (版本1.7.1,版本一致很重要).文章将从如 ...
炫酷！用Python制作漂亮的流动桑基图
作者:Peter 整理:Lemon 桑基图绘制实践本文中介绍的是如何制作桑基图,使用的可视化库是强大的 Pyecharts (版本1.7.1,版本一致很重要).文章将从如下几个方面进行介绍: 什么是 ...
桑基图（Echarts）——自定义风格
桑基图绘制--使用Echarts 桑基图(Sankey diagram),即桑基能量分流图,也叫桑基能量平衡图.它是一种特定类型的流程图,图中延伸的分支的宽度对应数据流量的大小,通常应用于能源.材料成 ...
可视化神器Plotly玩转桑基图
公众号:尤而小屋作者:Peter 编辑:Peter 大家好,我是Peter呀~ 本文介绍的是利用Plotly绘制一种相对少见的可视化图形:桑基图,这个图形可以说是展现数据流动的利器. 虽然桑基图使用 ...

Extjs 桑基图绘制实现（前端+后端）

Extjs 桑基图绘制实现（前端+后端）相关推荐

最新文章

热门文章