Javascript Timeline JS动态标志颜色更改

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

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

但我无法动态设置文本颜色。我参考了timeline JS文档，发现有一个选项可以使用这个类名.tl timemarker更改timemarker-color。但我没有任何想法设置两种不同的颜色

请参考我的代码：

HTML代码：

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

$('#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);
}

---

我不确定我是否完全理解你的任务，但让我试一试。我有一个项目，需要在事件文本项中混合自定义样式。我确实对.tl CSS样式进行了一些定制（重载），但主要是向JSON数据添加

span

标记，然后通过CSS对其进行样式设置。（见下面的示例）

如果您可以通过代码区分类型1和类型2，或者只需为

文本

项的JSON添加一个额外的属性，就可以将其“模板化”。你可以添加任何你想要的属性，时间线代码不在乎。然后，您可以使用一些模板库，比如将

span

标记添加到JSON数据中

JSON

---

谢谢你的回复。我已经试过这行“文本”：“类型1”。此处颜色仅应用于“滑块项”中的文本。但不应用于标志内容。你还有其他的工作吗？我不需要这样做，但我想您可以遍历时间线DOM，并根据需要添加自定义类。我通过编写覆盖默认定义的定义来调整timeline类，您看到了吗

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

.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;
}