Question

我有一个包含此对象的数组：

public _id: string;
public fecha: string;
public hi: Date;
public hf: Date;
public busId: string;
public servicio: string;
public initPlace: string;
public busIdLogico: string;

我需要根据用户选择的initPlace绘制时间轴。

这是我的HTML：

<div *ngFor="let initPlace of initPlaces">
  <button (click)="getTimeline(terminal.place)">{{terminal.place}}</button>
</div>
<div id="visualization"></div>

在initPlaces ...

中获得ngOnInit的位置

这是我的组成部分：

getTimeline(terminal: string) {
  console.log('click boton ' + terminal);
  const container = document.getElementById('visualization');
  this.timeline = new Timeline(container);
  const items = new DataSet([]);
  const groups = new DataSet([]);
  const despachos = this.despachos;
  const options = {
    'editable': {
      'add': false,
      'remove': false,
      'updateGroup': true,
      'updateTime': false,
      'overrideItems': true
    },
    'locale': 'en',
    'maxHeight': '400px',
    'minHeight': 0,
    'moveable': true,
    'orientation': 'bottom',
    'showCurrentTime': true,
    'width': '90%',
    'stack': false,
    'autoResize' : true,
    'tooltipOnItemUpdateTime': true
  };
  const aux = [];
  for ( let i = 0; i < despachos.length; i++) {
    const json = JSON.stringify(despachos[i].hi);
    const dateStr = JSON.parse(json);
    const date = new Date(dateStr);
    const momdate = tl.moment(date).add(3, 'h').toDate();
    let asignado = 'color: green';
    let clase = 'green';
    if (despachos[i].busId === '') {
      asignado = 'color: red';
      clase = 'red';
    }
    if (despachos[i].initPlace=== terminal) {
      const aux2 = {id: i , busIdLogico:  despachos[i].busIdLogico, className: clase, type: 'point',
      style: asignado , start: momdate,
      group: despachos[i].servicio, deposito: despachos[i].deposito,
      title: '<b>' + despachos[i].busId + '</b>', idobjeto: despachos[i]._id, bus: despachos[i].busId};
      items.add([aux2]);
    }
  }
  const groups1 = items.distinct('group');

  for ( let j = 0 ; j < groups1.length; j++) {
    groups.add({id: groups1[j], content: groups1[j], style: 'color: black; height: 40px;'});
  }
  this.timeline.redraw();
  this.timeline = new Timeline(container, items, groups, options);
}

在const despachos中获得ngOnInit的地方......

当我按下按钮时，它会依次绘制一个全新的时间轴......我需要删除时间轴并根据用户的选择显示新的时间轴。我已经尝试了timeline.destroy()和timeline.redraw() ..帮助！

Answer 1

我遇到了同样的问题，并在制作新的时间轴

之前清除了可视化div

document.getElementById('visualization').innerHTML = "";
var timeline = new vis.Timeline(container, items, groups, options);

更改js的项目和组

1 个答案: