在最小化浏览器窗口的同时重新调整剑道图表的大小？答案

【问题标题】：Re-size the Kendo chart while Minimize the window of browser?在最小化浏览器窗口的同时重新调整剑道图表的大小？
【发布时间】：2013-04-26 10:09:52
【问题描述】：

在我们的团队项目中，我们在这里使用 KendoUI 控件，同时最小化窗口图表大小不减小。如何在最大化/最小化浏览器窗口的同时增加/减小图表大小。？

【问题讨论】：

标签： javascript kendo-ui

【解决方案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>

【讨论】：

试试这个它对我的高度和宽度都有效.. $(window).resize(function () { $("#chart svg").width(Number($(window).width ())); $("#chart svg").height(数字($(window).height())); $("#chart").data("kendoChart").refresh(); }) ;
确保所有必要的剑道文件都包含在您的页面中。

【解决方案2】：

试试这个……

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

【讨论】：

你不能在上面的 sn-p 中使用百分比。因为 jQuery 的 height() 和 width() 会给出像素值

【解决方案3】：

您可以附加到窗口的调整大小事件，当它改变时，重置图表上的宽度选项。

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
};

【讨论】：

嗨..我试过这个，但没有应用任何变化。图表宽度相同，图表宽度没有变化。
那可能与您的页面有关。以下是在 jsFiddle 示例中运行的上述代码：jsfiddle.net/rally25rs/TPy2j/1
我对我的代码进行了更改，现在调用 .redraw() 而不是 .refresh()，因为 redraw 只是进行渲染，而 refresh 从 DataSource 中重新读取数据，所以会慢一些.

【解决方案4】：

还有一点。此外，您可能希望在重绘之前禁用动画并在

之后启用它

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

【讨论】：