Javascript 响应式设计-饼图_Javascript_Html_Css

Javascript 响应式设计-饼图

javascript html css

Javascript 响应式设计-饼图,javascript,html,css,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" />

我有一个饼图，当在移动屏幕上时，它不会缩小

我尝试过包括媒体查询，但似乎不起作用。我不知道我是否把它们放错地方了？或者我需要一个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>

有什么想法吗？

添加调整大小功能

函数创建图{ $chart.kendoChart{ 标题：{ 位置：底部，文本：测试标题 }, 图例：{ 可见：假 }, 图表区：{ 背景： }, 系列默认值：{ 标签：{ 可见：对，背景：透明，模板：=类别：\n=值% } }, 系列：[{ 类型：馅饼， startAngle:150，数据：[{ 类别：德国，价值：40.4，颜色：007bc7 },{ 类别：意大利，价值：20.2，颜色：ffb612 },{ 类别：法国，价值：7.1，颜色：39b70c },{ 类别：联合王国，价值：5.1，颜色：59b1df },{ 类别：西班牙，价值：5.1，颜色：ca005d },{ 类别：其他，价值：18.2，颜色：5ed1b5 },{ 类别：荷兰，数值：4.0，颜色：ee720d }] }], 工具提示：{ 可见：对，格式：{0}% } }; } $document.readycreateChart； $window.resizecreateChart； $document.bindkendo:skinChange，createChart；表{ 宽度：100%；边界塌陷：塌陷； } /*斑马条纹*/ tr:typeodd{n的第n个背景：eee； } th{ 背景：333人；颜色：白色；字体大小：粗体； } td，th{ 填充：6px；边框：1px实心ccc；文本对齐：左对齐； } @媒体仅屏幕和最大宽度：760像素，最小设备宽度：768px，最大设备宽度：1024px{ /*强制表不再像表一样*/ 表，thead，tbody，th，td，tr{ 显示：块； } /*隐藏表格标题但不显示：none；，以便于访问*/ thead tr{ 位置：绝对位置；顶部：-9999px；左：-9999px； } tr{border:1px solid ccc；} td{ /*像吵架一样*/ 边界：无；边框底部：1px实心eee；位置：相对位置；左：50%； } td:在{ /*现在就像一个表格标题*/ 位置：绝对位置； /*上/左值模拟填充*/ 顶部：6px；左：6px；宽度：45%；右边填充：10px；空白：nowrap； } html{字体大小：14px；字体系列：Arial、Helvetica、sans serif；}

为响应饼图添加此jquery

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

查查这个

函数创建图{ $chart.kendoChart{ 标题：{ 位置：底部，文本：测试标题 }, 图例：{ 可见：假 }, 图表区：{ 背景： }, 系列默认值：{ 标签：{ 可见：对，背景：透明，模板：=类别：\n=值% } }, 系列：[{ 类型：馅饼， startAngle:150，数据：[{ 类别：德国，价值：40.4，颜色：007bc7 },{ 类别：意大利，价值：20.2，颜色：ffb612 },{ 类别：法国，价值：7.1，颜色：39b70c },{ 类别：联合王国，价值：5.1，颜色：59b1df },{ 类别：西班牙，价值：5.1，颜色：ca005d },{ 类别:O 疗法，价值：18.2，颜色：5ed1b5 },{ 类别：荷兰，数值：4.0，颜色：ee720d }] }], 工具提示：{ 可见：对，格式：{0}% } }; } $document.readycreateChart； $document.bindkendo:skinChange，createChart； $window.onresize，函数{ 剑道。调整$example的大小； }; 表{ 宽度：100%；边界塌陷：塌陷； } /*斑马条纹*/ tr:typeodd{n的第n个背景：eee； } th{ 背景：333人；颜色：白色；字体大小：粗体； } td，th{ 填充：6px；边框：1px实心ccc；文本对齐：左对齐； } @媒体仅屏幕和最大宽度：760像素，最小设备宽度：768px，最大设备宽度：1024px{ /*强制表不再像表一样*/ 表，thead，tbody，th，td，tr{ 显示：块； } /*隐藏表格标题但不显示：none；，以便于访问*/ thead tr{ 位置：绝对位置；顶部：-9999px；左：-9999px； } tr{border:1px solid ccc；} td{ /*像吵架一样*/ 边界：无；边框底部：1px实心eee；位置：相对位置；左：50%； } td:在{ /*现在就像一个表格标题*/ 位置：绝对位置； /*上/左值模拟填充*/ 顶部：6px；左：6px；宽度：45%；右边填充：10px；空白：nowrap； }

我不太明白把表脚本放在哪里-请参阅更新的代码，在html的头部分和html之后的jquery中添加表脚本的CSS

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