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

Question

I'm using Kendo for Angular and I can't seem to get the selection. What I want seems like it should be simple. I have a scatter line chart that is populated by points. I would like the user to be able to click on a single point and have it call a method with that point data. What I will end up doing is displaying some additional detail about that point in another pane but really I just need to connect the point right now...

Here is my code currently:

    <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>

I have tried a couple things. First I tried subscribing to (select) and (selectstart) in several places, but I don't ever get anything (right now that event handler is just logging the argument to the console and I never get anything).

I also tried to use the category axis [select] property as shown above. In the .ts file that property is defined like this:

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

This actually works when it initially loads and shows a selection slider. However when I load my data in it goes away and I no longer have selection available. I even tried resetting it in that method but no luck, it still disappears. Here is the code for getting my data:

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
    };
  });

So how in the world do you get the selection? Ideally I would like to NOT use the selection range sliders but I can make that work if I have to I guess. I really would just like to have the user click on a marker and get that selection...

Answer 1

Ok so after talking with Telerik support a bit, this is actually handled in the seriesClick event on the chart itself. The arguments for this event ( SeriesClickEvent type) have a dataItem property that will be your background data item and you can do what you need to with it from there.

For completeness here is the relevant portion of my updated html:

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

And the .ts function:

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

The only unfortunate part is that currently there is no way to change the marker for that point to make it show the selection in the chart itself. I put in a request to add that for the future but it's not there now. Bummer but not a deal killer in my case. Thanks Telerik support for the info.