角剑道图表单击事件以传递值 [英] Angular Kendo Chart click event to pass value

问题描述

我有一个Kendo甜甜圈图，需要单击它，然后将甜甜圈上的每个值重定向到www.foo.com/(foovalue). telerik网站上有可怕的文档，任何帮助都将是非常有用的.

I have a Kendo donut chart that I need clickable and redirect to www.foo.com/(foovalue) for each value on the donut. The telerik website has horrible documentation, any help would be great.

我的组件html看起来像

my component html looks like

       <kendo-chart style="height: 500px;">
          <kendo-chart-title text="Top Product Violations"></kendo-chart-title>
          <kendo-chart-series>
            <kendo-chart-series-item
              type="column" [data]="getTopProductViolations.topViolationsByProductsList"
              categoryField="name" field="count">
              <kendo-chart-series-item-labels
                color="#fff" background="none">
              </kendo-chart-series-item-labels>
            </kendo-chart-series-item>
          </kendo-chart-series>
          <kendo-chart-category-axis>
            <kendo-chart-category-axis-item
              [labels]="{ rotation: '-45' }">
            </kendo-chart-category-axis-item>
          </kendo-chart-category-axis>
          <kendo-chart-legend [visible]="false"></kendo-chart-legend>
        </kendo-chart>

推荐答案

我将假定您的集合(即"topViolationsByProductsList")包含具有提供URL属性(即url)的项目.例如:

I will assume your collection (i.e. "topViolationsByProductsList") contains items with a property that provides a URL (i.e. url). For example:

public products: any[] = [{
  name: 'Kendo UI', url: "https://www.telerik.com/kendo-ui"
}, {
  name: 'UI for ASP.NET Core', url: "https://www.telerik.com/aspnet-core-ui"
}];

为 seriesClick 定义绑定事件:

<kendo-chart (seriesClick)="onSeriesClick($event)">

在基础组件中，为此事件定义一个处理程序:

In the underlying component, define a handler for this event:

public onSeriesClick(e): void {
  // access e.dataItem.url of the bound item; use window.location or router from there
}

这篇关于角剑道图表单击事件以传递值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！