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

サイズ変更ハンドルをドラッグしているときに、この投稿のサイズ変更イベントが複数回発生するサイズ変更タイムアウトのアイデア

于 2015-06-23T13:11:05.350 に答える
-1

Telerik コントロール RadGrid と RadHTMLChart は、パーセンテージでサイズを変更するために、パーセンテージでサイズを変更するすべてのコンテナーに高さと幅が必要です。これらのアイテムを保持するすべてのコンテナーに、ルートまでずっと、Height=100% Width=100% を追加する必要があります。

于 2015-06-19T17:37:48.740 に答える