图表

快速入门

editor.commands.insertFromText({ text: 'Month | Sales\nJan | 2\nFeb | 3' })

insertFromText 以粘贴方式读取文本，因此这些行成为图表。这些行以 图表语法.

有关图表的更多信息

图表类型

图表将其类型存储为 spec.type。大多数类型都以相同的方式读取图表数据。一列是标签列，通常是第一列：其单元格命名行，例如 Jan 和 Feb。其他每一列数字都是一系列，绘制为一条线、一组条形图或一组点。

最后一列介绍了图表在 Word 文档 中的含义：可以在 Word、图像或 Word 表格中重新设置样式的原生 Word 图表。

• 并非每个渲染器都会绘制每种类型。不绘制类型的渲染器会将图表留给下一个绘制类型的渲染器，请参阅选择渲染器。
• 将关闭循环的 sankey 链接被删除。
• 您使用 chartTypes 选项注册的类型将被存储、提供给 AI 模型并由列出它的任何渲染器绘制。
• 该编辑器不知道的类型在文档中保持不变。

组合图表

组合图表将某些系列绘制为条形，将其他系列绘制为线条。您可以按列 ID 按系列选择此选项：

矩阵

matrix 是字网格，例如 RACI 矩阵。标签列保存任务，每一列都是一个角色，每个单元格保存一个字母。

Task   | Lead | Team | Board
Plan   | A    | R    | I
Build  | C    | R    |

每个不同的单元格文本从系列颜色中获取一种颜色。 R、A、C 和我按顺序排在第一位。 ECharts Renderer 绘制一个矩阵。矩阵不能写成 Mermaid。

图表的存储方式

图表的属性包含再次绘制图表所需的所有内容：

该文档从不存储绘制的图表、在屏幕上绘制的尺寸或其加载状态。您设置的大小存储在 spec.size 中。

在 HTML 中

图表是 <figure data-type="chart">。它的数据是 <table>，因此这些数字可以在 HTML 或 Markdown 导出中保留下来，并且屏幕阅读器可以读取它们。它的标题是 <figcaption>。图表规范和数据源以 JSON 形式存储在 <figure> 上的 data-tt-chart-* 属性中，请参阅数据属性。

命令

insertChart

在所选内容或 pos 处插入图表，然后选择它。

editor.commands.insertChart({
  type: 'bar',
  data: {
    columns: [
      { id: 'month', label: 'Month', role: 'label' },
      { id: 'revenue', label: 'Revenue', role: 'series' },
    ],
    rows: [
      ['Jan', 120],
      ['Feb', 150],
    ],
  },
})

替换选择处的空段落。选择图表后，新图表将跟随它。

insertChartFrom

插入以注册格式编写的图表。

editor.commands.insertChartFrom({
  format: 'chart-syntax',
  content: 'Month | Revenue\nJan | 120\nFeb | 150',
})

当无法读取内容时返回 false。

importMermaidChart

插入来自 Mermaid 图表源的图表。

editor.commands.importMermaidChart({ source: 'pie\n  "Dogs" : 386\n  "Cats" : 85' })

Mermaid 将大多数类型绘制为图表。这五种类型包含数字，因此它们成为带有可编辑数据的图表：

• 图表的标题来自 title，或者来自 sankey 和树形图的 frontmatter。
• Mermaid 如何为图表着色（classDef、showLegend、ticks、graticule）被省略。
• toMermaidSource 和 mermaid 格式将图表恢复为 Mermaid 源。他们写的都是同样的五种。
• Mermaid的饼图、雷达和树形图没有读取负号，因此它们无法显示低于零的值。当这样的图表写回 Mermaid 时，低于零的饼图切片或树形图节点将被忽略，并且低于零的雷达值将被写入零。

粘贴Mermaid图表源运行此命令，请参阅粘贴。

对于任何其他Mermaid 流程图，返回 false。

conversionCodeBlockToChart

将代码块替换为其 Mermaid 图表源 描述的图表。

if (editor.can().convertCodeBlockToChart()) editor.commands.convertCodeBlockToChart()

其规范中具有 code: true 的任何节点都算作代码块。代码块中的 Mod-Enter 也运行该命令，请参阅代码块中的 Mod-Enter。

对于保存其他任何内容的代码块，返回 false。

insertDiagramInput

在选择处打开一个空的 快速输入，就像键入 trigger 一样。

editor.chain().focus().insertDiagramInput({ type: 'pie' }).run()

当架构没有 diagramInput 节点时，返回 false。