You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Kendo多系列甜甜圈图表:编程触发第二系列tooltip与高亮

解决方案:Kendo UI双系列甜甜圈图表编程高亮并显示Tooltip

要实现双系列甜甜圈图表中第二系列指定分区的高亮+tooltip显示,可通过以下步骤完成:

  1. 获取图表实例
    首先获取已初始化的Kendo Chart实例:

    var chart = $("#your-chart-id").data("kendoChart");
    
  2. 高亮目标数据点
    使用toggleHighlight方法强制高亮第二系列(Kendo系列索引从0开始,第二系列对应索引1)的指定点,这里以第0个数据点为例:

    // 高亮第二系列的第0个点
    chart.toggleHighlight(false, { 
        seriesIndex: 1, 
        pointIndex: 0 
    });
    

    注:toggleHighlight第一个参数为false时,会强制开启高亮(而非切换状态);若要取消高亮,可传入true或再次调用并切换参数。

  3. 显示对应Tooltip
    调用showTooltip方法,通过seriesIndex和pointIndex定位到目标点,直接触发tooltip显示:

    // 显示第二系列第0个点的tooltip
    chart.showTooltip({
        seriesIndex: 1,
        pointIndex: 0
    });
    

关键说明

  • 系列索引从0开始计数,需根据你的实际系列顺序调整seriesIndex值。
  • 确保图表配置中已启用tooltip(tooltip: { visible: true }),否则showTooltip方法不会生效。
  • 若需要自定义tooltip显示位置,可在showTooltip参数中添加模拟鼠标事件的坐标:
    chart.showTooltip({
        seriesIndex: 1,
        pointIndex: 0,
        event: { clientX: 500, clientY: 300 } // 自定义tooltip显示坐标
    });
    

内容的提问来源于stack exchange,提问作者Anna Kegley

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.20 11:32:10