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

文章来源: Re-size the Kendo chart while Minimize the window of browser?