剑道 UI 图表类别轴自定义视觉

Question

我正在尝试为 Kendo UI 图表的类别轴标签创建自定义视觉效果。视觉效果需要看起来像位于图表下方的表格。到目前为止，我已经能够绘制类似表格的视觉效果，但找不到任何文档来在表格内放置文本。如何在 Rect 中定位文本？

代码：

        $("#chart").kendoChart({
            categoryAxis: {
                categories: ["M1", "M2", "M3", "M4"],
                labels: {
                    visual: function (e) {
                        var draw = kendo.drawing;
                        var geom = kendo.geometry;
                        var Rect = geom.Rect;
                        var Path = draw.Path;
    
                        var rect = new Rect(e.rect.origin, [e.rect.size.width, 300]);
                        var pathRect = new Rect(e.rect.origin, [e.rect.size.width, 50]);
    
                        var pathA = Path.fromRect(pathRect);
                        var pathB = Path.fromRect(pathRect);
    
                        var layout = new kendo.drawing.Layout(rect, {
                            orientation: "vertical"
                        });
    
                        var p = new geom.Point(e.rect.origin.x, e.rect.origin.y);
                        var t1 = new kendo.drawing.Text(e.text, p);
                        var t2 = new kendo.drawing.Text("test1", p);
    
                        layout.append(pathA, pathB, t1, t2);
    
                        layout.reflow();
                        return layout;
                    }
                }
            },
            series: [{
                data: [1, 2, 3, 4]
            }]
        });

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css"/>
        <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.rtl.min.css"/>
        <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.silver.min.css"/>
        <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.mobile.all.min.css"/>
    
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
      
    <div id="chart"></div>
   

Answer 1

您正在将矩形和文本添加到 Layout 元素中，该元素旨在使其子元素流动并避免一个重叠。相反，使用 group 元素，然后相应地放置矩形和文本：

$("#chart").kendoChart({
  categoryAxis: {
    categories: ["M1", "M2", "M3", "M4"],
    labels: {
      visual: function (e) {
        var draw = kendo.drawing;
        var geom = kendo.geometry;
        var Rect = geom.Rect;
        var Path = draw.Path;


        var rect = new Rect([e.rect.origin.x, e.rect.origin.y ], [e.rect.size.width, 50]);
        var pathA = Path.fromRect(rect);

        var pathRect = new Rect([e.rect.origin.x, e.rect.origin.y + 50], [e.rect.size.width, 50]);
        var pathB = Path.fromRect(pathRect);

        var p1 = new geom.Point(e.rect.origin.x + 4, e.rect.origin.y + 4);
        var t1 = new draw.Text(e.text, p1);
        var p2 = new geom.Point(e.rect.origin.x + 4, e.rect.origin.y + 54);                        
        var t2 = new draw.Text("test1", p2);

        var group = new draw.Group();
        group.append(pathA,pathB, t1, t2); 

        return group;
      }
    }
  },
  series: [{
    data: [1, 2, 3, 4]
  }]
});

DEMO