Thay đổi kích thước biểu đồ Kendo trong khi Thu nhỏ cửa sổ trình duyệt?

Question

Trong dự án nhóm của chúng tôi, chúng tôi đang sử dụng KendoUI kiểm soát vấn đề ở đây trong khi giảm thiểu kích thước biểu đồ cửa sổ không giảm. Làm cách nào để tăng/giảm kích thước biểu đồ trong khi tối đa hóa/thu nhỏ cửa sổ trình duyệt.

Answer 1

Hãy thử điều này làm việc với tôi:

<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

Hãy thử này ...

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

Answer 3

Bạn có thể gắn với sự kiện thay đổi kích thước của cửa sổ và khi nó thay đổi, thiết lập lại các tùy chọn chiều rộng trên biểu đồ.

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

Một điểm nữa. Ngoài ra bạn có thể muốn vô hiệu hóa các hoạt hình trước khi vẽ lại và kích hoạt nó sau

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