在最小化浏览器窗口的同时重新调整剑道图的大小? [英] Re-size the Kendo chart while Minimize the window of browser?
问题描述
在我们的团队项目中,我们在这里使用 KendoUI 控件出现问题,同时最小化窗口图表大小而不是减小.如何在最大化/最小化浏览器窗口的同时增加/减小图表大小.?
试试这个对我有用:
<div id="图表"></div><脚本>//图表数据源var 示例数据 = [{ "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 }];//创建图表的函数函数 createChart() {//使用 exampleData 创建剑道图表$("#chart").kendoChart({标题: {文字:样品"},数据源:{数据:exampleData,},传奇: {位置:底部"},图表区域:{背景: ""},系列默认值:{类型:线"},系列: [{字段:总计",}],值轴:{标签: {格式:${0}"}},类别轴:{字段:年"},工具提示:{可见:真实,格式:{0}%"}});}//调整窗口大小时调整图表大小$(window).resize(function () {$("#chart svg").width(Number($(window).width()));$("#chart svg").height(Number($(window).height()));$("#chart").data("kendoChart").refresh();});//文档就绪函数$(document).ready(function () {//延迟初始化图表以确保//初始动画可见创建图表();//原来$("#chart svg").width(Number($(window).width()));$("#chart svg").height(Number($(window).height()));$("#chart").data("kendoChart").refresh();});
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.?
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>
这篇关于在最小化浏览器窗口的同时重新调整剑道图的大小?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!