Timeline JS动态标志颜色变化

Posted 2023-05-07

【中文标题】Timeline JS动态标志颜色变化

【英文标题】：Timeline JS dynamic flag color change

【发布时间】：2017-06-15 10:52:42

【问题描述】：

我在我的应用程序中使用时间轴 JS 来根据日期显示 2 种类型的报告。它工作正常，但是当报告数据的数量更多时，很难找到哪个报告属于哪个类别。所以我想在 timemarker 中使用不同的文本颜色来区分两种类型。

Type 1. #9467bd
Type 2. #8c651c

但我无法动态设置文本颜色。我参考了时间线 JS 文档，发现有一个选项可以通过使用此类名称 .tl-timemarker 来更改 timemarker - 颜色。但我不知道设置两种不同的颜色。Timeline JS Doc

JSFiddle Link

请参考我的代码：

HTML 代码：

<div id="my-timeline"></div>
<button id='myBtn'>start</button>

JS 代码：

$('#myBtn').click(function() 
         var data = 
        "timeline":
        
            "headline":"Test Company",
            "type":"default",
            "text":"Test Reports",
            "startDate":"2010",
            "date": [
                 
                     "startDate" : "2010,9,1",
                     "text":"Type 1",
                     "headline":"Test Header",
                     "asset":
                     
                         "media": "PDF link",
                         "credit": "View Doc",
                         "caption":"Caption text goes here"
                     
                 ,
                
                    "startDate":"2011,10,12",
                    "text":"Type 2",
                    "headline":"Test Header",
                    "asset":
                    
                        "media": "PDF link",
                        "credit": "View Doc",
                        "caption": ""
                    
                ,
          
                    "startDate":"2011,10,12",
                    "text":"Type 2",
                    "headline":"Test Header",
                    "asset":
                    
                        "media": "PDF link",
                        "credit": "View Doc",
                        "caption": ""
                    
                ,
          
                    "startDate":"2011,10,12",
                    "text":"Type 2",
                    "headline":"Test Header",
                    "asset":
                    
                        "media": "PDF link",
                        "credit": "View Doc",
                        "caption": ""
                    
                ,
          
                    "startDate":"2011,10,12",
                    "text":"Type 1",
                    "headline":"Test Header",
                    "asset":
                    
                        "media": "PDF link",
                        "credit": "View Doc",
                        "caption": ""
                    
                ,
          
                    "startDate":"2011,10,12",
                    "text":"Type 2",
                    "headline":"Test Header",
                    "asset":
                    
                        "media": "PDF link",
                        "credit": "View Doc",
                        "caption": ""
                    
                
            ]
        
    ;
         loadData(JSON.stringify(data));
    );


    function loadData(json)
        addCode('jsFile='+json);
        createStoryJS(
            type:       'timeline',
            width:      '800',
            height:     '600',
            source:     jsFile,
            embed_id:   'my-timeline'
        );
    


//addCode(code) will create a script element and add code to it
function addCode(code)
    var JS= document.createElement('script');
    JS.text= code;
    document.body.appendChild(JS);

【参考方案1】：

我不确定我是否完全理解你的任务，但让我试一试。我有一个项目，我需要在事件文本项中混合自定义样式。我确实对 .tl CSS 样式进行了一些自定义（重载），但主要是将 span 标签添加到 JSON 数据，然后通过 CSS 对其进行样式设置。 （见下面的例子）

如果您可以通过代码区分您的类型 1 和 2，则可以将其“模板化”，或者只是为 text 项目的 JSON 添加一个额外的属性。你可以添加任何你想要的属性，时间线代码并不关心。然后，您可以使用 Handlebars 之类的模板库将 span 标记添加到您的 JSON 数据中。

JSON

"text": 
        "headline": "<span class ='vTime'>00:14:54</span><br>
                    <span class ='cTime'>00:00:00</span>",
        "text": "<span class ='narrative'>Stops swimming.</span>"
    

CSS

.vTime 
    font-size: 40px;
    line-height: 48px;
    color: white;


.cTime 
    font-size: 40px;
    line-height: 48px;
    color: yellow;


.narrative 
    font-size: 26px;
    line-height: 30px;
    color: white;

【讨论】：

感谢您的回复。我已经尝试过这一行 "text":"类型 1" 。此处颜色仅应用于“滑块项”内的文本。但不适用于标志内容。你还有其他解决方法吗？ jsfiddle.net/Y5hBk/97

我不需要这样做——但我想你可以通过时间轴 DOM 并根据需要添加自定义类。我通过编写覆盖默认定义的定义来调整时间线类 - 你见过Using the TimelineJS CSS selectors