具有 Angular rowclick 事件的 AnyChart 8.1 未返回项目或期间信息

Question

我正在为我公司的甘特图项目创建 POC。我在 Angular 5 网络项目中使用来自 Anychart 8.1.0 版的资源甘特图。我已经设置了大部分图表，在互联网上查找不同的文档和建议，但我现在卡在了点击事件上。按照 Anychart 中的示例，我发现以下代码可以监听图表上的事件：

chart.listen("rowClick", function(event) {
  var msg = event['item'].get('name');
  if (event['period']) msg += '\nPeriod: ' + event['period']['id'];
  console.log(msg);
});

如果我们去 to the anychart playground，我们可以为上面提到的片段更改此代码：

chart.listen('rowSelect', function(e) {
  e.item.remove();
});

所以在这里我们看到事件获取项目和期间属性。但是当我在我的 POC 项目中执行此操作时，项目和期间属性丢失：

这是代码片段：

chart: anychart.charts.Gantt;

ngOnInit() {
  this.chart = anychart.ganttResource();
}

ngAfterViewInit() {
this.ganttSvc.getGanttData(this.tokenManager.getUserId()).subscribe((values: 
  GanttDataRow[]) => {
  // set data to grid
  const treedata = anychart.data.tree(values, 'as-table');
  this.chart.data(treedata);
  // add to container and draw
  this.chart.container(this.container.nativeElement).draw();
  // scale
  this.chart.zoomTo('day', 1, 'first-date');
  // eventlisteners
  this.chart.listen('rowSelect', function() {
    event.preventDefault();
    this.clickedDetail(event);
  });
});

clickedDetail(event) {
if (event['period']) {
  this.selectedGanttItem = event['period'];
  this.toggleSideBar();
}

}

对我做错了什么有什么想法吗？

Answer 1

不幸的是，index.d.ts 中存在与图表侦听器相关的错误。在当前版本的 index.d.ts 文件中，图表侦听器的回调函数不会将事件对象作为参数。这就是缺少 item 和 period 属性的原因。这个问题是已知的，我们的开发团队正在准备修复它，将在 8.2.0 版本发布时提供。当修复可用时，我们将通过此线程通知您。

Answer 2

我们的团队准备了 dev-preview 8.2.1 更新，您可以在您的项目中试用。此更新包括 index.d.ts 的许多错误修复。要获得此更新，请将“package.json”中的当前 AnyChart 依赖项替换为以下 "anychart"：“8.2.1-rc.0” 或者你可以通过 NPM 手动下载它： $ npm install anychart@8.2.1-rc.0

在此更新中，您可以访问侦听器中的 'event' 对象。

this.chart.listen('rowSelect', function(event) {
    event.preventDefault();
});

我们的团队很快将提供 public 8.2.1 更新版本。

Answer 3

请尝试下面的代码，这对 anychart@8.2.1-rc.0 完美适用：

chart: anychart.charts.Gantt = null;
  ngOnInit() {

    const rawData = [
      {
        'name': 'Activities',
        'actualStart': Date.UTC(2007, 0, 25),
        'actualEnd': Date.UTC(2007, 2, 14),
        'children': [
          {
            'name': 'Draft plan',
            'actualStart': Date.UTC(2007, 0, 25),
            'actualEnd': Date.UTC(2007, 1, 3)
          },
          {
            'name': 'Board meeting',
            'actualStart': Date.UTC(2007, 1, 4),
            'actualEnd': Date.UTC(2007, 1, 4)
          },
          {
            'name': 'Research option',
            'actualStart': Date.UTC(2007, 1, 4),
            'actualEnd': Date.UTC(2007, 1, 24)
          },
          {
            'name': 'Final plan',
            'actualStart': Date.UTC(2007, 1, 24),
            'actualEnd': Date.UTC(2007, 2, 14)
          }
        ]
      }];

    const treeData = anychart.data.tree(rawData, 'as-tree');    
    this.chart = anychart.ganttProject();
    this.chart.data(treeData);

    this.chart.listen('rowSelect', function (event) {
      console.log(event['item'].get('name'));
    });

  ngAfterViewInit() {
    this.chart.container(this.container.nativeElement);
    this.chart.draw();
  }

Answer 4

我的问题出在这部分：

this.chart.listen('rowSelect', function (event) {
      console.log(event['item'].get('name'));
    });

我有以下代码：

this.chart.listen('rowSelect', () => {
      this.clickedDetail(event);
    });

一旦我将其更改为跟随它就起作用了：

this.chart.listen('rowSelect', (event) => {
      this.clickedDetail(event);
    });

在我掌握 MouseClickEvent 本身而不是图表发出的事件之前。感谢您提供的示例，它帮助很大。

虽然只是一个小问题。我注意到您使用了 rowSelect，而我之前使用的是 rowClick。他们的行为有很大不同吗？

具有 Angular rowclick 事件的 AnyChart 8.1 未返回项目或期间信息

AnyChart 8.1 with Angular rowclick event not returning item or period information

events

anychart

angular