在 Kendo 条图表柱上方浮动 div 排列

Question

我正在尝试在 kendo 图表中的相应列上方排列一系列浮动 div 元素，使其看起来类似于下面的

我不确定我是否采取了正确的方法，但这就是我到目前为止所得到的。

Kendo 图表是使用 SVG 呈现的，我可以使用 getBBox() 方法来获取条形图的边界框。

var kChartData = $("#myChart").data("kendoChart");
var columnBoundingBox = kChartData.element
    .find("g:first")
    .find("g:first")
    .children("g")
    .eq(3)
    .find("g:first")
    .children("g")[i]
    .getBBox();

这为我提供了条形图中 bar 的 x、y、width 和 height 坐标.

我想我可以使用每个条形图的 x 坐标来设置浮动 div 元素的 left 属性但它似乎不起作用.似乎有某种偏移阻止它正确排列。

谁能给我一些指点？

Answer 1

您可以将 SVG 元素添加到图表中。一种方法是使用系列的 visual property 来绘制额外的形状和条形：

$("#chart").kendoChart({
    theme: "flat",
    seriesDefaults: {
        type: "column",
        visual: function (e) {
            var origin = e.rect.origin;
            var center = e.rect.center();
            var bottomRight = e.rect.bottomRight();
            var topRight = e.rect.topRight();
            var topLeft = e.rect.topLeft();
            var c = e.options.color;  

            var path = new kendo.drawing.Path({
                fill: {color:  c,opacity: 1,},
                stroke: {color: c,opacity: 0.7,width: 2,}
            })
            .moveTo(origin.x, bottomRight.y)
            .lineTo(bottomRight.x, bottomRight.y)
            .lineTo(topRight.x, topRight.y)
            .lineTo(topLeft.x, topLeft.y)
            .close();

            if (e.value > 40) c = "rgb(124,200,124)";

            var path2 = new kendo.drawing.Path({
                fill: {color:  c,opacity: 1,},
                stroke: {color: c,opacity: 0.7,width: 2,}
            })
            .moveTo(origin.x, 18)
            .lineTo(bottomRight.x, 0)
            .lineTo(topRight.x, 18)
            .lineTo(topLeft.x, 0)
            .close();

            var position = new kendo.geometry.Point(center.x, 24);
            var text = new kendo.drawing.Text(e.value + "%", position, {
              fill: {color:  "rgba(0,0,0,0.999)",}
            });

            var group = new kendo.drawing.Group();
            group.append(path, path2);
            group.append(text);
            return group;
        }
    },
    series: [{
        name: "Total Visits",
        data: [10, 30, 20, 45, 60]
    }, ],
    panes: [{
        clip: false
    }],
    valueAxis: {
      min: 0,
      max: 100,
        line: {
            visible: false
        },
        majorGridLines: {
            visible: false
        },
    },
    categoryAxis: {
        categories: ["Jan", "Feb", "Mar", "Apr", "May"],
        majorGridLines: {
            visible: false
        },
        line: {
            visible: false
        }
    },
    tooltip: {
        visible: true
    },
    render: function(e){
      $('[fill="rgba(0,0,0,0.999)"]').attr("text-anchor", "middle");
    }
});

DEMO

注意：我正在使用 render event 查找添加的文本并将其居中。我将文本填充设置为一种独特的颜色，这样可以很容易地 select 并设置文本锚点属性。

在 Kendo 条图表柱上方浮动 div 排列

Line up floating div above Kendo Chart Bars

javascript

css

css-float

kendo-ui

DEMO