Re-size the Kendo chart while Minimize the window of browser?

问题

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

回答1:

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>

回答2:

Try this...

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

回答3:

You can attach to the resize event of the window and when it changes, reset the width option on the chart.

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

回答4:

One more point. Also you may want to disable the animation before the redraw and enable it after

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

来源：https://stackoverflow.com/questions/16233917/re-size-the-kendo-chart-while-minimize-the-window-of-browser

标签

javascript

kendo-ui