Question

我正在使用vis.js来显示包含连续非堆叠项目的时间轴。

某些项目的内容比其他项目长，我希望同一组中的所有项目都具有相同的高度。

内容是动态的，因此我无法在选项中提供固定的最小或最大高度。

var groups = new vis.DataSet([{id: 'first', content: 'group 1'}, {id: 'second', content: 'group 2'}]);

var items = new vis.DataSet({});
items.add([
        {id: 0, content: 'item 0', start: '2014-01-23T12:00:00', end: '2014-01-26T12:00:00',group:'first'},
        {id: 1, content: 'item 1 <br />long title', start: '2014-01-26T12:00:00', end: '2014-01-29T12:00:00',group:'first'},
        {id: 2, content: 'item 2', start: '2014-01-29T12:00:00', end: '2014-01-31T12:00:00',group:'first'},

        {id: 3, content: 'item 3<br/>Very long<br/>description', start: '2014-01-20T12:00:01', end: '2014-01-24T12:00:00',group:'second'},
        {id: 4, content: 'item 4', start: '2014-01-24T12:00:00', end: '2014-01-26T12:00:00',group:'second'},
        {id: 5, content: 'item 5<br/>Description', start: '2014-01-26T12:00:00', end: '2014-01-29T12:00:00', type: 'range', group:'second'},
        {id: 6, content: 'item 6<br/>Description', start: '2014-01-29T12:00:00', end: '2014-01-31T12:00:00', type: 'background', style:'background-color: yellow', group:'second'},

]);

var container = document.getElementById('visualization');

https://jsfiddle.net/jschmitz/13suvyp8/12/

“背景”类型接近我想要的类型，但该项目不再可点击。

我尝试调整CSS属性，但是该项目的top属性是动态计算的，并且没有找到可以处理所有内容的规则。

Answer 1

我认为您正在寻找style属性。您可以使用项目选项的style属性为单个项目定义CSS样式。

items = [{id: 4, content: 'item 4', start: '2014-01-24T12:00:00', end: '2014-01-26T12:00:00',group:'second', style:'height:100px'},]

可以找到有效的演示程序here。

时间轴中与vis.js相同的组中所有项目的高度

1 个答案: