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

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。