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

Posted 2023-05-08

【中文标题】使用 vis.js 的时间轴组中所有项目的高度相同

【英文标题】：Same height for all items in a group in timeline with vis.js

【发布时间】：2019-05-05 22:18:11

【问题描述】：

我正在使用 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 属性，但项目的顶部属性是动态计算的，我没有找到可以处理所有内容的规则。

【参考方案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找到一个工作演示。