-1

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

2 回答 2

0

如果图表的尺寸发生变化，您需要调用图表的 repaint() 方法（通常在 window.resize 事件中，或代码中任何其他合适的位置）：http ://www.telerik.com/support/code-库/radhtmlchart-in-a-responsive-web-page。

这是一个例子：

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

调整大小超时想法由这篇文章提供javascript resize 事件在拖动调整大小句柄时多次触发

于 2015-06-23T13:11:05.350 回答
-1

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

于 2015-06-19T17:37:48.740 回答