在我们的团队项目中,我们在这里使用 KendoUI 控件,同时最小化窗口图表大小而不是减小。如何在最大化/最小化浏览器窗口的同时增加/减小图表的大小。?
最佳答案
试试这个对我有用:
<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>
关于javascript - 在最小化浏览器窗口的同时重新调整 Kendo 图表的大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16233917/