在我们的团队项目中,我们在这里使用KendoUI控件,同时最小化窗口图表大小不减小。如何在最大化/最小化浏览器窗口的同时增加/减小图表大小。?
问问题
7308 次
4 回答
8
试试这个对我有用:
<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-29T10:07:12.980 回答
6
尝试这个...
$(window).resize(function () {
$("#chart svg").width(Number($('.k-content').width()));
$("#chart svg").height(Number($('.k-content').height()));
$("#chart").data("kendoChart").refresh();
});
于 2013-04-26T11:33:57.333 回答
5
您可以附加到窗口的调整大小事件,当它发生变化时,重置图表上的宽度选项。
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-26T12:36:38.647 回答
0
还有一点。此外,您可能希望在重绘之前禁用动画并在重绘之后启用它
$(window).resize(function () {
$("#chart").data("kendoChart").options.transitions = false;
$("#chart").data("kendoChart").refresh();
$("#chart").data("kendoChart").options.transitions = true;
});
于 2016-06-14T09:58:02.903 回答