Кендо UI Chart Category Axis Custom Visual

Я пытаюсь создать настраиваемый визуальный элемент для метки оси категорий для диаграммы пользовательского интерфейса Kendo. Визуализация должна выглядеть как таблица, расположенная под диаграммой. До сих пор мне удавалось нарисовать визуальный элемент в виде таблицы, но я не могу найти никакой документации для размещения текста внутри таблицы. Как мне разместить текст внутри 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>


kendo-ui kendo-chart
person K.R.    schedule 10.03.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы добавляете прямоугольники и текст к элементу 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]
  }]
});

ДЕМО

person ezanker    schedule 10.03.2016
comment
Спасибо. Пропустил «групповую» часть. Теперь это имеет смысл. - person K.R.; 10.03.2016