0
235
VistasLínea de tiempo de visjs: elementos en la misma línea cuando están en el mismo grupo
Tengo una instancia de línea de tiempo simple de visjs. ¿Es posible que los elementos relacionados con el mismo grupo se muestren en la misma línea?
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Estás buscando la opción de stack que:
Si es verdadero (predeterminado), los elementos se apilarán uno encima del otro de modo que no se superpongan.
Por lo tanto, debe establecerlo en false en las opciones de su línea de tiempo.
El siguiente ejemplo (extraído de aquí ) muestra lo que sucede cuando la stack es false o true . Notar que los elementos superpuestos se vuelven difíciles de manipular (por ejemplo , el elemento 3 está completamente oculto en el tercer grupo):
var groups = new vis.DataSet([ {id: 0, content: 'First', value: 1}, {id: 1, content: 'Third', value: 3}, {id: 2, content: 'Second', value: 2} ]); // create a dataset with items // note that months are zero-based in the JavaScript Date object, so month 3 is April var items = new vis.DataSet([ {id: 0, group: 0, content: 'item 0', start: new Date(2014, 3, 17), end: new Date(2014, 3, 21)}, {id: 1, group: 0, content: 'item 1', start: new Date(2014, 3, 19), end: new Date(2014, 3, 20)}, {id: 2, group: 1, content: 'item 2', start: new Date(2014, 3, 16), end: new Date(2014, 3, 24)}, {id: 3, group: 1, content: 'item 3', start: new Date(2014, 3, 23), end: new Date(2014, 3, 24)}, {id: 4, group: 1, content: 'item 4', start: new Date(2014, 3, 22), end: new Date(2014, 3, 26)}, {id: 5, group: 2, content: 'item 5', start: new Date(2014, 3, 24), end: new Date(2014, 3, 27)} ]); // create visualization var container1 = document.getElementById('visualization1'); var container2 = document.getElementById('visualization2'); var options1 = { // option groupOrder can be a property name or a sort function // the sort function must compare two groups and return a value // > 0 when a > b // < 0 when a < b // 0 when a == b groupOrder: function (a, b) { return a.value - b.value; }, editable: true, stack: false }; var options2 = Object.assign({}, options1); options2.stack = true; var timeline1 = new vis.Timeline(container1); timeline1.setOptions(options1); timeline1.setGroups(groups); timeline1.setItems(items); var timeline2 = new vis.Timeline(container2); timeline2.setOptions(options2); timeline2.setGroups(groups); timeline2.setItems(items); <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis-timeline-graph2d.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js" rel="script"></script> <p><pre>stack: false</pre> <div id="visualization1"></div> <p><pre>stack: true</pre> <div id="visualization2"></div>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta