Kendo UI Chart类别Axis Custom Visual

Question

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

中定位文本

代码：

＆＃13;

＆＃13;

ft = Font()
ft.underline = 'single'    # add single underline
ft.color = Color(rgb='000000FF')  # add blue color
cell.font = ft

＆＃13;

        $("#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]
            }]
        });

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

msdeploy -verb:sync -source:contentPath="${p:resource/work.dir}${p:component.name}\%BinariesMode%%DirectoryOffset%" -dest:contentPath=%1,ComputerName=localhost -enableLink:AppPoolExtension -enableRule:Donotdeleterule -skip:objectName=filePath,absolutePath="\\Web\.config$"

的 DEMO