在最小化瀏覽器窗口的同時重新設置Kendo圖表的大小？

在我們的團隊項目中，我們使用的是KendoUI控制這裏的問題，同時最小化窗口圖表的大小不decreasing.How增加/減少圖表的大小，而最大化/最小化瀏覽器的窗口？在最小化瀏覽器窗口的同時重新設置Kendo圖表的大小？

2013-04-26 user2314027

試試這個工作對我說：

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

來源

2013-04-29 10:07:12 Muthu

試試這個它的作品對我的高度和寬度.. $（窗口）.resize（函數（）{ $（「＃圖SVG」）寬（編號（$（窗口）.WIDTH（）））; $（「＃圖表SVG」）高度（編號（$（窗口）.height（）））; $（「＃圖表」）的數據（「kendoChart」）刷新（）; }）; – Muthu 2013-04-29 10:56:02

確保所有必需的kendo文件都包含在您的頁面中。 – Muthu 2013-04-29 11:17:01

雅我得到了解決方案，謝謝你muthu – user2314027 2013-04-30 07:39:57

嘗試......

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

來源

2013-04-26 11:33:57 Muthu

使它能夠在上面的代碼中不能使用比例..因爲jQuery高度（）和寬度（）將給像素值 – Muthu 2013-04-29 10:03:48

完美。謝謝 – chris 2013-11-15 14:01:24

您可以連接到窗口的resize事件，當它改變時，重置圖表上的寬度選項。

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

來源

2013-04-26 12:36:38 CodingWithSpike

嗨..我試過這一個，但沒有更改應用。圖表寬度是相同的沒有更改應用於圖表寬度。 – user2314027 2013-04-29 04:58:44

這可能是你的網頁的東西。這是上面的代碼在jsFiddle示例中工作：http://jsfiddle.net/rally25rs/TPy2j/1/ – CodingWithSpike 2013-04-29 13:31:24

非常感謝！這個對我有用！ :) – 2014-02-24 16:15:08

還有一點。您可能還需要重繪之前禁用動畫和後

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

來源

2016-06-14 09:58:02

在最小化瀏覽器窗口的同時重新設置Kendo圖表的大小？

回答

相關問題