如何使用 timevis 更改时间线可视化中点的颜色？答案

【问题标题】：How do I change the color of the points in the timeline visualization using timevis?如何使用 timevis 更改时间线可视化中点的颜色？
【发布时间】：2019-11-25 22:29:14
【问题描述】：

我正在尝试生成单个时间线的简明视图，以便将其中的许多内容放在一个页面上。为了最大化没有标签的内容交付（允许推送更多点），我想在点上使用颜色编码来指示事件类型。我将样式列添加到我的数据框中，但它影响的只是标签。如何影响点本身的颜色

我调查了生成的 HTML，发现样式被附加到包含点和文本的元素的定义中，但似乎文本有它自己的样式：

<div class="vis-item vis-point vis-readonly" style="border-color: red; color: red; left: 343.741px; top: 5px;">
    <div style="margin-left: 16px;" class="vis-item-content">point1</div>
    <div style="top: 11px; left: 4px;" class="vis-item vis-dot vis-readonly"></div>
</div>

要重现的代码：

data = data.frame (
    content = c ("point1", "point2", "point3"),
    start   = c ("2010-03-28", "2012-01-17", "2013-12-15"),
    end     = c ("2010-03-28", "2012-01-17", "2013-12-15"),
    type    = c ("point", "point", "point"),
    style   = c ("border-color: red; color: red;", "border-color: blue; color: blue", "border-color: red; color: red;"))

ui <- fluidPage(
    timevisOutput("timeline")
)

server <- function (input, output, session) {
    output$timeline <- renderTimevis ({
            timevis (data = data, options = list(stack = FALSE))
    })
}

shinyApp(ui = ui, server = server)

如何影响每个点的颜色？

【问题讨论】：

标签： r vis.js-timeline

【解决方案1】：

让这个工作。样式段仅影响文本，但如果您添加一个 className 列，您可以定义一个样式，然后您可以添加一个实际控制该点的 CSS。请参阅下面的工作示例：

Example <- function ()
{
    data = data.frame (
            content     = c ("point1", "point2", "point3"),
            start       = c ("2010-03-28", "2012-01-17", "2013-12-15"),
            end         = c ("2010-03-28", "2012-01-17", "2013-12-15"),
            type        = c ("point", "point", "point"),
            style       = c ("color: red;", "color: blue;", "color: red;"),
            className   = c ("red_point", "blue_point", "red_point"))

    ui <- fluidPage(
        title = "Rami is testing styles",
        tags$head(
            tags$style(HTML("
                        .red_point  { border-color: red;    }
                        .blue_point { border-color: blue;   }
                        "))),
        timevisOutput("timeline")
    )

    server <- function (input, output, session) {
        output$timeline <- renderTimevis ({
            timevis (data = data, options = list(stack = FALSE))
        })
    }
    shinyApp(ui = ui, server = server)
}

【讨论】：