Kendo ui 剑道UI图表不占用所有div宽度
我正在使用KendoUIDataViz开发我的应用程序,但是我在绘制图表时遇到了一个问题。当图表是渲染器时,它没有占用所有的Kendo ui 剑道UI图表不占用所有div宽度,kendo-ui,kendo-dataviz,Kendo Ui,Kendo Dataviz,我正在使用KendoUIDataViz开发我的应用程序,但是我在绘制图表时遇到了一个问题。当图表是渲染器时,它没有占用所有的div宽度,如下所示 我的JS代码: function creatChart() { $("#chart").kendoChart({ dataSource : { transport : { read : {
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
宽度。有人能帮我吗?请用电话线
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 #"
}
});
};
使用浏览器的调试器确定是什么控制剑道控件的宽度,并对其进行适当设置。检查span12,row fluid,您好,谢谢您的回答,但我使用此代码
$(“#图表”).data(“kendoChart”).refresh()解决了问题代码>,当我在选项卡中单击以访问我的图表时,执行了前面的代码,并调整了图表的大小。谢谢