Javascript 在剑道图表条上方排列浮动div

我试图在剑道图的相应列上方排列一系列浮动的

div

元素，使其看起来像下面这样

我不确定我是否采取了正确的方法，但到目前为止我已经做到了这一点

剑道图是使用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();

这将为我提供条形图中条形图的

x

、

y

、

宽度

和

高度

坐标

我想我可以使用每个条的

x

坐标来设置浮动

div

元素的

left

属性，但它似乎不起作用。似乎有某种偏移阻止它正确排列

---

谁能给我一些建议吗？

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

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

---

注意：我使用查找添加的文本并将其居中。我将文本填充设置为一种独特的颜色，以便轻松选择和设置文本锚属性。

它当前看起来像什么？如果您想在图表中添加SVG元素，请观看JSFIDLE演示：@ezanker哇，这太棒了。这正是我想要实现的目标。请将此作为答案发布，我会给你满分！