Größe des Kendo-Diagramms ändern, während das Fenster des Browsers minimiert wird?

Question

In unserem Team-Projekt verwenden wir die KendoUI Kontrollen hier Problem während minimieren die Fenster-Diagrammgröße nicht abnehmend.Wie erhöhen/verringern Sie die Größe des Diagramms, während maximieren/minimieren Sie das Fenster des Browsers.?

Answer 1

Try this funktioniert für mich:

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

Answer 2

Try this ...

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

Answer 3

Sie auf das Resize-Ereignis des Fensters anbringen kann, und wenn sie sich ändert, auf der Karte die Breite Option zurückgesetzt.

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

Answer 4

Ein weiterer Punkt. Auch können Sie die Animation vor dem Neuaufbau deaktivieren und aktivieren sie nach

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