Question

我正在使用kendo-ui绘制像这样的{4}}的圆环图但我希望它在容器div调整大小时调整大小。

如果你没有设置尺寸或尺寸，那就没问题，因为它不适合自动缩放以适应div。

现在我希望我的甜甜圈很薄（外半径略大于内半径）。

如果我尝试将大小设置为25像素，甜甜圈现在不会填充我的所有div和麦芽汁只有sizeHole调整大小。

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

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

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

如果我试图设置两个相互影响，并且在甜甜圈上不会重新调整大小

我真正需要的是将圆环尺寸修复到容器的某个百分比，比如大小为50％，尺寸为5％，让用户拖动/重新设置浏览器并保持尺寸/尺寸/容器尺寸长宽比

我尝试使用

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

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

我可以尝试实现类似example

的内容

但是代码很快就乱了。

对于简单地将甜甜圈“厚度”设置为百分比或与整个大小成比例（以某种方式保持调整大小）或任何不涉及setTimeout的工作区，有什么好的（我不知道）属性？

Answer 1

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

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

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

1 个答案: