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

最新推荐文章于 2024-03-24 13:33:30 发布
最新推荐文章于 2024-03-24 13:33:30 发布
阅读量1.6k 收藏 4
点赞数 1
分类专栏： Ext JS 在VS 中应用 前端工具 文章标签： ExtJS 桑基图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_21419015/article/details/81937513
版权

桑基图效果如下：

准备工作：

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
    }
}

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

凌霜残雪
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
前端项目-d3-sankey.zip
09-02
前端项目-d3-sankey,可视化有向非循环网络中节点之间的流。
Tableau作图系列：桑基图（Sankeydiagram）
分享既学习
03-14 6881
上图是一个简单到桑基图也是本次实现的目标 一、前言 桑基图（Sankeydiagram），即桑基能量分流图，也叫桑基能量平衡图。它是一种特定类型的流程图，图中延伸的分支的宽度对应数据流量的大小，通常应用于能源、材料成分、金融、零售等数据的可视化分析。由于Tableau的设计初衷原因(专业)，不能直接使用Tableau绘制桑基图需要一些技巧，下面一起来试试吧！ 二、准备数据 我们实际应用的时候也...
R语言实战—一文搞定桑基图的绘制
最新发布
Promising_GEO的博客
03-24 1232
地学领域常常需要用到时间序列分析，例如某地区三个不同年份土地利用情况，有时我们不仅需要知道每一个年份的不同类的占比情况，还需要明晰土地利用转移变化的情况，常用的方法是制作转移矩阵，转移矩阵作为表格可以很好表达土地利用的转移情况，那有没有一种图可以一眼看清变化情况呢？它是一种特定类型的流程图，概述图中延伸的分支的宽度对应数据流量的大小，通常应用于能源、材料成分、金融等数据的可视化分析。二、地学领域的桑基图。
python百分比成功的桑吉图
weixin_43852674的博客
08-25 304
转换数据格式 echarts JS 格式准备 在线Echarts JS： https://jshare.com.cn/demos/eYEsqk def get_web_data(data): links = [] for i in range(data.shape[0]): link = [] link.append(data.iloc[i][1]) link.append(data.iloc[i][2]) link.app
echarts中桑基图的二三事
m0_64407944的博客
07-03 923
前端开发中echarts桑基图主要的几个配置项
Echarts数据可视化 第4章 Echarts可视化图 4.12 桑基图
谢谢你们的关注
03-18 1545
Echarts数据可视化 第4章 Echarts可视化图 4.12 桑基图
前端UI-Echarts：桑基图_01_html及json
quixon的专栏
10-05 884
https://www.echartsjs.com/examples/zh/editor.html?c=sankey-energy sankey-nodeAlign-left.html文件 <!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"&g...
Echarts桑基图的排列顺序
Gunba1的博客
01-04 3571
桑基图的配置
桑基图DEMO代码
06-27 1526
桑基图DEMO代码 代码取自pyecharts.charts下sankey的example代码。 nodes = [ {'name': 'category1'}, {'name': 'category2'}, {'name': 'category3'}, {'name': 'category4'}, {'name': 'category5'}, {'name':...
【D3.js数据可视化实战】--（3）桑基图（sankey）的绘制
司机大傻
11-04 3万+
桑基图是流图（flow diagram）的一种，用来描述能量，人口，经济等的流动情况。 桑基图主要关注能量、物料或资本等在系统内部的流动和转移情况。起始流量和结束流量相同；在内部，不同的线条代表了不同的流量分流情况，它的宽度成比例地显示此分支占有的流量；节点不同的宽度代表了特定状态下的流量大小。
Echarts 桑基图的详细配置过程
梁辰兴的博客
09-15 1997
Echarts桑基图（Sankey Diagram）是一种数据可视化图表类型，用于展示流量、能量、资金等在各个节点之间的流动和转化关系。桑基图通过节点和曲线来表示不同元素之间的关系，从而形成一个流动的网络图，可以帮助用户直观地理解数据的流动过程和转化情况。Echarts桑基图的特点如下：流动关系展示：桑基图适用于展示多个元素之间的流动关系，例如货物流动、能量传输、资金转移等。通过节点和曲线的连接方式，可以清晰地展示不同元素之间的流动路径和量级关系。
d3.js 桑基图（sankey）插件
05-10
d3.js 桑基图（sankey）插件
ExtJs +Echart 实现桑基图绘制
08-22
ExtJs +Echart 实现桑基图绘制，包括前端页面搭建，后端数据赋值，桑基图数据绑定，桑基图Json后台格式定义，Json格式转换到前台接收等，下载后如果右运行不了，请加群，备注ExtJs桑基图代码，如果好用，请给五分好评，谢谢大家支持
extjs4图表绘制之折线图实现方法分析
10-15
主要介绍了extjs4图表绘制之折线图实现方法,结合实例形式分析了extjs4绘制折线图的相关操作技巧、实现方法与相关注意事项,需要的朋友可以参考下
extjs图形绘制之饼图实现方法分析
10-15
主要介绍了extjs图形绘制之饼图实现方法,结合实例形式分析了extjs绘制饼图的相关实现方法与操作注意事项,需要的朋友可以参考下
extjs图表绘制之条形图实现方法分析
10-15
主要介绍了extjs图表绘制之条形图实现方法,结合实例形式分析了extjs绘制条形图的相关操作技巧与使用注意事项,需要的朋友可以参考下
EXT_ASP.rar_asp extjs_extjs_extjs asp_extjs+asp
09-14
EXTJS+ASP开发通讯录程序，作为学习EXTJST学习实例
vscode 入门之新建项目
热门推荐
lingshuangcanxue
08-07 5万+
1 、首先，vscode本身没有新建项目的选项，所以要先创建一个空的文件夹。这里，我们在桌面上新建一个 VueDemo 的文件夹，如下所示： 2、 接着打开 vscode，点击vscode左上角文件，打开文件夹选项，如下所示： 3 、选择之前创建的空文件将作为vscode的文件夹即可。 之后在 VS code中可以看到如下界面。 ...
ExtJS 表格悬浮提示
lingshuangcanxue
08-09 2499
1.特定单元格悬浮提示 其中 gridStore1 为表格数据源，grid1 为表格设计。 //表格数据源 var gridStore1 = Ext.create('Ext.data.Store', { proxy: { type: "ajax", actionMethods: { read: "POST" }, ...
echart 桑基图
09-14
Echart桑基图是一种用于可视化分析数据的图表类型，它通过展示数据流量的大小来帮助用户理解数据的分布情况。桑基图的节点和边可以根据需求进行自定义设置以达到统一的风格。 要实现Echart桑基图，你可以参考Echart官方提供的示例代码。首先，你需要在前端页面搭建桑基图的展示区域，并将数据绑定到相应的图表上。 在后端，你需要为桑基图提供数据，可以通过对数据进行赋值来实现。数据的格式需要根据Echart桑基图的要求进行定义，通常是一个包含节点和边的Json格式。 在前后端之间进行数据的传递时，可以使用Json格式进行交互。后端将数据转换为Json格式后，通过接口传递到前端，前端接收到数据后进行解析，并绑定到桑基图上进行展示。 若下载后无法正常运行，请加群并备注"ExtJs桑基图代码"，群内的成员会为你提供帮助。如果你觉得这个方法对你有帮助，请给予五分评价。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

凌霜残雪

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值