Trong dự án nhóm của chúng tôi, chúng tôi đang sử dụng KendoUI kiểm soát vấn đề ở đây trong khi giảm thiểu kích thước biểu đồ cửa sổ không giảm. Làm cách nào để tăng/giảm kích thước biểu đồ trong khi tối đa hóa/thu nhỏ cửa sổ trình duyệt.Thay đổi kích thước biểu đồ Kendo trong khi Thu nhỏ cửa sổ trình duyệt?
Trả lời
Hãy thử điều này làm việc với tôi:
<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>
Hãy thử này ...
$(window).resize(function() {
$("#chart svg").width(Number($('.k-content').width()));
$("#chart svg").height(Number($('.k-content').height()));
$("#chart").data("kendoChart").refresh();
});
Bạn có thể gắn với sự kiện thay đổi kích thước của cửa sổ và khi nó thay đổi, thiết lập lại các tùy chọn chiều rộng trên biểu đồ.
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
};
Hi .. Tôi đã cố gắng này nhưng không có thay đổi được áp dụng. Chiều rộng biểu đồ là giống nhau không có thay đổi được áp dụng cho chiều rộng biểu đồ. – user2314027
Nó có thể là một cái gì đó với trang của bạn sau đó. Đây là đoạn mã trên làm việc trong một ví dụ jsFiddle: http://jsfiddle.net/rally25rs/TPy2j/1/ – CodingWithSpike
cảm ơn rất nhiều! Nó làm việc cho tôi! :) –
Một điểm nữa. Ngoài ra bạn có thể muốn vô hiệu hóa các hoạt hình trước khi vẽ lại và kích hoạt nó sau
$(window).resize(function() {
$("#chart").data("kendoChart").options.transitions = false;
$("#chart").data("kendoChart").refresh();
$("#chart").data("kendoChart").options.transitions = true;
});
- 1. thay đổi kích thước lưới khi đổi kích thước cửa sổ trình duyệt
- 2. trình duyệt chéo thay đổi kích thước cửa sổ trình duyệt trong JavaScript
- 3. emacs lập trình thay đổi kích thước cửa sổ
- 4. Tự động thay đổi kích thước div dựa trên kích thước của cửa sổ trình duyệt
- 5. Thay đổi kích thước và định kích thước cửa sổ bật lên GWT khi cửa sổ trình duyệt đổi kích thước
- 6. Đóng cửa sổ chia nhỏ trong Vim mà không thay đổi kích thước cửa sổ khác
- 7. Thay đổi kích thước svg khi cửa sổ được thay đổi kích thước trong d3.js
- 8. JQUERY UI Accordion Thay đổi kích thước trên cửa sổ Thay đổi kích thước?
- 9. Tự động thay đổi kích thước hàng TableLayoutPanel khi cửa sổ được thay đổi kích thước
- 10. Thay đổi kích thước MKAnnotationView Image Khi bản đồ phóng to và thu nhỏ?
- 11. fullcalendar - thay đổi kích thước lịch trên cửa sổ thay đổi kích thước
- 12. Chỉnh sửa kích thước hình ảnh tự động dựa trên kích thước cửa sổ trình duyệt
- 13. Tôi có thể thay đổi kích thước cửa sổ trình duyệt không?
- 14. Vô hiệu hoá cửa sổ trình duyệt Thay đổi kích thước
- 15. Ngăn người dùng thay đổi kích thước cửa sổ/kích thước biểu mẫu
- 16. jQuery thay đổi kích thước() sử dụng trình duyệt nút
- 17. Cho phép thay đổi kích thước cửa sổ pyGame
- 18. tự động thay đổi kích thước văn bản (cỡ chữ) khi thay đổi kích thước cửa sổ?
- 19. Sử dụng Javascript để thay đổi kích thước một div để sàng lọc chiều cao gây nhấp nháy khi thu hẹp cửa sổ trình duyệt
- 20. Chiều rộng tối thiểu trong đổi kích thước cửa sổ
- 21. Autolayout đang thay đổi kích thước cửa sổ của tôi
- 22. Tắt thay đổi kích thước Biểu mẫu trong VB6 trong khi vẫn giữ quyền kiểm soát "Thu nhỏ"
- 23. Chỉnh sửa kích thước tự động của Gridpanel khi thay đổi kích thước cửa sổ
- 24. Thay đổi kích thước cửa sổ theo chiều dọc
- 25. Cửa sổ kích hoạt thay đổi kích thước cửa sổ bật lửa jQuery UI
- 26. Thu nhỏ cửa sổ với chế độ NoResize trên
- 27. trong VIM, Cách đặt kích thước cửa sổ ban đầu thông qua trình duyệt tập tin?
- 28. Phát hiện khi cửa sổ được thay đổi kích thước bằng JavaScript?
- 29. Làm cách nào để thay đổi kích thước cửa sổ trình duyệt hiện tại trong Selenium WebDriver với Java?
- 30. Java setResizable (false) thay đổi kích thước cửa sổ (swing)
Hãy thử nó làm việc với tôi cả chiều cao và chiều rộng .. $ (cửa sổ) .resize (function() { $ ("# biểu đồ svg"). Width (Số ($ (cửa sổ) .width())); $ ("# chart svg") chiều cao (Số ($ (cửa sổ) .height()); $ ("# chart"). data ("kendoChart"). refresh(); }); – Muthu
Đảm bảo tất cả các tệp kendo cần thiết được bao gồm trong trang của bạn. – Muthu
Ya Tôi nhận được giải pháp cảm ơn bạn muthu – user2314027