Kendo UI 折线图中实现误差线悬停显示与隐藏-js教程-PHP中文网

Kendo UI 折线图中实现误差线悬停显示与隐藏

本文介绍如何在 kendo ui line chart 中动态控制误差线（error bars）的显示逻辑：默认隐藏全部误差线，仅在鼠标悬停到对应数据点时实时绘制并显示该点的误差线，离开后自动清除，避免视觉重叠与性能干扰。

本文介绍如何在 kendo ui line chart 中动态控制误差线（error bars）的显示逻辑：默认隐藏全部误差线，仅在鼠标悬停到对应数据点时实时绘制并显示该点的误差线，离开后自动清除，避免视觉重叠与性能干扰。

Kendo UI 原生的 errorBars.visible 属性为全局配置，不支持按单个数据点动态切换；其 highlight 事件也无法直接触发误差线的条件渲染。因此，需采用手动绘图 + 事件驱动的方式实现精准控制——即禁用内置误差线（visible: false），转而在 seriesOver 和 seriesLeave 事件中，利用 Kendo Drawing API 动态绘制/销毁误差线图形。

✅ 实现步骤概览

禁用默认误差线：在 seriesDefaults.errorBars 中设置 visible: false；
监听悬停事件：使用 seriesOver 获取当前高亮的数据点、坐标及误差值；
坐标转换与绘图：调用 axis.slot(low, high) 将数据值转为像素坐标，再用 kendo.drawing.Path 绘制垂直线段与两端横杠（end caps）；
清理机制：通过唯一 opacity 值标记自定义图形，并在 seriesLeave 中延时移除，防止快速进出导致残留。

? 核心代码示例

$("#chart").kendoChart({
  // ... 其他配置保持不变
  seriesDefaults: {
    type: "line",
    errorLowField: "low",
    errorHighField: "high",
    errorBars: {
      visible: false, // ? 关键：禁用原生误差线
      endCaps: true,
      width: 10,
      color: "darkblue"
    }
  },
  series: [/* ... */],
  // ? 添加事件处理器
  seriesOver: function(e) {
    // 清除上一次绘制（防重复）
    clearTimeout(this._errorBarTimeout);
    $('[opacity="0.9999998"]').remove();

    // 仅对数据点（circle 元素）生效
    if (e.element.tagName === "circle") {
      const chart = e.sender;
      const xAxis = chart.getAxis("category"); // 或 value，依需求定
      const yAxis = chart.getAxis("value");
      const dataItem = e.dataItem;

      // 获取 X 坐标（数据点中心横坐标）
      const x = e.element.cx.baseVal.value;

      // 将 low/high 数据值转为 Y 轴像素范围
      const slot = yAxis.slot(dataItem.low, dataItem.high);

      // 定义统一标识用于清理
      const uniqueOpacity = 0.9999998;
      const strokeColor = "#535D5D";
      const strokeWidth = 2;

      // 主误差线（垂直线）
      const barPath = new kendo.drawing.Path({
        stroke: { color: strokeColor, width: strokeWidth }
      })
      .moveTo(x, slot.origin.y)
      .lineTo(x, slot.origin.y + slot.size.height)
      .opacity(uniqueOpacity);

      // 上端横杠（end cap）
      const capTop = new kendo.drawing.Path({
        stroke: { color: strokeColor, width: strokeWidth }
      })
      .moveTo(x - 4, slot.origin.y)
      .lineTo(x + 4, slot.origin.y)
      .opacity(uniqueOpacity);

      // 下端横杠（end cap）
      const capBottom = new kendo.drawing.Path({
        stroke: { color: strokeColor, width: strokeWidth }
      })
      .moveTo(x - 4, slot.origin.y + slot.size.height)
      .lineTo(x + 4, slot.origin.y + slot.size.height)
      .opacity(uniqueOpacity);

      // 渲染到图表画布
      chart.surface.draw(barPath);
      chart.surface.draw(capTop);
      chart.surface.draw(capBottom);
    }
  },
  seriesLeave: function(e) {
    // 延迟 5 秒清理，避免频繁进出闪烁
    this._errorBarTimeout = setTimeout(() => {
      $('[opacity="0.9999998"]').remove();
    }, 5000);
  }
});

⚠️ 注意事项与最佳实践

性能优化：$('[opacity="..."]') 是基于 DOM 的粗略选择器，适用于简单场景；如图表复杂或需更高健壮性，建议为每个自定义图形添加 data-role="error-bar" 属性并用 [data-role="error-bar"] 选择。
坐标系一致性：确保 yAxis.slot() 使用的字段（low/high）与 errorLowField/errorHighField 完全一致，否则坐标计算将偏移。
响应式兼容：e.element.cx.baseVal.value 依赖 SVG 元素，在缩放或重绘后可能失效；更稳妥方式是通过 e.visual 或 e.point.x（需启用 markers: { visible: true }）获取逻辑坐标，再经 xAxis.axisPoint() 转换。
移动端适配：seriesOver 在触摸设备上可能不触发，可补充 seriesClick 或结合 tooltip.visible: true 实现类悬停交互。