剑道 UI 图表不占用所有 div 宽度答案

【问题标题】：Kendo UI Chart does not occupying all div width剑道 UI 图表不占用所有 div 宽度
【发布时间】：2022-04-05 19:16:19
【问题描述】：

我正在使用 Kendo UI Dataviz 开发我的应用程序，但在渲染图表时遇到了问题。图表渲染时，并没有占据div的全部宽度，如下图。

我的 JS 代码：

    function creatChart() {
        $("#chart").kendoChart({
            dataSource : {
                transport : {
                    read : {
                        url : "myUrl",
                        dataType : "json",
                    },
                }
            },
            legend : {
                position : "top"
            },
            series : [ {
                type : "area",
                field : "valor1",
                color : "#73c100",
                axis : "axes1"
            }, {
                type : "line",
                field : "valor2",
                color : "#007eff",
                position : "right",
                axis : "axes2"
            } ],
            valueAxes : [ {
                name : "axes1",
                color : "#73c100",
                min : 0,
                max : 150
            }, {
                name : "axes2",
                color : "#007eff",
                min : 0,
                max : 150
            } ],
            categoryAxis : {
                field : "data",
                labels : {
                    template : "#=$(this).formatDate(value)#",
                    rotation: -35
                }
            },
            tooltip : {
                visible : true,
                format : "{0}"
            }
        });
    }

我的 HTML 代码：

                           <div id="tabs-1">
                                <div class="row-fluid" style="padding-top: 45px">
                                    <div class="span2" style="padding-left: 15px; padding-top: 15px; padding-bottom: 15px">Selecione
                                    o período:
                                    </div>
                                    <div class="span3">
                                        <input type="text" class="dataInicio" readonly="readonly" style="margin-top: 15px;"/>
                                    </div>
                                    <div class="span1">
                                        <label style="margin-top: 15px;">à</label>
                                    </div>
                                    <div class="span5">
                                        <input type="text" class="dataFim" readonly="readonly" style="margin-top: 15px;"/>
                                         <button class="btn submit" style="margin-top: 10px;">Buscar</button>
                                    </div>
                                </div>
                                <div class="row-fluid">
                                    <div class="span12">
                                        <div id="chart"></div>
                                    </div>
                                </div>
                            </div>

我需要图表占据所有div 宽度。有人可以帮帮我吗？

【问题讨论】：

使用浏览器的调试器来确定是什么控制了 Kendo 控件的宽度并进行了适当的设置。检查 span12，行流体，
您好，感谢您的回答，但我使用此代码$("#chart").data("kendoChart").refresh(); 解决了问题，当我单击选项卡以访问我的图表时，执行了先前的代码，并调整了图表的大小。谢谢。

标签： kendo-ui kendo-dataviz

【解决方案1】：

使用线条

chartArea: { margin: 0, padding: 0, height: (screen.height * 0.50), width: (screen.width * 0.35) },
plotArea: { margin: 0, padding: 0, height: (screen.height * 0.50), width: (screen.width * 0.35) },

找到下面的代码

$("#chartNo1").kendoChart({

    theme: $(document).data("kendoSkin") || "silver",


        title: {
            text: "Store Visits"
        },
        chartArea: { margin: 0, padding: 0, height: (screen.height * 0.50), width: (screen.width * 0.35) },
        plotArea: { margin: 0, padding: 0, height: (screen.height * 0.50), width: (screen.width * 0.35) },



        legend: {
            visible: false
        },
        seriesDefaults: {
            type: "bar"
        },
        series: [{
            name: "Total Visits",
            data: [56000, 63000, 74000, 91000, 117000, 138000]
        }, {
            name: "Unique visitors",
            data: [52000, 34000, 23000, 48000, 67000, 83000]
}],
            valueAxis: {
                max: 140000,
                line: {
                    visible: false
                },
                minorGridLines: {
                    visible: true
                }
            },
            categoryAxis: {
                categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
                majorGridLines: {
                    visible: false
                }
            },
            tooltip: {
                visible: true,
                template: "#= series.name #: #= value #"
            }
        });

    };

【讨论】：

【解决方案2】：

其他方式

chartArea: { margin: 0, padding: 0, height: (window.innerHeight * 0.50), width: (window.innerWidth * 0.50) },
plotArea: { margin: 0, padding: 0, height: (window.innerHeight * 0.50), width: (window.innerWidth * 0.50) },

将百分比更改为特定大小

【讨论】：