响应式设计-饼图

时间：2019-04-11 12:05:17

标签： javascript html css

我有这个饼图，在移动屏幕上时，它不会按比例缩小。

我尝试过包括媒体查询，但是似乎没有用。我想知道我是否把它们放在错误的地方？也许我需要一个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>

Screenshot

有什么想法吗？

2 个答案:

答案 0 :(得分：1)

为此jQuery添加响应式饼图

$(window).on("resize", function() {
  kendo.resize($("#example"));
});

检查此Demo jsfiddle 

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>

答案 1 :(得分：0)

添加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>

相关问题
最新问题