【问题标题】:how to reduce the space如何减少空间
【发布时间】:2021-10-14 13:17:04
【问题描述】:

嗨,我正在尝试实现剑道甜甜圈。 根据图片我做到了,但状态栏和甜甜圈之间有更多空间。

我的html代码:-

    <style>
    .overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        height: 100px;
        margin-top: -214px;
        margin-left: -131px;
        font-size: 16px;
        line-height: 100px;
        vertical-align: middle;
        text-align: center;
    }
    </style> 
<div id="brazil">
    <div class="demo-section k-content wide">
        <div id="chart"></div>
        <div class="overlay" style="display: none;"><div>No Requests For The Current Year</div></div>
    </div>
</div>

我的 js 代码:-

       function createChart(s, s) {
        $.ajax({
            type: 'GET',
            url: "/tgf.mvc/ss?siteId=" + s,
            dataType: 'json',
            success: function (data) {
                $("#chart").kendoChart({
                    title: {
                        text: ""
                    },
                    chartArea: {
                        position: "center"      
                    },
                    legend: {
                        labels: {
                            visible: true,
                            template: kendo.template("#: text # #: Math.floor(percentage*100) #%"),
                            position: "center",


                        },
                        position: "left"
                    },
                    dataSource: {
                        data: data123
                    },
                    series: [{
                        type: "donut",
                        field: "value",
                        categoryField: "source",
                        explodeField: "explode",

                        labels: {
                            visible: true,
                            position: "center",
                            template: "#: value # Files"
                        }
                    }]
                    tooltip: {
                        visible: false,
                        template: "${ category } - ${ value }"
                    }
                });

我尝试过的事情 1.尝试减轻重量但仍有空间。 有人请帮我吗? screenshot

【问题讨论】:

  • 什么是重量?你的意思是 width 还是 height ?我认为你应该减少容器的width
  • 对不起宽度,我也试过 offsetX: -50, offsetY: -50
  • 当我从右到左减小宽度时。但空间保持不变。
  • 如果你能做一个道场,它会更容易提供帮助。
  • @DontVoteMeDown dojo.telerik.com/uyuRuMom/3

标签: javascript kendo-ui kendo-grid kendo-asp.net-mvc


【解决方案1】:

空间取决于图表初始化时所在容器的width

可以在图表初始化之前设置widthdojo

<div id="chart" style="width:400px;"></div>

如果在图表初始化后改变宽度,则需要redraw图表。这将在屏幕上重新绘制图表:dojo

$("#chart").width(400);
$("#chart").data("kendoChart").redraw();

【讨论】: