Question

我有一个Kendo甜甜圈图表，我需要点击并重定向到www.foo.com/(foovalue），以获取甜甜圈上的每个值。 telerik网站上有可怕的文档，任何帮助都会很棒。

我的组件html看起来像

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

Answer 1

我将假设您的收藏（即＆＃34; topViolationsByProductsList＆＃34;）包含具有提供URL（即url）的属性的项目。例如：

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

在底层组件中，为此事件定义处理程序：

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

Angular Kendo Chart单击事件以传递值

1 个答案: