当组中的某些项目没有值时，无法隐藏分组 kendo ui 柱形图

Question

我一直在尝试获取 telerik kendo ui 柱形图来显示分组数据，但这些组可能没有所有可能值的条目，我不想显示space/empty 这些空案例中的列。

有没有人知道如何让它像下面的截图一样工作

Excel 已对数据进行分组，但如果数据为 null/zero

，则根本不显示列

Answer 1

我找不到执行此操作的内置方法，所以我最终只是通过覆盖 visual function. In my case, I only needed to move one bar and that bar will always be the same category, which made it a whole lot easier in that I only had to identify it by matching the category. I could then move it with a transform 手动放置条形图。无法通过设置坐标移动它，因为视觉对象已经创建。

动态地执行此操作会更复杂，但这当然是可能的。这可能会给某人一个正确方向的开始。

这种方法的一个缺点是您还必须手动放置标签，我在下面也这样做了。您也可以覆盖标签的 visual 函数，但事件数据不会传递对任何其他元素的引用。请注意文档如何说明发件人字段可能未定义；根据我的经验，情况总是如此。

它也不会移动工具提示或突出显示。您可以使用相同的方法移动突出显示（覆盖 visual 函数，尽管在系列而不是 seriesDefaults 上）并在移动突出显示时手动绘制工具提示 - 类似于下面的方法在绘制标签时的方式移动列。

Telerik Dojo Example

$(document).ready(function () {
    $("#chart").kendoChart({
        legend: { visible: false },
        tooltip: { visible: false },
        categoryAxis: {
            name: "categoryAxis",
            categories: ["1", "2", "3"],
        },
        series: [
            {
                data: [1, 2, 3],
                highlight: { visible: false },
            },
            {
                data: [1.5, null, 3.5],
                highlight: { visible: false },
            }
        ],
        seriesDefaults: {
            type: "column",
            labels: { visible: false },
            visual: function (e) {
                if (e.value === null) return;
                var visual = e.createVisual();
                var axisRect = e.sender.getAxis("categoryAxis").slot("2");
                var group = new kendo.drawing.Group();
                var label = new kendo.drawing.Text(e.value, [0, 0], {
                    font: "20px sans-serif",
                    fill: { color: "black" }
                });
                var lbox = label.clippedBBox();
                label.position([
                    e.rect.origin.x + e.rect.size.width / 2 - lbox.size.width / 2,
                    e.rect.origin.y - label.bbox().size.height * 1.5
                ]);
                group.append(visual, label);
                if (e.category === "2") {
                    var x = (axisRect.origin.x + axisRect.size.width / 2) - e.rect.size.width / 2;
                    group.transform(kendo.geometry.transform().translate(x - e.rect.origin.x, 0));
                }
                return group;
            },
        }
    });
});

当组中的某些项目没有值时，无法隐藏分组 kendo ui 柱形图

Cant get a grouped kendo ui column chart to hide when some items in group don't have a value

telerik

kendo-ui

kendo-chart