用于角度图表的 Kendo UI 获取选择？

Question

我正在将 Kendo 用于 Angular，但似乎无法进行选择。 我想要的似乎应该很简单。 我有一个由点填充的散点线图。 我希望用户能够单击单个点并让它调用具有该点数据的方法。 我最终要做的是在另一个窗格中显示有关该点的一些其他详细信息，但实际上我现在只需要连接该点...

这是我目前的代码：

    <kendo-chart [pannable]="{ lock: 'y' }" [zoomable]="{ mousewheel: { lock: 'y' } }"
             (select)="SelectEvent($event)"
             (selectStart)="SelectEvent($event)">
  <kendo-chart-title text="License Usage History"></kendo-chart-title>
  <kendo-chart-legend position="right" orientation="vertical"></kendo-chart-legend>
  <kendo-chart-category-axis>
    <kendo-chart-category-axis-item [select]="Selection"></kendo-chart-category-axis-item>
  </kendo-chart-category-axis>
  <kendo-chart-series>
    <kendo-chart-series-item *ngFor="let series of SeriesData"
                             width="{{series.LineWidth}}"
                             [color]="series.Color"
                             [opacity]="series.Opacity"
                             style="normal"
                             type="scatterLine" (selectstart)="SelectEvent('start')"
                             (select)="SelectEvent('test')"
                             [data]="series.DataPoints"
                             name="{{ series.Name }}"
                             [markers]="{ visible: series.ShowMarkers }">
      <kendo-chart-series-item-tooltip>
        <ng-template let-value="value">
          {{value.y}} - {{value.x | date:'medium'}}
        </ng-template>
      </kendo-chart-series-item-tooltip>
    </kendo-chart-series-item>
  </kendo-chart-series>
</kendo-chart>

我已经尝试了几件事。 首先，我尝试在几个地方订​​阅(select)和(selectstart) ，但我什么也没得到（现在事件处理程序只是将参数记录到控制台，我什么也没得到）。

我还尝试使用类别轴[select]属性，如上所示。 在 .ts 文件中，该属性定义如下：

  public Selection: any = {
    from: new Date(new Date().setDate(new Date().getDate() - 30)),
    to: new Date()
  };

这实际上在它最初加载并显示选择滑块时起作用。 但是，当我加载我的数据时，它消失了，我不再有可用的选择。 我什至尝试用这种方法重置它，但没有运气，它仍然消失了。 这是获取我的数据的代码：

this.sessionService.GetSessionHistoryForCustomer(customerId, codeOption.ReferencedObject, this.Start, this.End).subscribe(dps => {
    const series = this.CreateSeries(dps, codeOption.ReferencedObject);
    series.forEach(x => this.SeriesData.push(x));

    this.Selection ={
      from: this.Start,
      to: this.End
    };
  });

那么你到底是如何获得选择的呢？ 理想情况下，我不想使用选择范围滑块，但如果我想我可以做到这一点。 我真的很想让用户点击一个标记并获得那个选择......

Answer 1

好的，在与 Telerik 支持人员交谈后，这实际上是在图表本身的seriesClick事件中处理的。 此事件的参数（ SeriesClickEvent类型）有一个dataItem属性，它将成为您的背景数据项，您可以从那里对它执行所需的操作。

为了完整起见，这里是我更新的 html 的相关部分：

<kendo-chart [pannable]="{ lock: 'y' }"
             [zoomable]="{ mousewheel: { lock: 'y' } }"
             (seriesClick)="PointSelected($event)">
  ...the other stuff...
</kendo-chart>

和 .ts 函数：

  PointSelected(e: SeriesClickEvent) {
    const dataPoint = e.dataItem as LicenseUseDataPoint;
    ...Do stuff with the point...
  }

唯一不幸的部分是，目前无法更改该点的标记以使其在图表本身中显示选择。 我提出了一个要求，为将来添加它，但现在不存在。 在我的情况下，无赖但不是交易杀手。 感谢 Telerik 对信息的支持。