Как изменить размер telerik radhtmlchart при изменении размера окна
Мы используем Asp.net ретранслятор для динамического отображения нескольких диаграмм telerik на странице.
Существует проблема с размером диаграмм, которые не изменяются в соответствии с размером окна
Как исправить эту проблему.
<pre> <asp:Repeater ID="rptDashboard" runat="server">
<ItemTemplate>
<div style="padding-bottom: 2%;">
<div class="card" style="box-shadow: 4px 4px 10px rgba(0,0,0,0.16);">
<div id="divBar" runat="server" >
<div class="card-header card-dash">
<asp:Label ID="lblBar" runat="server" CssClass="card-dash-title"></asp:Label>
<asp:Button runat="server" ID="btnBar" class="button float-right" Text="View More" />
</div>
<Telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Height="250" Skin="Metro">
<PlotArea>
<Series>
<Telerik:ColumnSeries Name="X" DataFieldY="Y">
<TooltipsAppearance>
<ClientTemplate>#=dataItem.Z# </ClientTemplate>
</TooltipsAppearance>
<LabelsAppearance Visible="true" />
</Telerik:ColumnSeries>
</Series>
<XAxis DataLabelsField="X">
<MajorGridLines Visible="false" />
<MinorGridLines Visible="false" />
</XAxis>
<YAxis>
<MajorGridLines Visible="false" />
<MinorGridLines Visible="false" />
<LabelsAppearance />
</YAxis>
</PlotArea>
<Legend>
<Appearance Visible="false" />
</Legend>
</Telerik:RadHtmlChart>
<div class="row">
<div class="col-md-6">
<asp:Label runat="server" Text="" ID="lblBarText"></asp:Label>
</div>
<div class="col-md-6">
<asp:Label runat="server" Text="" ID="lblBarValue"></asp:Label>
</div>
</div>
</div>
<div id="divPie" runat="server">
<div class="card-header card-dash">
<asp:Label ID="lblPie" runat="server" CssClass="card-dash-title"></asp:Label>
<asp:Button runat="server" ID="btnPie" class="button float-right " Style="cursor: pointer; border: 1px solid transparent; color: white; border-radius: 3px; background-color: #7030a0;" BackColor="#7030a0" Text="View More" />
</div>
<Telerik:RadHtmlChart runat="server" ID="RadHtmlChart2" Height="250" Skin="Metro">
<PlotArea>
<Series>
<Telerik:PieSeries DataFieldY="Y" NameField="X">
<LabelsAppearance>
</LabelsAppearance>
<TooltipsAppearance>
<ClientTemplate>#=dataItem.X# </ClientTemplate>
</TooltipsAppearance>
</Telerik:PieSeries>
</Series>
<YAxis>
</YAxis>
</PlotArea>
<Legend>
<Appearance Position="Right" Visible="true" />
</Legend>
</Telerik:RadHtmlChart>
<div class="row">
<div class="col-md-6">
<asp:Label runat="server" Text="" ID="lblPieText"></asp:Label>
</div>
<div class="col-md-6">
<asp:Label runat="server" Text="" ID="lblPieValue"></asp:Label>
</div>
</div>
</div>
<div id="divDonut" runat="server">
<div class="card-header card-dash">
<asp:Label ID="lblDonut" runat="server" CssClass="card-dash-title"></asp:Label>
<asp:Button runat="server" ID="btnDonut" class="button float-right" Text="View More" />
</div>
<Telerik:RadHtmlChart runat="server" ID="RadHtmlChart3" Height="250" Skin="Metro">
<PlotArea>
<Series>
<Telerik:DonutSeries DataFieldY="Y" NameField="X">
<LabelsAppearance>
</LabelsAppearance>
<TooltipsAppearance>
<ClientTemplate>#=dataItem.X# </ClientTemplate>
</TooltipsAppearance>
</Telerik:DonutSeries>
</Series>
<YAxis>
</YAxis>
</PlotArea>
<Legend>
<Appearance Position="Right" Visible="true" />
</Legend>
</Telerik:RadHtmlChart>
<div class="row">
<div class="col-md-6">
<asp:Label runat="server" Text="" ID="lblDonutText"></asp:Label>
</div>
<div class="col-md-6">
<asp:Label runat="server" Text="" ID="lblDonutValue"></asp:Label>
</div>
</div>
</div>
<div id="divGauge" runat="server">
<div class="card-header card-dash">
<asp:Label ID="lblGauge" runat="server" CssClass="card-dash-title"></asp:Label>
<asp:Button runat="server" ID="btnGauge" class="button float-right" Style="cursor: pointer; border: 1px solid transparent; color: white; border-radius: 3px; background-color: #7030a0;" BackColor="#7030a0" Text="View More" />
</div>
<Telerik:RadRadialGauge runat="server" ID="RadRadialGauge1" Height="250px">
<Pointer Value="50.2">
<Cap Size="0.1" />
</Pointer>
<Scale Min="0" Max="100" MajorUnit="20">
<Labels Format="{0}" />
<Ranges>
<Telerik:GaugeRange Color="#c20000" From="20" To="40" />
<Telerik:GaugeRange Color="#ff7a00" From="40" To="60" />
<Telerik:GaugeRange Color="#ffc700" From="60" To="80" />
<Telerik:GaugeRange Color="#8dcb2a" From="80" To="100" />
</Ranges>
</Scale>
</Telerik:RadRadialGauge>
<div class="row">
<div class="col-md-6">
<asp:Label runat="server" Text="" ID="lblGaugeText"></asp:Label>
</div>
<div class="col-md-6">
<asp:Label runat="server" Text="" ID="lblGaugeValue"></asp:Label>
</div>
</div>
<asp:Label ID="lblGaugeVal" Text="97" runat="server" CssClass="Label1" />
</div>
<div id="divSeries" runat="server">
<div class="card-header card-dash">
<asp:Label ID="lblSeries" runat="server" CssClass="card-dash-title"></asp:Label>
<asp:Button runat="server" ID="btnSeries" class="button float-right" Text="View More" />
</div>
<Telerik:RadHtmlChart runat="server" ID="RadHtmlChart4" Height="250" Skin="Metro">
<PlotArea>
<%-- <Series>
<Telerik:ColumnSeries DataFieldY="Y1" Name="">
<TooltipsAppearance DataFormatString="{0}" />
<LabelsAppearance Visible="true" />
</Telerik:ColumnSeries>
<Telerik:ColumnSeries DataFieldY="Y2" Name="" >
<TooltipsAppearance DataFormatString="{0}" />
<LabelsAppearance Visible="true" />
</Telerik:ColumnSeries>
<Telerik:ColumnSeries DataFieldY="Y3" Name="">
<TooltipsAppearance DataFormatString="{0}" />
<LabelsAppearance Visible="true" />
</Telerik:ColumnSeries>
</Series>--%>
<XAxis DataLabelsField="X">
<MajorGridLines Visible="false" />
<MinorGridLines Visible="false" />
</XAxis>
<YAxis>
<MajorGridLines Visible="false" />
<MinorGridLines Visible="false" />
</YAxis>
</PlotArea>
<Legend>
<Appearance Position="Bottom">
</Appearance>
</Legend>
</Telerik:RadHtmlChart>
<div class="row">
<div class="col-md-6">
<asp:Label runat="server" Text="" ID="lblSeriesText"></asp:Label>
</div>
<div class="col-md-6">
<asp:Label runat="server" Text="" ID="lblSeriesValue"></asp:Label>
</div>
</div>
</div>
<div id="divLine" runat="server">
<div class="card-header card-dash">
<asp:Label ID="lblLine" runat="server" CssClass="card-dash-title"></asp:Label>
<asp:Button runat="server" ID="btnLine" class="button float-right" Text="View More" />
</div>
<Telerik:RadHtmlChart runat="server" ID="RadHtmlChart5" Height="250px" Skin="Metro">
<PlotArea>
<Series>
<Telerik:LineSeries DataFieldY="Y1" Name="2016">
<LabelsAppearance Visible="false">
</LabelsAppearance>
</Telerik:LineSeries>
<Telerik:LineSeries DataFieldY="Y2" Name="2017">
<LabelsAppearance Visible="false">
</LabelsAppearance>
</Telerik:LineSeries>
<Telerik:LineSeries DataFieldY="Y3" Name="2018">
<LabelsAppearance Visible="false">
</LabelsAppearance>
</Telerik:LineSeries>
</Series>
<XAxis DataLabelsField="X">
<MajorGridLines Visible="false" />
<MinorGridLines Visible="false" />
</XAxis>
<YAxis>
<MajorGridLines Visible="false" />
<MinorGridLines Visible="false" />
</YAxis>
</PlotArea>
</Telerik:RadHtmlChart>
<div class="row">
<div class="col-md-6">
<asp:Label runat="server" Text="" ID="lblLineText"></asp:Label>
</div>
<div class="col-md-6">
<asp:Label runat="server" Text="" ID="lblLineValue"></asp:Label>
</div>
</div>
</div>
<div id="divStacked" runat="server">
<div class="card-header card-dash">
<asp:Label ID="lblStacked" runat="server" CssClass="card-dash-title"></asp:Label>
<asp:Button runat="server" ID="btnStacked" class="button float-right" Text="View More" />
</div>
<Telerik:RadHtmlChart runat="server" ID="RadHtmlChart6" Height="250px" Skin="Metro">
<PlotArea>
<Series>
<Telerik:ColumnSeries DataFieldY="Y1" Stacked="true" Name="">
<LabelsAppearance Visible="true" Position="Center">
<ClientTemplate>#=dataItem.Y1# </ClientTemplate>
</LabelsAppearance>
<TooltipsAppearance Visible="true">
<ClientTemplate>#=dataItem.X1# </ClientTemplate>
</TooltipsAppearance>
</Telerik:ColumnSeries>
<Telerik:ColumnSeries DataFieldY="Y2" Stacked="true" Name="">
<LabelsAppearance Visible="true" Position="Center">
<ClientTemplate>#=dataItem.Y2# </ClientTemplate>
</LabelsAppearance>
<TooltipsAppearance Visible="true">
<ClientTemplate>#=dataItem.X2# </ClientTemplate>
</TooltipsAppearance>
</Telerik:ColumnSeries>
</Series>
<XAxis DataLabelsField="X">
<MajorGridLines Visible="false" />
<MinorGridLines Visible="false" />
<LabelsAppearance Visible="true"></LabelsAppearance>
</XAxis>
<YAxis>
<MajorGridLines Visible="false" />
<MinorGridLines Visible="false" />
</YAxis>
</PlotArea>
<Legend>
<Appearance Position="Bottom" Visible="true" />
</Legend>
</Telerik:RadHtmlChart>
<div class="row">
<div class="col-md-6">
<asp:Label runat="server" Text="" ID="lblStackedText"></asp:Label>
</div>
<div class="col-md-6">
<asp:Label runat="server" Text="" ID="lblStackedValue"></asp:Label>
</div>
</div>
</div>
<div id="divRepeater" runat="server">
<div class="card-header card-dash">
<asp:Label ID="lblRepeater" runat="server" CssClass="card-dash-title"></asp:Label>
<asp:Button runat="server" ID="btnRepeater" class="button float-right" Text="View More" />
</div>
<div class="row">
<asp:Repeater ID="rptRepeater" runat="server">
<ItemTemplate>
<div class="col-sm-2">
<div class='<%# Eval("CSS")%>'>
<div class="pad-all text-center">
<span class="text-3x text-thin"><%# Eval("X")%></span>
<p><%# Eval("Y")%></p>
</div>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
Что я уже пробовал:
window.onresize = function () {
$find("<%=RadHtmlChart1.ClientID%>").get_kendoWidget().resize();
}
Herman<T>.Instance
установите ширину и высоту в классе css в процентах. Чем он будет автоматически масштабироваться путем изменения размера