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

Posted 2023-05-07

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

【英文标题】：Cant get a grouped kendo ui column chart to hide when some items in group don't have a value

【发布时间】：2017-11-09 03:23:55

【问题描述】：

我一直在尝试获取一个telerik kendo ui 柱形图来显示分组数据，但是这些组可能没有所有可能值的条目，并且我不想在这些空情况下显示空格/空列。

Telerik dojo of problem

是否有人知道如何让它更像下面的屏幕截图那样工作

Excel 已对数据进行分组，但如果数据为空/零，则根本不显示列

【问题讨论】：

我正在尝试解决同样的问题（显然是在您之后一年），但是，您的 Excel 示例与您的 kendo-ui 示例执行相同的操作；它只是不太明显，因为组较少。标准组显示在左侧，VMWare 组显示在每列的右侧。

【参考方案1】：

我找不到执行此操作的内置方法，因此我最终只是通过覆盖 visual 函数手动放置条形图。在我的例子中，我只需要移动一个条，并且该条将始终是相同的类别，这使得它变得更加容易，因为我只需要通过匹配类别来识别它。然后我可以用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;
            ,
        
    );
); 

【讨论】：

不错的解决方案，这很硬核:)