Question

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

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

使用SVG呈现Kendo图表，我可以使用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，width和height坐标。

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

任何人都可以给我一些指示吗？

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 查找添加的文字并将其居中。我将文本填充设置为唯一颜色，因此可以轻松选择并设置text-anchor属性。

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

1 个答案:

的 DEMO