Question

我有下面的图表填充显示的宽度和高度。高度总是比屏幕大一点，所以滚动条似乎显示底部20 px左右。

有没有办法让Kendo UI显示100％，而不是105％？

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    html {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 24px;
    }

    .k-chart { overflow: hidden; }
</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css" />

<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
</head>
<body>
<div class="chart-wrapper">
<div id="chart" style="height: 100%; min-height: 100%; width: 100%;"> </div>
</div>
<script>
    $(function () {
        $("#chart").kendoChart({
            legend: {
                visible: false
            },
            seriesDefaults: {
                type: "column",
                opacity: .7
            },
            series: [{
                data: [11341.520000, 14677.030000, 0.810000, 27.910000, 4092.410000, 4092.410000, 4115.850000, 6479.210000, 6479.210000, 6482.850000],
                color: "#005984"
            }],
            valueAxis: {
                labels: {
                    format: "{0:C0}"
                },
                line: {
                    visible: false
                }
            },
            categoryAxis: {
                categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct"],
                majorGridLines: {
                    visible: false
                }
            },
            tooltip: {
                visible: true,
                format: "{0:C0}",
                template: " #= value #"
            }
        });
    });

    $(window).on("resize", function () {
        kendo.resize($(".chart-wrapper"));
    });

</script>
</body>
</html>

enter image description here

Answer 1

我发现这是解决方案：

将此添加到CSS：

    html { height:100%; }
    body { height:100%; overflow:hidden; margin:0; padding:0; }

如果您需要100％宽度和高度的html解决方案，适用于Android和ios，那么这里是完整的HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<style>
    html {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 24px;
    }
    .k-chart { overflow: hidden; }
    html { height:100%; }
    body { height:100%; overflow:hidden; margin:0; padding:0; }
</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css" />
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css" />

<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
</head>
 <body>

 <!-- NOTE: Leave the styles here as Kendo will do funny things with a css class -->
<div class="chart-wrapper" style="height: 100%; min-height: 100%; width: 100%;">
<div id="chart" style="height: 100%; min-height: 100%; width: 100%;"> </div>
</div>

 <script>
 $(function() { $("#chart").kendoChart({ legend: { visible: false }, seriesDefaults: { type: "column", opacity: .7 }, series: [{ data: [11341.520000, 14677.030000, 0.810000, 27.910000, 4092.410000, 4092.410000, 4115.850000, 6479.210000, 6479.210000, 6482.850000], color: "#005984" }], valueAxis: { labels: { format: "{0:C0}" }, line: { visible: false } }, categoryAxis: { categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct"], majorGridLines: { visible: false } }, tooltip: { visible: true, format: "{0:C0}", template: " #= value #" } }); });

$(window).on("resize", function() { kendo.resize($(".chart-wrapper"));  }); 
</script>
</body>
</html>

剑道图表高度为105％，而不是100％高度？

1 个答案: