Angular Kendo环形图点击传值并跳转指定URL的实现求助

我完全懂Telerik官网文档有时候确实让人头疼，找个功能要点半天，直接给你搞定这个点击跳转的需求！

核心思路就是给环形图的每个扇区绑定点击事件，拿到对应数据项里的foovalue，再拼接URL跳转。下面分不同场景给你代码示例：

原生JS版本 #

假设你的HTML结构是这样的：

<div id="donutChart"></div>

对应的初始化代码，重点是添加seriesClick事件监听：

$("#donutChart").kendoChart({
  // 你的数据源配置，替换成你实际的数据
  dataSource: {
    data: [
      { category: "产品A", value: 40, foovalue: "product-a" },
      { category: "产品B", value: 35, foovalue: "product-b" },
      { category: "产品C", value: 25, foovalue: "product-c" }
    ]
  },
  series: [{
    type: "donut", // 指定为环形图类型
    field: "value", // 对应数据里的数值字段
    categoryField: "category" // 分类字段
  }],
  // 关键：绑定扇区点击事件
  seriesClick: function(e) {
    // 从点击的数据项中取出foovalue
    const targetValue = e.dataItem.foovalue;
    // 跳转到目标URL，记得替换成你实际的字段名如果不一样
    window.location.href = `www.foo.com/${targetValue}`;
  }
});

框架版本（以Angular为例） #

如果用的是Angular版Kendo UI，写法类似，只是事件绑定方式不同：

HTML模板：

<kendo-chart (seriesClick)="handleDonutClick($event)">
  <kendo-chart-series>
    <kendo-chart-series-item
      type="donut"
      [data]="chartData"
      field="value"
      categoryField="category"
    >
    </kendo-chart-series-item>
  </kendo-chart-series>
</kendo-chart>

组件TS代码：

import { Component } from '@angular/core';

@Component({
  selector: 'app-donut-chart',
  templateUrl: './donut-chart.component.html'
})
export class DonutChartComponent {
  // 你的图表数据，替换成实际数据
  chartData = [
    { category: "产品A", value: 40, foovalue: "product-a" },
    { category: "产品B", value: 35, foovalue: "product-b" },
    { category: "产品C", value: 25, foovalue: "product-c" }
  ];

  handleDonutClick(e: any) {
    const targetValue = e.dataItem.foovalue;
    window.location.href = `www.foo.com/${targetValue}`;
  }
}

注意事项 #

• 确保你的数据源里确实有foovalue字段，如果字段名不同，记得把代码里的foovalue替换成你实际的字段名称。
• 如果需要在新标签页打开链接，可以把window.location.href换成window.open(www.foo.com/${targetValue}, '_blank')。

内容的提问来源于stack exchange，提问作者Alex D