使用Typora书写甘特图

已于 2022-03-27 21:32:32 修改
阅读量3k 收藏 3
点赞数 3
分类专栏： Windows 文章标签： 甘特图
于 2022-03-22 14:27:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43652666/article/details/123647682
版权

首先要勾选上偏好中设置的markdown markdown扩展语法中的图表

mermaid介绍

mermaid 一种类似markdown的简单脚本语言，通过javascript从文本生成图标。

甘特图语法

一个基本的甘特图由 标题、日期格式约定、分组及任务 三部分组成

表示当前使用的语言为mermaid
甘特图基本格式
title : 甘特图 图表名，

```mermaid
gantt  #图标类型图为甘特图
        dateFormat  YYYY-MM-DD   # 设置日期格式 Y年 M月 D日期
        title 这是一个示例甘特图   #甘特图标题 关键字为title
        section 现有任务   #项目关键字，
        已完成               :done,    des1, 2014-01-06,2014-01-08
        进行中               :active,  des2, 2014-01-09, 3d
        计划中               :         des3, after des2, 5d

``
关键字之间用,分隔，关键字需要属性时用空格分隔

甘特图的任务状态有三种

  • done 表示已经完成
  • active 正在进行中
  • crit 关键任务，表示为红色
  • 默认任务都为待完成状态(未开始)
Mon 06 Mon 13 已完成 进行中 计划中 现有任务 这是一个示例甘特图

Loading…

知本知至
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【mermaid】【typora】详解mermaid绘制甘特图
weixin_70677783的博客
04-11 463
mermaid-甘特图
Typora上使用Mermaid语法展示流程图、时序图、甘特图
08-26
Typora上使用Mermaid语法展示流程图、时序图、甘特图
vue2实现可拖拽甘特图（结合element-ui的gantt图）
11-07
接到公司需求，要做一个可拖拽的甘特图来实现排期需求，官方的插件要付费还没有中文的官方文档可以看，就去找了各种开源的demo来看，功能上都不是很齐全，于是总结了很多demo，合在一起组成了一版较为完整的满足需求的甘特图。 1.拖拽 拖拽功能是甘特图的主要功能，该demo实现了甘特图时间块上、下、左、右拖拽功能。 2.排序 拖拽后时间块进行排序，计算重叠区域大小确定插入位置。 3.时间选择 结合element-ui的日期时间选择器来确定时间轴。 4.搜索 搜索已存在的时间块，并定位到相应位置。 5.新建排期任务 使用element-ui的弹框以及表单 新建成功的排期列表添加到排期任务中。 6.右键菜单 右击时间块，可以进行查看、删除、修改等操作。 7.撤回 每删除或移动时间块后，增加一条操作记录，点击撤回可撤回当前操作。 8.批量操作 在批量操作后点击保存，才向后端存储数据。
十分钟学会画甘特图
零丁若叹
01-16 9579
甘特图是什么 甘特图用图示的方式表现项目的各项活动以及进展情况，它有两条轴，横轴代表时间，纵轴代表项目任务，横条代表活动的计划和实际完成情况，它可以很直观地展示出各项活动的进度。对于项目管理者来说，通过甘特图可以快速弄清楚项目已经完成了多少任务，还有多少任务待完成，方便把控项目总体进度。使用纯文字描述有时难以描述项目概况，甘特图提供了一种图示的方式，便于查看，便于理解，因而成为项目管理的有用工具。 画甘特图工具 我们使用typora这款软件绘制甘特图，这个软件在windows，mac和linux都可以安装，
Typora 甘特图
qq_43278973的博客
05-17 240
Typora 甘特图 --```mermaid %% 语法示例 gantt dateFormat YYYY-MM title XX项目进度甘特图 section XX数据提取 提取需求 :done,des1, 2021-12,2022-01 编写SQL以及数据核查 :done,des2, 2022-01,2022-04 数据推送
使用Typora画 流程图、时序图、顺序图、甘特图、等图详解
热门推荐
qq_36075612的博客
06-23 3万+
概述 Typora是一款轻便简洁的Markdown编辑器，支持即时渲染技术，这也是与其他Markdown编辑器最显著的区别。即时渲染使得你写Markdown就想是写Word文档一样流畅自如，不像其他编辑器的有编辑栏和显示栏。 Typora删除了预览窗口，以及所有其他不必要的干扰。取而代之的是实时预览。 Markdown的语法因不同的解析器或编辑器而异，Typora使用的是GitHub Flavored Markdown。 官网链接 有一位大佬汇总了学习教程：链接 B站介绍：链接 Typora内置了对
【Typora】利用markdown语法绘制甘特图
XYZ
10-10 5226
今天，笔者简要介绍一下如何在Typora中利用markdown语法绘制甘特图。 首先，输入以下markdown代码： gantt dateformat YYYY-MM-DD Title The expected refining schedule section DS1 Oil 3 (25,000): done, 0h, 100h Oil 4 (24,000): crit, 96h Oil 8 (...
Typora画流程图、时序图、顺序图、甘特图(四)
Android系统攻城狮
12-05 1937
Typora是一款轻便简洁的Markdown编辑器，支持即时渲染技术，这也是与其他Markdown编辑器最显著的区别。即时渲染使得你写Markdown就想是写Word文档一样流畅自如，不像其他编辑器的有编辑栏和显示栏。官网链接 有一位大佬汇总了学习教程：链接 B站介绍：链接Typora内置了对Mermaid的支持，才阔以画各种图。 Mermaid：链接 使用方法： 首先在 Typora 中，输入 ```mermaid 然后敲击回车，即可初始化一张空白图。 上面的三个```也就是esc健对应下面的健。 在空
Typora画各类流程图、甘特图、饼图等详细文档
遇见你是我最美丽的意外
09-09 7261
Draw Diagrams With Markdown August 15, 2016 by typora.io Typora supports some Markdown extensions for diagrams, once they are enabled from preference panel. When exporting as HTML, PDF, epub, docx, those rendered diagrams will also be included, but diagram
MZGantt甘特图插件使用实例
最新发布
03-13
MZGantt是一款原生js开发的甘特图插件。支持vue，ts，js等，支持流行的各种前端框架，可以快速引用到您的web程序或者移动应用中。 版本：2024.3.1 官网：mzgantt.tecjt.com
手把手教你使用WPS制作甘特图1
08-08
【甘特图】是一种常见的时间管理工具，常用于项目管理和工作计划展示，通过图表形式直观地显示任务计划、进度和实际执行情况。它通常由左侧的任务列表和右侧的图形表示两部分构成，便于查看和管理整体进度。在WPS中...
甘特图实现 HTML+CSS
07-22
左侧为任务列表，右侧是甘特图，可以修改任务列表，左右同步 是打包后的，请自行搭建静态服务器查看
甘特图，可以拖拽甘特图模块。
02-23
甘特图可以拖拽，有一个demo。
typora写任务进度甘特图
子豪的博客
02-22 557
typora就挺好的。
typora画流程图、时序图(顺序图)、甘特图
子木先生的博客
08-23 1790
1. 横向流程图 源码： ~~~mermaid graph LR A[方形] -->B(圆角) B --> C{条件a} C -->|a=1| D[结果1] C -->|a=2| E[结果2] F[横向流程图] ~~~ 效果如图： 2. 竖向流程图 源码： ~~~mermaid graph TD A[方形] -->B(圆角) B --> C{条件a} C -->|a=1| D[结果1] ...
Typora最详细教程
Dragon_1718的博客
08-03 1298
基于水木子的最齐全的TyPro使用教程：https://blog.csdn.net/qq_41261251/article/details/102817673 文章目录 文章目录一、Markdown与Typora介绍1.1 Markdown介绍1.2 Typora介绍与下载二、Markdown语法2.1 标题2.2 字体2.3 各种线2.4 列表2.5 区块2.6 代码2.7 链接2.8 图片2.9 表格三、Typora与数学公式3.1 如何插入数学公式3.2 上标下标3.3 根号3.4 上下水平线3.5
# Typora Markdown 常用语法（画图）
不积跬步，无以至千里；不积小流，无以成江海
10-14 2079
记笔记最好用的工具Typora、Markdown 语法常用 Markdown 标题 Markdown语法 语法意义 # 一级标题 一级标题 ## 二级标题 二级标题 ### 三级标题 三级标题 #### 四级标题 四级标题 ##### 五级标题 五级标题 ###### 六级标题 六级标题 展示效果如下： Markdown 段落 要创建段落，请使用空白行将一行或多行文本进行分隔。 Markdown语法 HTML Markdown是一种纯文本
甘特图绘制模板及使用说明
wzg2016的博客
02-17 423
gatt语法分为以下几个部分。
vmware此平台不支持虚拟化的 Intel VT-x/EP
知本知至的博客
06-07 1万+
仅仅是记录
vue 使用echarts 实现甘特图
08-15
你可以使用Vue和Echarts来实现甘特图。首先，在`<template>`标签中创建一个包含Echarts图表的`<div>`元素，设置其id属性为"myechart"，并指定其高度和宽度。然后，在`<script>`标签中使用`mounted`钩子函数来初始化图表，使用`this.$echarts.init`方法传入图表容器的id来获取图表实例，并使用`setOption`方法来配置图表的数据和样式。你可以使用`xAxis`和`yAxis`来定义图表的坐标轴，使用`series`来定义图表的数据系列，例如柱状图的数据。在`methods`中，你可以创建`drawEchart`方法来绘制图表。 下面是一个示例代码： ``` <template> <div class="about"> <h1>This is echarts page</h1> <div id="myechart" style="height:500px;width:1000px;"></div> </div> </template> <script> export default { name: 'MyEchart', mounted() { this.drawEchart() }, methods: { drawEchart() { let myechart = this.$echarts.init(document.getElementById("myechart")) myechart.setOption({ title: { text: "gant" }, xAxis: { type: 'value' }, yAxis: { type: 'category', data: ["pro1", "pro2", "pro3", "pro4", "pro5", "pro6"] }, series: [{ type: 'bar', data: [10, 20, 30, 46, 78, 22] }] }) } } } </script> ``` 如果你想在甘特图中添加更多的数据，可以在`series`中添加多个对象，每个对象表示一个数据系列。例如，你可以添加一个名为"data2"的数据系列，并在其中定义对应的数据。这样就可以实现一个具有多个数据系列的甘特图。 ``` { type: 'bar', name: 'data2', data: [20, 20, 30, 20, 10, 20] } ``` 以上是一个简单的示例，你可以根据需要修改和扩展代码。希望对你有帮助！<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [vue+echarts画甘特图](https://blog.csdn.net/feinifi/article/details/126687245)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *3* [Vue 中使用 Echarts 实现项目进度甘特图](https://blog.csdn.net/qq_51634332/article/details/120805451)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值