LLM 绘图简介——使用多模态 AI 创建软件架构图并通过粘贴截图进行迭代 译自 How To Create Software Diagrams With ChatGPT and Claude，作者...这时，我想起了过去使用过的一些格式（不是很广泛）：Mermaid 和 Graphviz。 第三次尝试：Mermaid Live 我要求 Whimsical GPT 使用这两种格式中的一种来表示该图表。...Claude 提供了一些想法：使用“Note over”声明在图表上放置注释，或使用“自消息传递”（来自同一参与者的消息）。我说：“让我们两种方法都试试”。...通过应用使用大型语言模型的最佳实践中的规则 3 和 4（“招募一个助手团队”、“请求合唱式解释”），我得到了我想要的图表。更重要的是，我比以往更有效地学习了支持工具和技术。...最后，这段经历放大了之前关于 ChatGPT 和 Claude 可以在你的屏幕上看到什么的片段。当我们迭代这些图表时，我不必用文字解释每个版本的进展情况。
那么平面图形或者自定义的图表怎么绘制更简单呢？echart比较容易上手，但是项目中有些特殊功能想自定义，最后还是选择了d3.js，虽然上手稍微难点。话不多说，记录分享一下使用和调用流程。...# 一：D3.js 简介D3.js 是一个用于创建数据驱动的文档的 JavaScript 库。它提供了一组易于使用的 API，可以帮助开发者快速创建各种类型的图表和可视化效果。...D3.js 的主要特点是使用数据驱动的文档，这意味着您可以使用任何格式的数据来创建可视化效果，包括 CSV、JSON、XML 等，你可以通过自定义 HTML、CSS 和 JavaScript 来实现复杂的图形和交互效果...如果需要更多的定制性和灵活性，可以选择 D3.js；如果需要快速实现美观、交互式的图表，可以选择 ECharts# 二：安装 D3.js要在项目中安装 D3.js，可以使用 npm 或直接从官网下载``...`javascriptnpm install d3或者直接引用：https://d3js.org/d3.v7.min.js```# 三：创建基本图表1.创建 HTML 文件并引入 D3.js```javascript
在数据驱动的世界中，数据可视化是理解和传达数据信息的重要手段。D3.js是一个强大的JavaScript库，它允许开发者将数据转换为可交互的图形和图表。...SVG 和 CanvasD3.js 可以在 SVG 和 Canvas 上绘制图形，这使得它在不同的使用场景中非常灵活。...// 使用 Mustache 模板和 D3.js 生成图表var template = d3.template().html("{{name}}");d3.select("body...D3.js是一个功能强大的JavaScript库，它为开发者提供了丰富的工具来创建交互式和动态的数据可视化。...通过学习D3.js，您可以轻松地将数据转换为引人入胜的图形和图表，从而更好地理解和传达数据信息。无论是数据分析师还是前端开发者，D3.js都是一个值得掌握的工具。
D3.js 图表使用HTML+SVG+CSS渲染。D3.js不支持旧版本的浏览器，如IE8，为了跨浏览器适应，你可以使用 aight插件。 回到顶部 Google Charts ?...这里是一些使用Google Charts生成的图表的例子。 回到顶部 ChartJS ? ChartJS 为图表提供了漂亮的平面设计风格。它通过HTML5的canvas属性渲染。...它建立在D3.js和AngularJS的基础上。 n3-charts是一些利用n3-charts创建的图表列表。 回到顶部 Ember Charts ?...Ember Charts 是另一个使用D3.js和Ember.js建立的开源图表库。它提供了非常容易定制的条形图、饼图、散点图等。通过SVG渲染。 回到顶部 Smoothie Charts ?...跟其他大部分图表库不同，它同时支持JSON和XML格式的数据，并且可以导出下面三种格式的数据：PNG、JPG、PDF。 兼容IE6。个人用户和商业用户都可以免费使用有水印的版本。
一、Canvas 介绍 ❝Canvas 是一个画布容器，通过 JavaScript 来绘制 2D 图形（3D 也可以，使用 three.js）。...如果我们想设置画布宽高需要使用： canvas width="500" height="400">canvas> 也可以使用脚本控制宽高。...此次的插件开发采用 Webpack 管理，代码拆分为不同的模块，添加和修改功能能够快速追踪定位。此次图表功能包含折线图、柱状图、扇形图、圆环图、雷达图、圆环进度比图。 ? ?...基础运行设施配置好后，再拆分看功能，这次分为各个图表，耦合性几乎为 0，我们可以分别创建单独的开发文件，如果全挂载到 prototype 下文件就太长太长了，不是因为 Canvas 的特殊性才这样，其他插件亦是...坐标轴 要确定坐标轴的起始坐标点，x 轴开始点 ( 设置的间距 , Canvas 高度 - 间距 ) 和结束点 ( 宽度 - 间距 , 高度 - 间距 )，y 轴开始点 ( 间距 , 间距 ) 和结束点
例如，给定一个包含数值数据的数组，D3.js可以根据这些数据的大小自动创建相应数量和高度的柱子来组成柱状图。...代码示例：使用D3.js创建简单柱状图假设我们有以下数据：const data = [15, 30, 45, 20, 50]; 。以下是使用D3.js创建柱状图的基本步骤和代码：使用scaleBand创建了x轴的比例尺，用于确定柱子的位置和宽度；使用scaleLinear创建了y轴的比例尺，用于确定柱子的高度。接着创建了坐标轴，并将其添加到SVG容器中。...// 这里进行图表更新操作 });}合理使用比例尺和坐标轴选择合适的比例尺和坐标轴类型，避免数据溢出或显示不完整的情况。...通过选择合适的工具和框架，如D3.js和Chart.js，可以快速创建各种类型的柱状图。在开发过程中，添加交互性和实现动态数据更新能够提升用户体验，而性能优化则确保了图表在处理大量数据时能够高效运行。
除了一些在线课程以外，你可以通过各种例子来学习使用这个库。等你照着文档动手一遍以后就有能力创建自己的图表了。...同时它也在 GitHub 上开源。 适合人群：需要有着活跃支持的专为绘制海量数据集设计的工具的开发者。 11. Vega ? Vega 是一个基于 d3.js 的用于创建、分享和保存可视化图标的库。...因为使用 Vega 不需要写任何代码（只要会编辑 JSON 文件即可），它是一个很好的 d3 替代品，能在降低使用复杂度的同时保留 d3 的特性。...NVD3 最后介绍的工具也是基于 d3.js 的。作为绘图界的佼佼者，NVD3 是由一系列部件组成的，允许开发者创建可重用的图标。你可以在它的网站上找到许多 demo 和对应的代码。...你可以看到，NVD3 的审美风格要比 d3.js 更为精致一点。 ? 它支持 11 种图表类型，包括区域图、线图、柱状图、气泡图、饼状图和散点图。
2012年度最佳 Web 前端开发工具和框架 D3.js ?...你可以使用它用一个数组创建基本的 HMTL 表格，或是利用它的流体过度和交互，用相似的数据创建惊人的 SVG 条形图。 ChartJS ?...Chart.js 是一个令人印象深刻的 JavaScript 图表库，建立在 HTML5 Canvas 基础上。目前，它支持6种图表类型（折线图，条形图，雷达图，饼图，柱状图和极地区域区）。...Ember Charts 是一个基于 Ember.js 和 D3.js 的图表库。它包括时间序列、柱状图、饼图、点图，很容易扩展和修改。...，同时支持任意维度的堆积和多图表混合展现。
与许多其他 JavaScript 库不同，D3 不附带任何开箱即用的预构建图表。但是可以查看使用 D3.js 构建的图表列表 作为入门教程，D3.js 支持多种图表类型。...它使用 HTML5 Canvas 元素进行渲染并支持所有现代浏览器 (IE11+)。ChartJS 图表默认是响应式的，它们在手机和平板电脑上运行良好，开箱即用。...Chartist.js Chartist.js 提供的响应式图表也很漂亮，同时也提供了很酷炫的动画。它使用 SVG 来呈现图表，可以通过 CSS3 媒体查询和 Sass 进行控制和定制。...Plotly.js 是建立在 D3.js 和 stack.gl 之上，支持 20 种图表类型，包括 SVG 地图、3D 图表和统计图。...Google Charts Google 图表工具功能强大、易于使用且是免费的。
SVG可以通过定义必要的线和形状来创建一个图形，也可以修改已有的位图，或者将这两种方式结合起来创建图形。...webGL是基于Canvas的绘图技术。要使用webGL进行3D渲染，首先得在页面中创建一个canvas元素，通过这个canvas元素来初始化WebGL上下文。...同时，Echarts的学习和使用也相对容易，通过几个简单的option配置项就可以很快地绘制出一个图表出来。...AntV 目前覆盖了统计图表、移动端图表、图可视化、地理可视化、2D 绘图引擎和智能可视化等多个领域，主要包含 G2栈、F2栈、G6栈、X6栈、L7栈、AVA 以及一套完整的图表使用和设计规范。...准确来说，D3.js实际是一个JavaScript函数库，不是图表库，比较适合于做数据可视化。
二、公共属性一个组件肯定会有一些公共的属性作为动态参数，便于组件之间的信息传递，我们分别讲解一下五个公共属性的作用：画布的宽度（cWidth）和高度（cHeight），这个是最基本的。...图表数据（data）。用来存储图表内容的数组，其中 name 与 value 是必传的。...: string]: any;}// 图表的特征接口interface interface_option { cWidth?...而 canvas 绘画基本都是通过坐标来定位的，Y 轴整体的四个部分的起点与结束坐标都互相有关系，甚至需要把内部间距、分割间距、y 轴线高度、文本最大的宽度四个属性计算在内。...以下就是计算获取最大文本宽度的代码，部分逻辑我也会写在代码上：build() { Canvas(this.context) .width(this.options.cWidth)
您的图表将在HTML5的框架下使用强大的JavaScript库D3.js创建图表。你的图表是响应式的，并且可以和任何的屏幕尺寸及设备兼容。...毋容置疑D3.js是最好的数据可视化工具库。D3.js运行在JavaScript上，并使用HTML，CSS和SVG。D3.js是开源工具，使用数据驱动的方式创建漂亮的网页。D3.js可实现实时交互。...NVD3运行在d3.js之上, 它可建立可重用的图表组件。该项目的目标是保持所有的图表整洁和可定制性。NVD3是d3.js之上的简单的接口，保持了d3.js的所有强大功能。...它使用了Sass的个性化风格，它的SVG输出是响应式的。 22.n3-charts ? N3-charts是一种基于AngularJS框架的工具。它建立在D3.js之上，帮助您创建简单的互动图表。...Paper.js 是一个开源的向量图形脚本框架，基于HTML5 Canvas开发。提供清晰的场景图、DOM和大量强大的功能用来创建各种向量图和贝塞尔曲线。 43.Visulize Free ?
3、Echarts ECharts是一个纯JavaScript图表库，底层依赖于轻量级的Canvas类库ZRender，基于BSD开源协议，是一款非常优秀的可视化前端框架。...5、Plotly Plotly是一个知名的、功能强大的数据可视化框架，可以构建交互式图形和创建丰富多样的图表和地图。...Highcharts在现代浏览器中使用矢量图，在低版本的IE浏览器中使用VML来绘制图形，所以它可以在所有移动设备和电脑浏览器上使用。...开发者可以从各种图表模板中进行选择以创建交互式图表，之后只需要将简单的JavaScript嵌入到页面中就可以在网页上展示这些图表。...同时也支持GIS地图的应用，使用天地图、ArcGIS、百度地图平台，并可拓展。支持通过点选、框选方式实现地图上数据查询、统计、钻取、预警、渲染、统计图联动、信息提示等。
在 mounted 钩子中，使用 Chart.js 创建一个新的图表实例，并传入 canvas 上下文和配置选项。...都具有不同的特点和用法，根据自己的需求和喜好选择适合的库来实现统计图表功能。 在Vue中同时使用多个图表库 由于每个图表库具有自己的 API 和用法，它们之间可以独立使用而不会相互冲突。...在 Vue 项目中同时使用多个图表库的步骤如下： 安装所需的图表库：通过 npm 安装要使用的每个图表库。 在需要使用图表的组件中，按需引入所需的图表库：根据需要，在每个组件中独立引入所需的图表库。...4：D3.js： 定制化数据可视化：使用 SVG 和 Canvas 创建高度定制化的图表和可视化效果。 网络关系图：绘制网络关系、拓扑结构和节点链接图等复杂的图表。...动态和交互式图表：创建具有交互性和动态效果的图表，支持用户操作和数据更新。
项目中有一个水平分库读写数据的场景，采用了Spring支持的分库策略AbstractRoutingDataSource，数据源名称采用了ThreadLocal来...
介绍 D3.js是一个JavaScript库。它的全称是Data-Driven Documents（数据驱动文档），并且它被称为一个互动和动态的数据可视化库网络。...D3利用可缩放矢量图形或SVG格式，允许您渲染可放大或缩小的形状，线条和填充，而不会降低质量。本教程将指导您使用JavaScript D3库创建条形图。...第一步 - 创建文件和参考D3 让我们首先创建一个目录来保存我们所有的文件。您可以随意调用它，我们将其称为D3项目。创建后，进入目录。....js 我们将在本教程中使用d3.min.js文件，请在HTML文件中引用d3.js。...接下来我们将创建我们的JavaScript文件，我们将其命名barchart.js，我们将为此示例制作条形图。使用touch命令创建文件，暂时不编辑。
快速：使用Pandas进行基本绘图 漂亮：与Seaborn的高级绘图 很棒：使用plotly创建很棒的交互式图 Python绘图历史 大约两年前，开始更认真地学习Python。...熟悉的命令，模式和概念越多，那么所有事情就越有意义。 Matplotlib 使用Python进行绘图的情况恰恰相反。最初用Matplotlib创建的几乎每个图表都看起来像是八十年代逃脱的罪行。...更糟糕的是要创建这些可憎的东西，通常不得不在Stackoverflow上花费数小时。例如研究nitty-gritty命令以更改x-ticks的倾斜度或类似的愚蠢行为。甚至不要开始使用多张图表。...结果看起来令人印象深刻，并且以编程方式创建这些图表是一种奇妙的感觉。例如，一次生成50个针对不同变量的图表。但是，这只是很多工作，需要记住很多其他本来没用的命令。...只需要CSV文件，即可使用Python轻松创建。试试看！ 目前的工作流程 最终决定使用Pandas原生绘图进行快速检查，并使用Seaborn生成要在报表和演示文稿中使用的图表（在视觉上很重要）。
在本文中，我们将提供一个完整的指南，介绍如何使用 Matplotlib 创建基本的图表，包括折线图、散点图、柱状图和饼图。安装 Matplotlib首先，确保您已经安装了 Matplotlib。...，还可以直接使用数据集来创建图表。...基本图表类型：本文介绍了创建折线图、散点图、柱状图和饼图的基本方法，并提供了相应的代码示例。自定义图表样式：您可以通过指定颜色、线型、标记等参数来自定义图表的样式，使其更符合您的需求。...使用数据集创建图表：Matplotlib 不仅可以用于绘制手动输入的数据，还可以直接使用数据集来创建图表。绘制多系列数据：您可以在同一张图上绘制多个系列的数据，并使用图例来区分它们。...使用样式表：Matplotlib 提供了许多预定义的样式表，可以帮助您快速设置图表的样式，使其更具美感和可读性。
@RequestParam和@RequestBody这两个注解是可以同时使用的。 网上有很多博客说@RequestParam 和@RequestBody不能同时使用，这是错误的。...只不过，我们日常开发使用GET请求搭配@RequestParam，使用POST请求搭配@RequestBody就满足了需求，基本不怎么同时使用二者而已。...} 在postman发送如下post请求，返回正常： body中参数如下： 从结果来看，post请求URL带参数是没有问题的，所以@RequestParam和@...RequestBody是可以同时使用的【经测试，分别使用Postman 和 httpClient框架编程发送http请求，后端@RequestParam和@RequestBody都可以正常接收请求参数，...所以个人认为可能一些前端框架不支持或者没必要这么做，但是不能说@RequestParam和@RequestBody 不能同时使用】。
下面推荐30款可视化工具供大家选择和使用。 1.iCharts iCharts 提供了一个用于创建并呈现引人注目图表的托管解决方案。...8.Ember Charts Ember Charts 是个图表库，使用Ember.js和D3.js框架构建。它包括时间线、条形图、饼图和散点图，非常容易扩展和修改。...它是基于MongoDB、NodeJS和D3.js开发。用户可以使用它为内部仪表板构建实时可视化的仪表板指标。例如，你可以使用Cube去监控网站流量，统计每5分钟的请求数量等。 ?...23.Protvis Protovis是一个使用JavaScript Canvas元素实现的可视化组件。开发者可以利用简单的标记如线条和圆点+数据来绘制自定义图表。 ?...29.Paper.js Paper.js 是一个开源的向量图形脚本框架，基于HTML5 Canvas开发。提供清晰的场景图、DOM和大量强大的功能用来创建各种向量图和贝塞尔曲线。 ?
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
云直播
对象存储
腾讯会议
