【桑基图】绘制桑基图

news2024/11/30 18:40:41

绘制桑基图

  • 一、绘制桑基图
    • (1)方法一:去在线网站直接绘制
    • (2)方法二:写html之后在vscode上运行
  • 二、遇到的问题
    • (1)当导入一些excel的时候,无法绘制出桑基图

一、绘制桑基图

(1)方法一:去在线网站直接绘制

https://www.lddgo.net/chart/sankey-chart

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

我绘制的桑基图如下:
在这里插入图片描述

(2)方法二:写html之后在vscode上运行

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>组织节点</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
</head>

<body>
    <div id="chart" style="width: 100%; height: 600px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('chart'));

        var option = {
            title: {
                text: '组织节点',
                subtext: 'CSDN:温欣2030',
                left: 'center',
                top: 'top'
            },
            tooltip: {
                trigger: 'item',
                triggerOn: 'mousemove'
            },
            animation: false,
            series: [{
                type: 'sankey',
                emphasis: {
                    focus: 'adjacency'
                },
                nodeAlign: 'justify',
                orient: 'horizontal',
                data: [{
                        name: '台风'
                    },
                    {
                        name: '停运停航'
                    },
                    {
                        name: '暴雨'
                    },
                    {
                        name: '停工停产'
                    },
                    {
                        name: '停课'
                    },
                    {
                        name: '农作物受损'
                    },
                    {
                        name: '房屋损毁'
                    },
                    {
                        name: '城市内涝'
                    },
                    {
                        name: '应急管理厅'
                    },
                    {
                        name: '气象局'
                    },
                    {
                        name: '海洋与渔业局'
                    },
                    {
                        name: '交通受阻'
                    },
                    {
                        name: '公安厅'
                    },
                    {
                        name: '洪涝灾害'
                    },
                    {
                        name: '水利厅'
                    },
                   
                ],
                links: [{
                        source: '台风',
                        target: '停运停航',
                        value: 1
                    },
                    {
                        source: '台风',
                        target: '暴雨',
                        value: 7
                    },
                    {
                        source: '暴雨',
                        target: '停运停航',
                        value: 1
                    },
                    {
                        source: '台风',
                        target: '停工停产',
                        value: 1
                    },
                    {
                        source: '台风',
                        target: '停课',
                        value: 1
                    },
                    {
                        source: '台风',
                        target: '农作物受损',
                        value: 2
                    },
                    {
                        source: '台风',
                        target: '房屋损毁',
                        value: 3
                    },
                    {
                        source: '暴雨',
                        target: '城市内涝',
                        value: 1
                    },
                    {
                        source: '暴雨',
                        target: '农作物受损',
                        value: 1
                    },
                    {
                        source: '台风',
                        target: '应急管理厅',
                        value: 1
                    },
                    {
                        source: '台风',
                        target: '气象局',
                        value: 1
                    },
                    {
                        source: '气象局',
                        target: '海洋与渔业局',
                        value: 1
                    },
                    {
                        source: '海洋与渔业局',
                        target: '应急管理厅',
                        value: 1
                    },
                    {
                        source: '交通受阻',
                        target: '公安厅',
                        value: 1
                    },
                    {
                        source: '公安厅',
                        target: '气象局',
                        value: 1
                    },
                    {
                        source: '洪涝灾害',
                        target: '水利厅',
                        value: 1
                    },
                    {
                        source: '农作物受损',
                        target: '应急管理厅',
                        value: 1
                    },
                   
                ],
                lineStyle: {
                    color: 'source',
                    curveness: 0.5
                }
            }]
        };

        myChart.setOption(option);
    </script>
</body>

</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

二、遇到的问题

(1)当导入一些excel的时候,无法绘制出桑基图

由于这个原因,后来我又尝试了其他的网站,找到了原因,原来是我的数据有问题:

在这里插入图片描述
而上面这个软件我使用的是:https://app.rawgraphs.io/

只需要三步骤即可绘制桑基图:

(1)导入数据

在这里插入图片描述

(2)选择桑基图

在这里插入图片描述

(3)拖拽数据
在这里插入图片描述

(4)根据自己的选择修改图片
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1290545.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

B 站基于 StarRocks 构建大数据元仓

作者&#xff1a;bilibili 大数据高级开发工程师 杨洋 B站大数据元仓是一款用来观测大数据引擎运行情况、推动大作业治理的系统诊断产品。经过调研和性能测试&#xff0c;大数据元仓最终以 StarRocks 为技术底座&#xff0c;从实际的应用效果来看&#xff0c;大部分查询都能在几…

准确!!!在 CentOS 8 上配置 PostgreSQL 14 的主从复制

在 CentOS 8 上配置 PostgreSQL 14 的主从复制&#xff0c;并设置 WAL 归档到特定路径 /home/postgres/archive 的步骤如下&#xff1a; 主服务器配置&#xff08;主机&#xff09; 配置 PostgreSQL&#xff1a; 编辑 postgresql.conf 文件&#xff1a; vim /data/postgres/p…

AIGC之Image2Video(一)| Animate Anyone:从静态图像生成动态视频,可将任意图像角色动画化

近日&#xff0c;阿里发布了Animate Anyone&#xff0c;只需一张人物照片&#xff0c;结合骨骼动画&#xff0c;就能生成人体动画视频。 项目地址&#xff1a;https://humanaigc.github.io/animate-anyone/ 论文地址&#xff1a;https://arxiv.org/pdf/2311.17117.pdf Github…

632. 最小区间

632. 最小区间 class Solution {public int[] smallestRange(List<List<Integer>> nums) {int size nums.size();Map<Integer, List<Integer>> indices new HashMap<Integer, List<Integer>>();int xMin Integer.MAX_VALUE, xMax Inte…

Docker+jenkins+gitlab实现持续集成

1.安装环境 服务器ip虚拟机版本192.168.5.132centos7.6192.168.5.152centos7.6 2. 安装docker 安装必要的一些系统工具 yum install -y yum-utils device-mapper-persistent-data lvm2添加软件源信息&#xff0c;要确保centos7能上外网 yum-config-manager --add-repo http:…

HarmonyOS4.0从零开始的开发教程06常用基础组件

HarmonyOS&#xff08;四&#xff09;常用基础组件 1 组件介绍 组件&#xff08;Component&#xff09;是界面搭建与显示的最小单位&#xff0c;HarmonyOS ArkUI声明式开发范式为开发者提供了丰富多样的UI组件&#xff0c;我们可以使用这些组件轻松的编写出更加丰富、漂亮的界…

华为配置风暴控制示例

组网需求 如下图所示&#xff0c;SwitchA作为二层网络到三层路由器的衔接点&#xff0c;需要防止二层网络转发的广播、未知组播或未知单播报文产生广播风 配置思路 用如下的思路配置风暴控制。 通过在GE0/0/1接口视图下配置风暴控制功能&#xff0c;实现防止二层网络转发的…

华为设备使用python配置netconf 功能

实验目的&#xff1a; 公司有一台CE12800的设备&#xff0c;管理地址位172.16.1.2&#xff0c;现在需要编写自动化脚本&#xff0c;通过SSH登陆到设备上配置netconf协议的用户名&#xff0c;密码以及netconf服务&#xff0c;并且通过netconf协议将设备的loopback0接口IP地址配…

Redis应用-缓存

目录 什么是缓存 使用redis作为缓存 缓存的更新策略 通用的淘汰策略 redis内置的淘汰策略 缓存预热 缓存穿透 缓存雪崩 缓存击穿 什么是缓存 缓存(cache)是计算机中一个经典的概念,在很多的场景中都会涉及到. 核心思路就是把一些常用的数据放到触手可及(访问速度更快…

docker安装及配置mysql

docker 安装mysql 下载镜像文件 下载mysql5.7版本 sudo docker pull mysql:5.7检查是否下载成功 sudo docker images2.创建实例并启动 切换到root下避免每次使用sudo 密码&#xff1a;vagrant docker run -p 3306:3306 --name mysql \ -v /mydata/mysql/log:/var/log/my…

ChatGPT能帮助--掌握各种AI绘图工具,随意生成各类型性图像

2023年随着OpenAI开发者大会的召开&#xff0c;最重磅更新当属GPTs&#xff0c;多模态API&#xff0c;未来自定义专属的GPT。微软创始人比尔盖茨称ChatGPT的出现有着重大历史意义&#xff0c;不亚于互联网和个人电脑的问世。360创始人周鸿祎认为未来各行各业如果不能搭上这班车…

专业130+总分400+云南大学通信847专业基础综考研经验(原专业课827)

今年专业130总分400云南大学通信上岸&#xff0c;整体考研感觉还是比较满意&#xff0c;期间也付出了很多心血&#xff0c;走过弯路&#xff0c;下面分享一下这一年考研得失&#xff0c;希望大家可以从中有所借鉴。 先说明我在考研报名前更换成云南大学的理由&#xff1a;&…

HarmonyOS4.0从零开始的开发教程03初识ArkTS开发语言(中)

HarmonyOS&#xff08;二&#xff09;初识ArkTS开发语言&#xff08;中&#xff09;之TypeScript入门 浅析ArkTS的起源和演进 1 引言 Mozilla创造了JS&#xff0c;Microsoft创建了TS&#xff0c;Huawei进一步推出了ArkTS。 从最初的基础的逻辑交互能力&#xff0c;到具备类…

使用NimoShake将数据从AWS DynamoDB迁移至阿里云MongoDB

本文介绍从AWS DynamoDB到阿里云MongoDB的迁移框架。 它概述了以下步骤&#xff1a; 在阿里云上配置云数据库MongoDB版并应用公网终端节点在 AWS EC2 上安装 Nimoshake将AWS EC2访问阿里云MongoDB版列入白名单配置 Nimoshake 并开始迁移过程验证目标数据库上的增量数据 1. 创…

阿里云上传文件出现的问题解决(跨域设置)

跨域设置引起的问题 起因&#xff1a;开通对象存储服务后&#xff0c;上传文件限制在5M 大小&#xff0c;无法上传大文件。 1.查看报错信息 2.分析阿里云服务端响应内容 <?xml version"1.0" encoding"UTF-8"?> <Error><Code>Invali…

计算机图形图像技术(图像锐化处理与图像解析)

一、实验原理&#xff1a; 1、拓展Sobel算子锐化 void Sobel(Array src, Array dst, int ddepth, int dx, int dy, int ksize); ①参数&#xff1a;src为输入图像&#xff1b;dst为输出图像&#xff0c;大小和通道数与源图像一致&#xff0c;必要时重建&#xff1b;ddepth为目…

【动手学深度学习】(十一)卷积层

文章目录 一、从全连接到卷积 一、从全连接到卷积 分类猫和狗的图片 使用一个相机采集图片&#xff08;12M像素&#xff09;RGB图片有36M元素使用100大小的单隐层MLP&#xff0c;模型有3.6B元素 远多于世界上所有猫和狗总数&#xff08;900M狗&#xff0c;600M猫&#xff09;…

KD-Tree

游戏中常对物体进行空间划分&#xff0c;对于均匀分布的划分一般用四叉树(八叉树)&#xff0c;动态不均匀的分布可以采用kd-tree 构建kd-tree 构建思路&#xff1a; 1.对节点进行各维度的方差分析&#xff0c;选取方差最大(即离散程度最高)的维度进行排序。取中值节点作为分…

ThreadX开源助力Microsoft扩大应用范围:对比亚马逊AWS的策略差异

全球超过120亿台设备正在运行ThreadX&#xff0c;这是一款专为资源受限环境设计的实时操作系统。该操作系统在微控制器和小型处理器上表现出色&#xff0c;以极高的可靠性和精确的时间控制处理任务而闻名。 ThreadX曾是英特尔芯片管理引擎的引擎&#xff0c;并且是控制Raspber…

运行第一个php及html程序

运行第一个php程序 打开vscode&#xff0c;打开文件夹&#xff0c;找到wampserver的安装目录中的www文件夹新建文件。 html文件直接复制路径到浏览器即可运行 php文件复制路径到浏览器后更改www及之前的路径为localhost