響應式設計-餅圖
[英]Responsive Design - Pie Chart
問題描述
我有此餅圖，它在移動屏幕上時不會按比例縮小。
我嘗試過包括媒體查詢，但是似乎沒有用。 我想知道我是否把它們放在錯誤的地方？ 也許我需要一個div樣式？ 該代碼可以在計算機屏幕上正常運行，也就是在移動設備上查看時。
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2019.1.220/js/jquery.min.js"> </script>
<script src="https://kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<div id="example">
<div class="demo-section k-content wide">
<div id="chart" style="background: center no-repeat url('../content/shared/styles/world-map.png');"></div>
</div>
<style>
table {
width: 100%;
border-collapse: collapse;
}
/* Zebra striping */
tr:nth-of-type(odd) {
background: #eee;
}
th {
background: #333;
color: white;
font-weight: bold;
}
td,
th {
padding: 6px;
border: 1px solid #ccc;
text-align: left;
}
@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
/* Force table to not be like tables anymore */
table,
thead,
tbody,
th,
td,
tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr {
border: 1px solid #ccc;
}
td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
</style>
<script>
$(window).on("resize", function() {
kendo.resize($("#example"));
});
function createChart() {
$("#chart").kendoChart({
title: {
position: "bottom",
text: "Test Title"
},
legend: {
visible: false
},
chartArea: {
background: ""
},
seriesDefaults: {
labels: {
visible: true,
background: "transparent",
template: "#= category #: \n #= value#%"
}
},
series: [{
type: "pie",
startAngle: 150,
data: [{
category: "Germany",
value: 40.4,
color: "#007bc7"
}, {
category: "Italy",
value: 20.2,
color: "#ffb612"
}, {
category: "France",
value: 7.1,
color: "#39b70c"
}, {
category: "United Kingdom",
value: 5.1,
color: "#59b1df"
}, {
category: "Spain",
value: 5.1,
color: "#ca005d"
}, {
category: "Other",
value: 18.2,
color: "#5ed1b5"
}, {
category: "Netherlands",
value: 4.0,
color: "#ee720d"
}]
}],
tooltip: {
visible: true,
format: "{0}%"
}
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
</script>
</html>
有任何想法嗎？
2 個解決方案
解決方案1
1 2019-04-11 12:20:28
添加此jquery以獲得響應式餅圖
$(window).on("resize", function() {
kendo.resize($("#example"));
});
function createChart() { $("#chart").kendoChart({ title: { position: "bottom", text: "Test Title" }, legend: { visible: false }, chartArea: { background: "" }, seriesDefaults: { labels: { visible: true, background: "transparent", template: "#= category #: \\n #= value#%" } }, series: [{ type: "pie", startAngle: 150, data: [{ category: "Germany", value: 40.4, color: "#007bc7" },{ category: "Italy", value: 20.2, color: "#ffb612" },{ category: "France", value: 7.1, color: "#39b70c" },{ category: "United Kingdom", value: 5.1, color: "#59b1df" },{ category: "Spain", value: 5.1, color: "#ca005d" },{ category: "Other", value: 18.2, color: "#5ed1b5" },{ category: "Netherlands", value: 4.0, color: "#ee720d" }] }], tooltip: { visible: true, format: "{0}%" } }); } $(document).ready(createChart); $(document).bind("kendo:skinChange", createChart); $(window).on("resize", function() { kendo.resize($("#example")); });
table { width: 100%; border-collapse: collapse; } /* Zebra striping */ tr:nth-of-type(odd) { background: #eee; } th { background: #333; color: white; font-weight: bold; } td, th { padding: 6px; border: 1px solid #ccc; text-align: left; } @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) { /* Force table to not be like tables anymore */ table, thead, tbody, th, td, tr { display: block; } /* Hide table headers (but not display: none;, for accessibility) */ thead tr { position: absolute; top: -9999px; left: -9999px; } tr { border: 1px solid #ccc; } td { /* Behave like a "row" */ border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; } td:before { /* Now like a table header */ position: absolute; /* Top/left values mimic padding */ top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; }
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.common-material.min.css" /> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.material.min.css" /> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.material.mobile.min.css" /> <script src="https://kendo.cdn.telerik.com/2019.1.220/js/jquery.min.js"></script> <script src="https://kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <div id="example"> <div class="demo-section k-content wide"> <div id="chart" style="background: center no-repeat url('../content/shared/styles/world-map.png');"></div> </div>
解決方案2
0 2019-04-11 12:19:14
添加resize function
$(window).resize(createChart);
function createChart() { $("#chart").kendoChart({ title: { position: "bottom", text: "Test Title" }, legend: { visible: false }, chartArea: { background: "" }, seriesDefaults: { labels: { visible: true, background: "transparent", template: "#= category #: \\n #= value#%" } }, series: [{ type: "pie", startAngle: 150, data: [{ category: "Germany", value: 40.4, color: "#007bc7" },{ category: "Italy", value: 20.2, color: "#ffb612" },{ category: "France", value: 7.1, color: "#39b70c" },{ category: "United Kingdom", value: 5.1, color: "#59b1df" },{ category: "Spain", value: 5.1, color: "#ca005d" },{ category: "Other", value: 18.2, color: "#5ed1b5" },{ category: "Netherlands", value: 4.0, color: "#ee720d" }] }], tooltip: { visible: true, format: "{0}%" } }); } $(document).ready(createChart); $(window).resize(createChart); $(document).bind("kendo:skinChange", createChart);
table { width: 100%; border-collapse: collapse; } /* Zebra striping */ tr:nth-of-type(odd) { background: #eee; } th { background: #333; color: white; font-weight: bold; } td, th { padding: 6px; border: 1px solid #ccc; text-align: left; } @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) { /* Force table to not be like tables anymore */ table, thead, tbody, th, td, tr { display: block; } /* Hide table headers (but not display: none;, for accessibility) */ thead tr { position: absolute; top: -9999px; left: -9999px; } tr { border: 1px solid #ccc; } td { /* Behave like a "row" */ border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 50%; } td:before { /* Now like a table header */ position: absolute; /* Top/left values mimic padding */ top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; }
<!DOCTYPE html> <html> <base href="https://demos.telerik.com/kendo-ui/pie-charts/index"> <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style> <title></title> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.common-material.min.css" /> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.material.min.css" /> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.material.mobile.min.css" /> <script src="https://kendo.cdn.telerik.com/2019.1.220/js/jquery.min.js"></script> <script src="https://kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div id="example"> <div class="demo-section k-content wide"> <div id="chart" style="background: center no-repeat url('../content/shared/styles/world-map.png');"></div> </div> </div> </body> </html>
Google餅圖不響應
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.