当前位置: 首页 > article >正文

dify打造数据可视化图表

一、概述

在日常工作和学习中,我们经常需要和数据打交道。无论是分析报告、项目展示,还是简单的数据洞察,一个清晰直观的图表,往往能胜过千言万语。

一款能让数据可视化变得超级简单的 MCP Server,由蚂蚁集团 AntV 团队开源的 mcp-server-chart

github地址:https://github.com/antvis/mcp-server-chart

目前已经支持超过 15 种我们常用的可视化图表类型,比如:

  • 折线图、柱状图、饼图、面积图、条形图
  • 直方图、散点图、矩阵树图、词云图、双轴图
  • 雷达图、思维导图、网络图、流程图、鱼骨图

可以说,它几乎能满足我们日常工作中绝大多数场景的可视化需求。 最棒的是,它会以图片链接的形式返回生成结果,方便你嵌入到任何需要的地方。

二、MCP工具初体验

docker运行

mcp-server-chart官方已经封装好了镜像,docker hub地址:https://hub.docker.com/r/acuvity/mcp-server-chart

目前最新版本是0.4.0,运行一下

docker run -d --name mcp-server-chart -it -p 8000:8000  acuvity/mcp-server-chart:0.4.0

mcp-server-chart支持3种调用方式,分别是STDIO,SSE,streamable Http

Cherry Studio调用

这里以Cherry Studio客户端,来演示一下如何使用

添加MCP服务器

名称:mcp-server-chart

类型:streamable Http

地址:http://10.44.32.14:8000/mcp

 添加完成后,查看工具列表

 能看到几十个工具方法,就说明运行正常。

新建一个默认会话,选择mcp服务器

 输入提示词:

根据诗人的名气以诗人的名字生成一个词云图,至少50位中国古代诗人,给出图片链接后再用Markdown语法直接展示。

效果如下:

 整个过程,大模型就像一位经验丰富的设计师,不仅理解了你的需求,还自动帮你准备好了绘制图表所需的各种参数(比如图片的宽度、高度、标题等),最后给出了图片链接。

注意,这个链接,公网是可以打开的

https://mdn.alipayobjects.com/one_clip/afts/img/EKJYTr0ONCAAAAAAVvAAAAgAoEACAQFr/original

三、Dify+可视化图表MCP

目前有很多文章,一般都是通过Dify 结合数据库和 ECharts插件,实现数据可视化的。

但是实现过程比较复杂,首先通过数据库查询原始数据,其次通过python代码转换成 ECharts能够理解的图表格式,最后调用ECharts插件实现图表展示。

整个过程需要不少经验和技巧,一不小心就容易出错。

但是!有了 mcp-server-chart 这个 MCP 工具,事情就变得简单多了。

场景演示:用户用自然语言提问,我们通过 Dify 工作流从数据库里查询数据,并生成图表。

示例数据

为了方便演示,我用MySQL 数据库搭建了一些示例数据

新建表boxoffice

CREATE TABLE `boxoffice` (`id` bigint NOT NULL,`years` varchar(64) COLLATE utf8mb4_unicode_ci DEFAULT NULL,`movie_name` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,`score` float DEFAULT NULL,`director` varchar(64) COLLATE utf8mb4_unicode_ci DEFAULT NULL,`box_office` float DEFAULT NULL,PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

插入数据

INSERT INTO boxoffice (id, years, movie_name, score, director, box_office) VALUES
(1, '2025', '哪吒之魔童闹海', 8.5, '饺子', 1467030),
(2, '2021', '长津湖', 7.6, '陈凯歌', 577524),
(3, '2017', '战狼2', 7.1, '吴京', 569456),
(4, '2021', '你好,李焕英', 8.1, '贾玲', 541372),
(5, '2019', '哪吒之魔童降世', 8.5, '饺子', 503557),
(6, '2019', '流浪地球', 7.9, '郭帆', 468814),
(7, '2023', '满江红', 7.8, '张艺谋', 454437),
(8, '2021', '唐人街探案3', 5.6, '陈思诚', 452392),
(9, '2019', '复仇者联盟4:终局之战', 8.5, '安东尼·罗素', 424889),
(10, '2022', '长津湖之水门桥', 7.2, '徐克', 406724),
(11, '2023', '流浪地球2', 8.2, '郭帆', 402869),
(12, '2023', '孤注一掷', 6.9, '申奥', 384848),
(13, '2018', '红海行动', 8.5, '林超贤', 365185),
(14, '2023', '消失的她', 6.8, '崔睿', 352396),
(15, '2025', '唐探1900', 6.6, '陈思诚', 348642),
(16, '2024', '热辣滚烫', 7.9, '贾玲', 346040),
(17, '2024', '飞驰人生2', 7.7, '韩寒', 339842),
(18, '2018', '唐人街探案2', 7.1, '陈思诚', 339769),
(19, '2016', '美人鱼', 6.8, '周星驰', 339211),
(20, '2024', '抓娃娃', 7.3, '闫非', 332751);

打开表,效果如下:

开始节点

新建一个空白应用

开始节点默认配置,接收用户问题。

需求提炼

分析用户问题,判断用户是否需要生成图表,提取出SQL查询的需求。

输出如下:

sql_requirement: [精炼后的数据查询需求]
need_chart: [是/否]
chart_type: [推荐的Echarts图表类型或“无”]

大模型选择DeepSeek-V3

注意:大模型必须选择DeepSeek-V3,选择其他模型可能会导致最后图表无法生成。

 提示词如下:

你是一名专业的数据需求提炼师。请仔细阅读用户的自然语言问题{{#context#}},只保留与数据查询直接相关的核心需求。自动忽略与数据查询无关的内容(如生成图表、导出Excel、制作报表等)。请判断用户是否需要用图表展示结果。如果需要,请根据问题内容推荐最合适的Echarts图表类型(如area、bar、column、dual-axes、fishbone-diagram、flow-diagram、histogram、line、mind-map、network-graph、pie、radar、scatter、treemap、word-cloud等);如果不需要图表,请填写“无”。请严格按照如下格式输出,不要有任何解释或多余内容:
sql_requirement: [精炼后的数据查询需求]
need_chart: [是/否]
chart_type: [推荐的Echarts图表类型或“无”]

参数提取器

把上一个节点的三个输出参数提取出来。

添加提取参数

 第一个参数,内容如下

sql_requirement
sql需求

其他参数依次类推

need_chart
是否需要图表
chart_type
图表类型

最后效果如下:

自然语言转SQL(ROOKIE_TEXT2DATA)

打开插件市场,搜索关键字ROOKIE_TEXT2DATA,安装插件

添加节点,注意选择rookie text2data

这个节点的核心功能就是把用户的自然语言转成SQL语句了。

输入为提取后的SQL语句需求,关联参数提取节点的sql_requirement。

数据库配置: 正确填写数据库类型、IP、端口、库名、用户名、密码。

大模型:我这里必须用DeepSeek-V3

注意:这里的查询语句,选择变量sql_requirement。输入/就有下拉框

 提示词如下:

表名:boxoffice
字段说明:
- id:id,int
- years:年份,int
- movie_name:电影名,string
- score:评分,float
- director:导演,string
- box_office:票房,int注意事项:
- 如有分组统计,请使用SUM、AVG等聚合函数,不要直接用原始字段。
- 所有非聚合字段必须出现在GROUP BY中。
- 只输出SQL语句,不要解释。示例查询:
1. 查询每个导演的总票房:SELECT director, SUM(box_office) FROM boxoffice GROUP BY director;
2. 查询每年票房最高的电影:SELECT years, movie_name, MAX(box_office) FROM boxoffice GROUP BY years;

数据库配置连接信息

注意返回格式,选择text

执行SQL

此节点负责连接数据库,并执行上一步生成的SQL语句。

输入变量:上一节点返回的SQL语句。

数据库配置: 正确填写数据库类型、IP、端口、库名、用户名、密码。

输出变量:返回数据格式为文本。

 注意返回格式,选择text

注意,这里的执行sql语句,选择变量 ROOKIE TEXT2DATA.text

条件分支

判断是否需要图表,给到不同的分支。

图文总结

如果需要生成图表,走这个节点。

Agent策略选择ReAct(Support MCP Tools)

MCP服务器配置如下,url换成你自己的

{"mcp-server-chart": {"url": "http://10.44.32.14:8000/sse"}
}

注意:这里必须是SSE模式,不能用streamable_http

为什么?因为插件Agent策略,不支持以streamable_http协议生成图表,但是SSE协议是支持的。

但是上面你明明用Cherry Studio客户端,可以生成图表了呀。

我们首先要理清一点,mcp-server-chart本身是支持以streamable_http协议生成图表

Cherry Studio是客户端,它更新快。那么插件Agent策略,它也是客户端,更新很慢。现在问题是插件目前不支持,怎么办?等插件更新就好了。

指令

注意选择ROOKIE EXCUTE SOL.text

查询

提示词如下:

根据给定的数据选择合适的工具生成相应的图表,图表类型参考 {{#1749119517859.chart_type#}}。如果有小数的话保留小数点后面2位就行。输出先用自然语言简要给出数据分析,给出图片链接地址,并展示图片,要求全部用中文回答。

注意:这里的提示词复制之后,需要手动替换一下里面的变量。 因为每一个人的变量id是不一样的。 我这里是1749119517859,你那里就不一样了。

手动替换好之后,效果如下:

文字总结

如果用户只是想查询数据,不需要图表,那么工作流就会走到这个相对简单的节点。它会根据数据库查询结果,用简洁的自然语言给出分析和意见。

 模型,必须是DeepSeek-V3

上下文,选择变量rookie excute_sql.text

提示词如下:

请根据用户问题和查询结果,用简洁的中文自然语言回答并给出分析意见。
用户问题:{{#1749119517859.sql_requirement#}}
查询结果:{{#context#}}

注意:这里的提示词复制之后,需要手动替换一下里面的变量。 因为每一个人的变量id是不一样的。 我这里是1749119517859,你那里就不一样了。

替换好之后,就是上面的效果了。

回复节点

直接引用图文总结或文字总结的输出就好了。

四、测试

比如问一下各导演的票房占比,可以看到给出了分析结果和图片链接地址。

各导演的票房占比是多少?

图片链接可以直接打开:https://mdn.alipayobjects.com/one_clip/afts/img/qUhrTLIUAWEAAAAASRAAAAgAoEACAQFr/original

在测试一下折线图。

请用图表展示历年票房变化

打开图表链接:https://mdn.alipayobjects.com/one_clip/afts/img/LX_NRqh9-FIAAAAARrAAAAgAoEACAQFr/original

 

五、AntV插件的使用

除了MCP工具,在插件市场搜索antv可以看到蚂蚁集团提供的这个可视化工具插件。

 和mcp server一样,也是支持了15种工具。

创建一个Agent

添加这些工具

 提示词如下:

根据用户提供的数据选择相应的工具生成可视化图表。
展示图片的时候先给出图片的链接地址,后直接展示图片。
回复全部使用中文回答。

最终效果如下:

注意确保有生成词云图

默认只能添加10个工具,如果需要添加更多数量,需要修改dify环境变量

MAX_TOOLS_NUM=20

重启dify所有组件,就可以添加20个工具了。

直接加满

我们就可以随便用自然语言让大模型给出相应的图表了。

我让它生成了一个《三体》小说的人物词云图。

生成一个三体小说主要人物的词云图。至少列举出30个主要人物来。

插件不支持插入图片,手动打开图片:https://mdn.alipayobjects.com/one_clip/afts/img/3-8JSqF4yhUAAAAASXAAAAgAoEACAQFr/original

当然了,你也可以在工作流中调用这些工具。

和其他的生成图表的插件类似,给出对应的数据。

不过,这个插件可以更方便的调整图表的大小。自定义图表的宽和高。

点击设置

 可以设置宽高

这些“底层轮子”的不断涌现,无疑是一件大好事。

它们让我们能够从繁琐的、重复性的底层技术实现中解放出来,更专注于业务逻辑本身,更聚焦于如何创造真正的价值。

本文参考链接:https://zhuanlan.zhihu.com/p/1911538446977176761

相关文章:

dify打造数据可视化图表

一、概述 在日常工作和学习中,我们经常需要和数据打交道。无论是分析报告、项目展示,还是简单的数据洞察,一个清晰直观的图表,往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server,由蚂蚁集团 AntV 团队…...

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型(LLM)的广泛应用,开发者常面临多个挑战: 各大模型(OpenAI、Claude、Gemini、Ollama)接口风格不统一;缺乏一个统一平台进行模型调用与测试;本地模型 Ollama 的集成与前…...

Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)

目录 一、👋🏻前言 二、😈sinx波动的基本原理 三、😈波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、🌊波动优化…...

企业如何增强终端安全?

在数字化转型加速的今天,企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机,到工厂里的物联网设备、智能传感器,这些终端构成了企业与外部世界连接的 “神经末梢”。然而,随着远程办公的常态化和设备接入的爆炸式…...

今日学习:Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...

Device Mapper 机制

Device Mapper 机制详解 Device Mapper(简称 DM)是 Linux 内核中的一套通用块设备映射框架,为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程,并配以详细的…...

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器(ADC),支持8kHz~96kHz采样率,集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器,适用于高保真音频采集场景。 2. 核心特性 高精度:24位分辨率&#xff0c…...

有限自动机到正规文法转换器v1.0

1 项目简介 这是一个功能强大的有限自动机(Finite Automaton, FA)到正规文法(Regular Grammar)转换器,它配备了一个直观且完整的图形用户界面,使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...

基于matlab策略迭代和值迭代法的动态规划

经典的基于策略迭代和值迭代法的动态规划matlab代码,实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...

稳定币的深度剖析与展望

一、引言 在当今数字化浪潮席卷全球的时代,加密货币作为一种新兴的金融现象,正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而,加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下,稳定…...

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇,相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程,其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线, n r n_r nr​ 根接收天线的 MIMO 系…...

Linux --进程控制

本文从以下五个方面来初步认识进程控制: 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程,创建出来的进程就是子进程,原来的进程为父进程。…...

python执行测试用例,allure报乱码且未成功生成报告

allure执行测试用例时显示乱码:‘allure’ �����ڲ����ⲿ���Ҳ���ǿ�&am…...

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域,向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能,能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作,并通过具体…...

html-<abbr> 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;使用DevEco Studio作为开发工具&#xff0c;采用Java语言实现&#xff0c;包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...

大语言模型(LLM)中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中,常常会遇到 跨域请求接口 的情况。为了解决这个问题,Vite 和 Webpack 都提供了 proxy 代理功能,用于将本地开发请求转发到后端服务器。 什么是代理(proxy)? 代理是在开发过程中,前端项目通过开发服务器,将指定的请求“转发”到真实的后端服务器,从而绕…...

零基础在实践中学习网络安全-皮卡丘靶场(第九期-Unsafe Fileupload模块)(yakit方式)

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中&#xff0c;新增了一个本地验证码接口 /code&#xff0c;使用函数式路由&#xff08;RouterFunction&#xff09;和 Hutool 的 Circle…...

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

ip子接口配置及删除

配置永久生效的子接口&#xff0c;2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式&#xff1a;dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一&#xff0c;腐蚀跟膨胀属于反向操作&#xff0c;膨胀是把图像图像变大&#xff0c;而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...

2023赣州旅游投资集团

单选题 1.“不登高山&#xff0c;不知天之高也&#xff1b;不临深溪&#xff0c;不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件&#xff0c;所以得把软件用docker打包起来&#xff0c;大部分功能都没问题&#xff0c;出了一个奇怪的事情。同样的代码&#xff0c;在本机上用vscode可以运行起来&#xff0c;但是打包之后在docker里出现了问题。使用的是dialog组件&#xff0c;…...

C# 求圆面积的程序(Program to find area of a circle)

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

laravel8+vue3.0+element-plus搭建方法

创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...

力扣-35.搜索插入位置

题目描述 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...

学校时钟系统,标准考场时钟系统,AI亮相2025高考,赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

如何在网页里填写 PDF 表格?

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...