响应式Telerik RadHtmlChart_Telerik_Telerik Charting_Radhtmlchart

响应式Telerik RadHtmlChart

telerik

响应式Telerik RadHtmlChart,telerik,telerik-charting,radhtmlchart,Telerik,Telerik Charting,Radhtmlchart,我用的是Telerik RadHtml图表，我需要的图表应该根据屏幕分辨率自动调整大小，如何做到这一点。我尝试将宽度和高度设置为自动，但这不起作用。我的图表包含在下面的数据列表我的代码块中 <asp:UpdatePanel ID="pnlContainer" runat="server" UpdateMode="Conditional"> <ContentTemplate> <div id="wrapper

我用的是Telerik RadHtml图表，我需要的图表应该根据屏幕分辨率自动调整大小，如何做到这一点。我尝试将宽度和高度设置为自动，但这不起作用。我的图表包含在下面的数据列表我的代码块中

 <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>

Telerik Controls RadGrid和RadHTMLChart需要在每个按百分比调整大小的容器上设置高度和宽度，以便按百分比调整大小。您必须将高度=100%宽度=100%添加到包含这些项目的所有容器中，一直添加到根

如果图表的维度发生变化（通常在window.resize事件中或代码中的任何其他合适位置），则需要调用图表的repaint（）方法：

以下是一个例子：

<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>


html、正文、表单
{
身高：100%；
保证金：0；
填充：0；
}
.chartContainer
{
宽度：50%；
身高：50%；
边框：2倍纯红；
}
对于HtmlChart，这是不够的。虽然对于HTML来说是正确的，但是HtmlChart需要一些脚本，请参见我的答案。通常，图表是静态的-以Excel为例，如果调整程序窗口的大小，图表不会调整大小。