時間軸JS動態標志顏色更改

Question

我在應用程序中使用時間軸JS根據日期顯示兩種類型的報告。 它工作正常，但是當報告數據的數量更多時，很難找到哪個報告屬於哪個類別。 所以我想在時間標記中使用不同的文本顏色來區分兩種類型。

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

但是我無法動態設置文本顏色。 我已經參考了時間軸JS文檔，發現可以通過使用此類.tl-timemarker來更改時間標記的顏色。 但是我不知道設置2種不同的顏色。 時間軸JS文件

JSFiddle鏈接

請在這里參考我的代碼：

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

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