在最小化浏览器窗口的同时重新设置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图表的大小？

回答

相关问题