在最小化浏览器窗口的同时调整剑道图表的大小? [英] Re-size the Kendo chart while Minimize the window of browser?

问题描述

在我们的团队项目中，我们使用的是 KendoUI 此处的问题，同时最大程度地减小了窗口图表的大小，而不减小.如何在最大/最小化浏览器窗口的同时增大/减小图表的大小.

In our team project we are using the KendoUI controls here issue while minimize the window chart size not decreasing.How to increase/decrease the size of chart while maximize/minimize the window of browser.?

推荐答案

请尝试以下方法:

Try this works to me:

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

这篇关于在最小化浏览器窗口的同时调整剑道图表的大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！