Kendo UI for Angular Chart获取选择？

问题描述

我正在将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)，但是我一无所获（现在事件处理程序只是将参数记录到控制台，而我一无所获）。 / p>

我还尝试使用类别轴[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
    };
  });

那么您如何获得选择？理想情况下，我不想使用选择范围滑块，但如果我想可以的话，可以使它起作用。我真的很想让用户点击一个标记并获得选择...

解决方法

好吧，在与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...
  }

唯一不幸的是，当前无法更改该点的标记以使其显示在图表本身中。我提出要在将来添加它的请求，但现在不存在。在我看来，Bummer并非交易杀手。感谢Telerik对信息的支持。