【问题标题】:Change font and time aixis labels in DyagrammeR>mermaid>gantt chart在 DiagrammeR>mermaid>甘特图中更改字体和时间轴标签
【发布时间】:2019-04-25 18:49:03
【问题描述】:

我在 R 中使用 diagrammer::mermaid 制作了这个甘特图(下面的可重现代码):

很好,但我想:

  1. 增加字体大小(我想这会使每一行都变宽,使当前非常长的矩形更“方形”。我可以接受)
  2. 使 t-aixis 标签更加标准。有些人的几周,有些人的几个月似乎很奇怪。我希望能够以简洁的方式区分月份和年份)

如何实施这些更改?

我是一个 R 用户,对 node.js、css 等一无所知。我设法在互联网上找到了代码 sn-ps 来创建它,但对style_widget 或如何更改它一无所知.

devtools::install_github('rich-iannone/DiagrammeR')
library(DiagrammeR)
library(tidyverse) #just for the pipe operator

style_widget <- function(hw=NULL, style="", addl_selector="") {
  stopifnot(!is.null(hw), inherits(hw, "htmlwidget"))

  # use current id of htmlwidget if already specified
  elementId <- hw$elementId
  if(is.null(elementId)) {
    # borrow htmlwidgets unique id creator
    elementId <- sprintf(
      'htmlwidget-%s',
      htmlwidgets:::createWidgetId()
    )
    hw$elementId <- elementId
  }

  htmlwidgets::prependContent(
    hw,
    htmltools::tags$style(
      sprintf(
        "#%s %s {%s}",
        elementId,
        addl_selector,
        style
      )
    )
  )
} 


flx_BmP  <- mermaid("
                    gantt
                    dateFormat  YYYY-MM-DD

                    section Common
                    Application (1230 plants) :done, first_1,  2018-05-15, 2018-07-30
                    Elegible (1003)           :done, first_1,  2018-06-15, 45d
                    Plants accept (576)       :done, first_1,  2018-08-01, 2d
                    Q0 - Baseline (576)       :done, first_1,  2018-08-02, 15d
                    Lottery (576)            :done, first_1,  2018-09-10, 2d

                    section ITT (288)
                    Treated (223 77%)        :done, first_2,  2018-09-20, 2018-12-15
                    Q1                       :done, first_3,  2018-12-16, 2019-01-05
                    Q2                       :      first_3,  2019-06-01, 2019-06-15

                    section Control (288)
                    Q1                       :done, first_3,  2018-12-16, 2019-01-05
                    Q2                       :      first_3,  2019-06-01, 2019-06-15
                    Treated (263)            :      first_3,  2019-06-16, 2019-09-15
                    ") %>% 
  style_widget("display:none", "line.today")

flx_BmP

【问题讨论】:

    标签: gantt-chart diagrammer mermaid


    【解决方案1】:

    对于轴格式(问题 1.),也许你搜索这个:

    axisFormat %d/%m
    

    文档:https://mermaidjs.github.io/gantt.html

    例子:

    gantt
        title Gantt
        dateFormat  DD-MM-YYYY
        axisFormat %d/%m
    
        section One
        Task One            : 07-05-2019, 7d
        Task Two            : 09-05-2019, 7d
    

    我不知道字体大小。

    使用您的代码链接到演示:https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjo...

    【讨论】:

    • tks,但是当我添加 axisFormat %d/%m 时,图形消失了(输出为全白屏)。上面的示例应该是完全可重现的,您可以尝试在添加格式的情况下运行它吗?我发现这个answer 指向font-size:50px 可能的调整。当我添加这个时,(但不是axisformat)图表仍然计算,但字体大小没有改变。
    • 对不起,我不知道字体大小。在我的情况下,axisFormat 属性在 liveemo 编辑器中有效:我只是添加了一个链接。
    • @tks 无论如何。 liveemo 的一个问题,因为我可能会使用它:如何删除“今天”行? This issue 建议使用 .today { fill: none; stroke: red; stroke-width: 0px;}This question 建议使用 style_widget(m1, "display:none", "line.today") 转换 R 中的图形对象。如何在实时编辑器中更改它??
    猜你喜欢
    • 2022-06-30
    • 2021-06-28
    • 1970-01-01
    • 1970-01-01
    • 2018-07-20
    • 2015-03-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多