Estoy usando vis-timeline para representar cien filas de datos. Cuando se carga el componente, quiero ver las filas comenzando desde el principio: 1, 2, 3, etc. En cambio, de forma predeterminada, vis-timeline comienza mostrando el final de la lista (... 97, 98, 99, 100), ¿de modo que tiene que desplazarse hacia arriba para llegar al principio?
Hay métodos como setWindow() para configurar el marco de tiempo horizontal, pero ¿qué pasa con la posición vertical? Probé el método HTML scroll() , pero parece que no hace nada.
Normalmente usaría la orientation: { item: 'top' } } en las opciones, pero hay un error que impide el desplazamiento en ese caso; debe establecerse en 'bottom' .
He pensado en inicializar el componente con la orientación hacia 'top' y luego, una vez que se muestra, establecerlo en 'bottom' para permitir el desplazamiento, pero eso parece bastante complicado.
¿Existe una solución más limpia?
Puede implementar una función de pedido personalizado para artículos (también grupos) utilizando la opción de configuración de order :
Proporcione una función de clasificación personalizada para ordenar los artículos. El orden de los elementos determina la forma en que se apilan. La orden de función se llama con dos argumentos que contienen los datos de dos elementos que se van a comparar.
ADVERTENCIA: Utilizar con precaución. Los pedidos personalizados no son adecuados para grandes cantidades de artículos. Al cargar, la línea de tiempo representará todos los elementos una vez para determinar su ancho y alto. Mantenga el número de elementos en esta configuración limitado a un máximo de unos pocos cientos de elementos.
Vea a continuación un ejemplo:
var items = new vis.DataSet(); for (let i=0; i<100; i++) { items.add({ id: i, content: 'item ' + i, start: new Date(2022, 4, 1), end: new Date(2022, 4, 14) }); } var container = document.getElementById('visualization1'); var options = { order: function (a, b) { return b.id - a.id; } } var timeline = new vis.Timeline(container); timeline.setOptions(options); timeline.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> <div id="visualization1"></div>