(kendoUI图表)能否在调整窗口大小时重新调整其大小？

Question

这是饼图的设置：

function createChart(chartDataSource) {
    $("#chart").kendoChart({
        theme:$(document).data("kendoSkin") || "black",
        title:{
            text:"Efficiency"
        },
        legend:{
            position:"bottom"
        },
        dataSource:chartDataSource,
        series:[
            {
                type:"pie",
                field:"val",
                categoryField:"status"
            }
        ],
        tooltip:{
            visible:true,
            template:"${category} - #= kendo.format('{0:P}', percentage)#"
        }
    });

CSS 样式：

#chart {
    width: 50%;
    height: 50%;
    }

我知道Highcharts有一个名为reflow的布尔类型属性（在StackOverflow上有一个关于reflow的例子），它正好符合我的需求。

但我不确定kendoUI图表是否有相同的reflow设置，或者我是否应该尝试调整CSS样式。如果选择使用CSS，如何进行此类设置？

谢谢。

- sozhen

Answer 1

应用我的想法到你的链接帖子中，只需挂钩窗口调整大小事件并重新绘制图表：

$(window).resize(function() 
{    
    var chart = $("#chart").data("kendoChart");
    chart.refresh();
});

这里有一个可用的 fiddle，链接在 这里。

- Mark

---

谢谢，我一直在考虑使用刷新来更新图表，这是处理这个问题的唯一方法吗？或者可以应用一些CSS代码来解决这个问题。谢谢。 - sozhen

Mark非常感谢你。如果你有时间，请看一下我长时间以来一直在努力解决的这个问题。 - sozhen

$(window).resize(function(){ kendo.resize($(".k-chart")); }); 这段代码可以在不刷新图表的情况下重新调整图表大小。 - xkcd