响应式 Telerik RadHtmlChart [英] Responsive Telerik RadHtmlChart
问题描述
我正在使用 Telerik RadHtml 图表，我需要根据屏幕分辨率自动调整图表大小.我试图将宽度和高度设置为自动，但这不起作用.我的图表在数据列表中包含我下面的代码块
<内容模板><div id="包装器"><asp:DataList ID="dtlstDashboards" runat="server" RepeatColumns="2" RepeatDirection="Horizontal"OnItemDataBound="dtlstDashboards_ItemDataBound" Width="100%" DataKeyField="DashboardID"><项目模板><table cellpadding="0" cellspacing="0" border="0"><tr><td align="left"><telerik:RadHtmlChart runat="server" ID="chrtCntrl" Width="500px" Height="300px" ><传奇><外观位置="底部"></外观></图例><绘图区></PlotArea></telerik:RadHtmlChart></td></tr></ItemTemplate></asp:DataList> </内容模板></asp:UpdatePanel>
如果图表的尺寸发生变化(通常是在 window.resize 事件中，或者在您的任何其他合适的位置)，您需要调用图表的 repaint() 方法代码):http://www.telerik.com/support/code-library/radhtmlchart-in-a-responsive-web-page.
这是一个例子:
<head runat="服务器"><title></title><style type="text/css">html, 正文, 表单{高度:100%；边距:0；填充:0；}.chartContainer{宽度:50%；高度:50%；边框:2px纯红色；}</风格><身体><form id="form1" runat="server"><asp:ScriptManager ID="Scriptmanager1" runat="server"/><div class="chartContainer"><telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="100%" Height="100%"><绘图区><系列><telerik:AreaSeries><系列项目><telerik:CategorySeriesItem Y="1"/><telerik:CategorySeriesItem Y="2"/><telerik:CategorySeriesItem Y="4"/><telerik:CategorySeriesItem Y="3"/></SeriesItems></telerik:AreaSeries></系列></PlotArea></telerik:RadHtmlChart><脚本>函数调整大小图表(){//重新绘制图表 - 将播放动画//$find("<%=RadHtmlChart1.ClientID%>").repaint();//仅调整图表大小 - 不会播放动画$find("<%=RadHtmlChart1.ClientID%>").get_kendoWidget().resize();}var TO = 假；$telerik.$(window).resize(function () {如果(到！== 假)清除超时(至)；TO = setTimeout(resizeChart, 200);//200是以毫秒为单位的时间});</表单></html>
调整超时想法由这篇文章提供 拖动调整大小手柄时多次触发 javascript 调整大小事件
I am using Telerik RadHtml chart i need to chart should be auto size based on the screen resolution how to do it. I have tried to set width and height as Auto but this not working. my chart containing in the datalist my code block below
<asp:UpdatePanel ID="pnlContainer" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div id="wrapper">
<asp:DataList ID="dtlstDashboards" runat="server" RepeatColumns="2" RepeatDirection="Horizontal"
OnItemDataBound="dtlstDashboards_ItemDataBound" Width="100%" DataKeyField="DashboardID">
<ItemTemplate>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left">
<telerik:RadHtmlChart runat="server" ID="chrtCntrl" Width="500px" Height="300px" >
<Legend>
<Appearance Position="Bottom">
</Appearance>
</Legend>
<PlotArea>
</PlotArea>
</telerik:RadHtmlChart>
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
</div>
</ContentTemplate>
</asp:UpdatePanel>
You need to call the repaint() method of the chart if its dimensions change (usually, in the window.resize event, or any other suitable place in your code): http://www.telerik.com/support/code-library/radhtmlchart-in-a-responsive-web-page.
Here is an example:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
html, body, form
{
height: 100%;
margin: 0;
padding: 0;
}
.chartContainer
{
width: 50%;
height: 50%;
border: 2px solid red;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="Scriptmanager1" runat="server" />
<div class="chartContainer">
<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="100%" Height="100%">
<PlotArea>
<Series>
<telerik:AreaSeries>
<SeriesItems>
<telerik:CategorySeriesItem Y="1" />
<telerik:CategorySeriesItem Y="2" />
<telerik:CategorySeriesItem Y="4" />
<telerik:CategorySeriesItem Y="3" />
</SeriesItems>
</telerik:AreaSeries>
</Series>
</PlotArea>
</telerik:RadHtmlChart>
<script>
function resizeChart() {
//repaint the chart - will play animations
//$find("<%=RadHtmlChart1.ClientID%>").repaint();
//only resizes the chart - will not play animations
$find("<%=RadHtmlChart1.ClientID%>").get_kendoWidget().resize();
}
var TO = false;
$telerik.$(window).resize(function () {
if (TO !== false)
clearTimeout(TO);
TO = setTimeout(resizeChart, 200); //200 is time in miliseconds
});
</script>
</div>
</form>
</body>
</html>
resize timeout idea courtesy of this post javascript resize event firing multiple times while dragging the resize handle
这篇关于响应式 Telerik RadHtmlChart的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
