Kendo UI图表中多次出现<g>标签transform属性错误导致PDF导出失败

我之前也碰到过类似的Kendo Chart NaN转换错误，折腾了好一阵才找到解决方向，分享几个排查思路给你，你可以逐一验证：

• 先排查数据源的有效性
  虽然Dojo里用相同数据源没问题，但项目中的数据源可能存在隐性的无效值——比如空字符串、undefined、带空格的数字字符串，甚至是被意外转换为字符串类型的数值。Kendo Chart在计算图表布局时，遇到这些非有效数值会直接生成NaN的transform矩阵。
  你可以先对数据源做一次清洗：

  // 示例：过滤并转换数据源中的数值字段
  const validData = rawData.filter(item => {
    const numValue = parseFloat(item.yourValueField);
    return !isNaN(numValue);
  }).map(item => ({
    ...item,
    yourValueField: parseFloat(item.yourValueField)
  }));
  

• 检查图表配置中的动态计算逻辑
  如果你的图表配置（比如坐标轴的min/max、系列的size属性等）用到了动态计算，比如基于数据源极值设置轴范围，当数据源异常时很容易算出NaN。记得给这些计算加上兜底默认值：

  yAxis: {
    min: Math.min(...validData.map(d => d.yourValueField)) || 0,
    max: Math.max(...validData.map(d => d.yourValueField)) || 100
  }
  

• 确认图表容器的尺寸是否稳定
  要是图表初始化时，容器是隐藏状态（比如在未激活的tab里）或者没有明确的宽高样式，Kendo Chart计算布局时会拿到NaN的尺寸，进而触发transform错误。
  解决方法很简单：给容器设置固定宽高，或者等容器显示后再初始化/刷新图表：

  .chart-wrapper {
    width: 800px;
    height: 400px;
  }
  

  或者在容器显示后调用：

  $("#yourChart").data("kendoChart").refresh();
  

• 对齐Kendo UI版本
  项目中使用的Kendo版本可能和Dojo编辑器里的版本不一致，某些旧版本存在这类NaN转换的已知bug。你可以对比Dojo里的版本号，把项目的Kendo包升级到相同版本，或者直接更新到最新稳定版试试。

• 修复PDF导出的异常
  这个错误会破坏图表的SVG结构，导致PDF导出失败。你可以在导出前强制刷新图表，并且禁用动画（动画未完成会让SVG处于不稳定状态）：

  $("#exportBtn").click(() => {
    const chart = $("#yourChart").data("kendoChart");
    // 先刷新确保图表状态正常
    chart.refresh();
    // 延迟一点等待渲染完成
    setTimeout(() => {
      kendo.drawing.drawDOM($("#yourChart"))
        .then(group => kendo.drawing.exportPDF(group, {
          paperSize: "A4",
          margin: { top: "1cm", bottom: "1cm" }
        }))
        .done(data => kendo.saveAs({
          dataURI: data,
          fileName: "chart-export.pdf"
        }));
    }, 300);
  });
  

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