javascript - 无法设置可调整大小的圆环图的尺寸

Question

我正在使用 kendo-ui 绘制一个圆环图，如下所示 example 但我希望它在容器 div 调整大小时调整大小。

如果您不设置 size 或 sizeHole 也不会有麻烦，因为它无法自动缩放以适应 div。

现在我希望我的 donut 变薄(外半径略大于内半径)。

如果我尝试将大小设置为 25 像素， donut 现在不会填充我的所有 div 和 wort，仅调整 sizeHole 大小。

                seriesDefaults: {
                    type: "donut",
                    size: 25,
                    ...  

如果我尝试将 sizehole 设置为 250，则无法再调整大小

                seriesDefaults: {
                    type: "donut",
                    sizeHole: 250,
                    ...  

如果我尝试设置两个属性，则会相互影响，并且在 donut 上根本不调整大小

我真正需要的是将 donut 尺寸固定为容器的一定百分比，假设大小为 50%，sizeHole 为 5%，并让用户拖动/调整浏览器大小并保持 size/sizeHole/Container 大小纵横比.

我尝试使用一些东西

    $(window).resize(Resize(element));
    ...

    function Resize(element) {

        var minContainerSize = element[0].clientHeight;
        if (minContainerSize > element[0].clientWidth || minContainerSize == 0)
            minContainerSize = element[0].clientwidth;

        return function () {
            var chart = element.data("kendoChart");
            var pieSeries = chart.options.seriesDefaults;
            pieSeries.size = minContainerSize * 0.13;
            //pieSeries.holeSize = minContainerSize * 0.299;

            chart.refresh();
        }
    };

但它没有成功，因为我需要在调整大小事件结束后获取容器大小以获取新的容器大小。

我可以尝试实现这样的东西 after resize solution

但是代码很快就变得一团糟。

有什么好的(我不知道)属性可以简单地将 donut “厚度”设置为与整个大小的百分比或比例(以不断调整大小的方式)或任何不涉及 setTimeout 的解决方法？

Answer 1

我认为你应该使用holeSize而不是sizeHole。

http://www.telerik.com/forums/donut-chart-set-inner-and-outer-radius