从美人鱼导出为图像（甘特图）答案

【问题标题】：Exporting as image from mermaid (Gantt)从美人鱼导出为图像（甘特图）
【发布时间】：2016-02-02 17:34:36
【问题描述】：

我在尝试将甘特图导出为 png 或任何其他图像格式时遇到问题。 RStudio 中的查看器向我展示了甘特图的渲染。它还为我提供了另存为图像的选项，但我发现放大时图像非常像素化。

这是我尝试过的，但运行后文件为空：

    library(DiagrammeR)
    m1<-mermaid("
      gantt
      dateFormat MM/DD/YY
      title Example Gantt

      section Example Section
      Process1 :done, task_1, 01/01/01, 01/05/01
      Process2 :done, task_2, 02/01/02, 02/05/02
      Process3 :done, task_3, 03/01/03, 03/05/03
    ")
    m1$x$config = list(ganttConfig = list(
      axisFormatter = list(list(
        "%y" 
        ,htmlwidgets::JS(
          'function(d){ return d.getDay() }' 
        )
      ))
    ))
    png("Example.png")
    m1
    dev.off()

【问题讨论】：

mermaid 不返回图像。它返回有关如何绘制图像的 html 指令。如果您想以更高（缩放）的分辨率保存，您应该先进行缩放，然后再保存。

标签： r image diagrammer mermaid

【解决方案1】：

这是从 R 控制台运行时执行 m1 对象创建的代码。我在 SO 查看窗口中没有看到图像，但很抱歉，因为我不是该设施的特别知识渊博的用户。您可以在浏览器中查看，这是 RSudio 提供的，它可以放大到浏览器限制，然后屏幕截图不会被像素化：

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.8/d3.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="lib/htmlwidgets-0.5/htmlwidgets.js"></script>
<script src="lib/d3-3.3.8/d3.min.js"></script>
<script src="lib/dagre-0.4.0/dagre-d3.min.js"></script>
<link href="lib/mermaid-0.3.0/dist/mermaid.css" rel="stylesheet" />
<script src="lib/mermaid-0.3.0/dist/mermaid.slim.min.js"></script>
<link href="lib/DiagrammeR-styles-0.2/styles.css" rel="stylesheet" />
<script src="lib/chromatography-0.1/chromatography.js"></script>
<script src="lib/DiagrammeR-binding-0.8.1/DiagrammeR.js"></script>

</head>
<body style="background-color:white;">
<div id="htmlwidget_container">
  <div id="htmlwidget-2084" style="width:960px;height:500px;" class="DiagrammeR"></div>
</div>
<script type="application/json" data-for="htmlwidget-2084">{"x":{"diagram":"\n      gantt\n      dateFormat MM/DD/YY\n      title Example Gantt\n\n      section Example Section\n      Process1 :done, task_1, 01/01/01, 01/05/01\n      Process2 :done, task_2, 02/01/02, 02/05/02\n      Process3 :done, task_3, 03/01/03, 03/05/03\n    ","config":{"ganttConfig":{"axisFormatter":[["%y","function(d){ return d.getDay() }"]]}}},"evals":["config.ganttConfig.axisFormatter.0.1"]}</script>
<script type="application/htmlwidget-sizing" data-for="htmlwidget-2084">{"viewer":{"width":450,"height":350,"padding":15,"fill":true},"browser":{"width":960,"height":500,"padding":40,"fill":false}}</script>
</body>
</html>

【讨论】：