Kendo UI Chart 没有占据所有 div 宽度

Question

我正在使用 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

宽度。请问有人可以帮我吗？

Answer 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 #"
    }
});

Answer 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) },

将百分比更改为特定大小