当浏览器窗口最小化时，如何调整Kendo图表的大小？

Question

在我们的团队项目中，我们正在使用KendoUI控件，这里遇到了一个问题：当最小化窗口时，图表大小不会减小。如何在浏览器最大化/最小化窗口时增加/减小图表的大小？

- user2314027

Answer 1

尝试这个对我有效：

<div id="example">
   <div id="chart"></div>
</div>

<script>  
    // Chart Data Source
    var exampleData = [
         { "FromDept": "ACT", "ToDept": "NSW", "Year": 2010, "Total": 101 },
         { "FromDept": "ACT", "ToDept": "NSW", "Year": 2011, "Total": 1001 },
         { "FromDept": "ACT", "ToDept": "NSW", "Year": 2012, "Total": 501 },
         { "FromDept": "ACT", "ToDept": "YNT", "Year": 2010, "Total": 501 }
    ];


    // Function to create Chart
    function createChart() {

        // Creating kendo chart using exampleData
        $("#chart").kendoChart({
            title: {
                text: "Sample"
            },
            dataSource:
            {
                data: exampleData,
            },
            legend: {
                position: "bottom"
            },
            chartArea: {
                background: ""
            },
            seriesDefaults: {
                type: "line"
            },
            series: [{
                field: "Total",
            }],
            valueAxis: {
                labels: {
                    format: "${0}"
                }
            },
            categoryAxis: {
                field: "Year"
            },
            tooltip: {
                visible: true,
                format: "{0}%"
            }
        });
    }

    // Resize the chart whenever window is resized
    $(window).resize(function () {
        $("#chart svg").width(Number($(window).width()));
        $("#chart svg").height(Number($(window).height()));
        $("#chart").data("kendoChart").refresh();
    });

    // Document ready function
    $(document).ready(function () {

        // Initialize the chart with a delay to make sure
        // the initial animation is visible
        createChart();

        // Initially
        $("#chart svg").width(Number($(window).width()));
        $("#chart svg").height(Number($(window).height()));
        $("#chart").data("kendoChart").refresh();

    });
</script>

- Muthu

---

尝试一下，这对我来说既适用于高度又适用于宽度。$(window).resize(function () { $("#chart svg").width(Number($(window).width())); $("#chart svg").height(Number($(window).height())); $("#chart").data("kendoChart").refresh(); }); - Muthu

确保您的页面中包含了所有必要的Kendo文件。 - Muthu

Answer 2

尝试一下这个...

$(window).resize(function () {
     $("#chart svg").width(Number($('.k-content').width()));
     $("#chart svg").height(Number($('.k-content').height()));
     $("#chart").data("kendoChart").refresh();
});

- Muthu

---

在上面的代码片段中，您不能使用百分比..因为jQuery height()和width()将给出像素值。 - Muthu

Answer 3

您可以侦听窗口的resize事件，在其更改时，重置图表中的宽度选项。

window.onresize = function () {
    var newWidth = window.innerWidth * .9 // 90% of screen width

    var chart = $("#chart").data("kendoChart"); // get chart widget
    chart.options.chartArea.width = newWidth; // set new width
    chart.redraw(); // redraw the chart
};

- CodingWithSpike

---

嗨..我尝试了这个，但没有应用任何更改。图表宽度仍然相同，没有应用到图表宽度上。 - user2314027

可能是你的页面出了问题。这里是上面的代码在 jsFiddle 示例中的工作方式：http://jsfiddle.net/rally25rs/TPy2j/1/ - CodingWithSpike

我对我的代码进行了更改，现在调用.redraw()而不是.refresh()，因为redraw只执行渲染操作，而refresh会重新读取数据源中的数据，所以速度会稍慢一些。 - CodingWithSpike

Answer 4

还有一点，您可能希望在重新绘制之前禁用动画，之后再启用。

$(window).resize(function () {
    $("#chart").data("kendoChart").options.transitions = false;
    $("#chart").data("kendoChart").refresh();
    $("#chart").data("kendoChart").options.transitions = true;
});

- Hossein Narimani Rad