Kendo UI for Angular 图表获取选择？

Question

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

这是我目前的代码：

    <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 对信息的支持。

Kendo UI for Angular 图表获取选择？

Kendo UI for Angular Chart Get Selection?

kendo-ui

kendo-chart

angular