Kendo Canvas渲染图表标题/图例溢出隐藏问题求解决方案

因为Kendo图表是基于Canvas渲染的，CSS的word-wrap确实起不到作用，得用Kendo自身的配置或者API来针对性处理，这里有几个实用的解决方案：

• 利用Kendo Chart内置的文本换行与布局配置
  Kendo UI Chart提供了专门的配置项来处理文本换行和元素布局，完全适配Canvas渲染机制：

  • 对于标题：在title配置中开启自动换行，同时通过边距和位置调整避免重叠：

    $("#chart").kendoChart({
      title: {
        text: "这是一段很长很长的图表标题，在低分辨率设备上容易被隐藏或和图表内容重叠",
        wrap: true, // 开启标题文本自动换行
        margin: { bottom: 25 }, // 增加底部边距，和图表主体拉开距离
        position: "top"
      },
      // 其他图表配置...
    });
    

  • 对于图例：可以开启图例项的文本换行，调整位置、列数来适配空间：

    $("#chart").kendoChart({
      legend: {
        item: {
          textWrap: true // 开启图例文本自动换行
        },
        position: "bottom", // 将图例移至底部，避开标题和图表主体
        columns: 2, // 设置列数，让图例自动分栏显示
        orientation: "horizontal"
      },
      // 其他图表配置...
    });
    

• 动态调整图表容器与内边距
  针对不同分辨率，可以监听窗口大小变化事件，动态调整图表的内边距或容器尺寸，确保标题和图例有足够的显示空间：

  $(window).resize(function() {
    var chart = $("#chart").data("kendoChart");
    var windowWidth = $(window).width();
    // 根据窗口宽度适配图表内边距
    if (windowWidth < 768) {
      chart.options.chart.padding = { top: 70, bottom: 70, left: 25, right: 25 };
    } else {
      chart.options.chart.padding = { top: 35, bottom: 35, left: 15, right: 15 };
    }
    chart.refresh(); // 刷新图表应用新配置
  });
  

• 自定义绘制文本（进阶方案）
  如果内置配置不够灵活，可以用Kendo的绘图API（kendo.drawing）手动绘制标题或图例，完全控制文本的换行和位置：

  $("#chart").kendoChart({
    render: function(e) {
      var chart = e.sender;
      var surface = chart.surface;
      var titleText = "需要自定义换行逻辑的超长图表标题";
      var maxWidth = chart.element.width() - 50; // 计算允许的最大文本宽度
      // 创建支持自动换行的文本块
      var text = new kendo.drawing.Text(titleText, {
        wrap: true,
        width: maxWidth,
        fontSize: 16,
        fontWeight: "bold"
      });
      // 定位文本块到图表顶部合适位置
      var position = new kendo.geometry.Point(25, 15);
      surface.draw(text, position);
      // 隐藏默认标题避免重复显示
      chart.options.title.visible = false;
    },
    // 其他图表配置...
  });
  

这些方案都是针对Canvas渲染的特性设计的，能有效解决不同分辨率下标题和图例的重叠或隐藏问题。

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