Telerik UI ASP.NET MVC - Probleme mit Diagramm-Rendering

Question

Ich habe ein Balkendiagramm, das über den Telerik MVC-Wrapper gerendert wird. Ich versuche, die height des Diagramms zu erhöhen, und das Diagramm füllen Sie den gesamten Bereich aus. Hier habe ich Probleme.

Größenanpassung der width scheint zu funktionieren out of the box (soweit ich sehen kann, gibt es keine zusätzlichen Javascript-Code, um dies zu handhaben).

Hier ist das Diagramm:

und die Diagrammdefinition in meiner cshtml Seite:

@* Comparison chart *@ 
 
@(Html.Kendo().Window() 
 
.Name("window") 
 
.Title("Comparison") 
 
.HtmlAttributes(new { @class = "chart-window " + guid }) 
 
.Visible(false) 
 
.Draggable() 
 
.Resizable() 
 
.Width(700) 
 
.Height(600) 
 
.Actions(actions => actions.Maximize().Close()) 
 
.Content(@<text> 
 
<div class="chart-wrapper"> 
 
@(Html.Kendo().Chart() 
 
\t .Name("chart") 
 
\t .Theme("Material") 
 
\t //.Title("Comparison Chart") 
 
\t .Legend(legend => legend.Position(ChartLegendPosition.Top)) 
 
\t .ChartArea(chartArea => chartArea.Background("transparent")) 
 
\t .Series(series => 
 
\t { 
 
\t \t series.Bar(Model.Where(m => !m.SubTitle.Equals("ALL", StringComparison.OrdinalIgnoreCase)).Select(m => (double)m.Utilisation)) 
 
\t \t \t .Name(Settings.Whatif.SummaryCurrentExposureName) 
 
\t \t \t .Color("#5cb85c") 
 
\t \t \t .Labels(labels => labels.Visible(true).Format("{0:,0}")) 
 
\t \t \t .Spacing(0) 
 
\t \t \t .Gap(2); 
 

 
\t \t if (Model.Any(a => a.WhatIfRun)) 
 
\t \t { 
 
\t \t \t series.Bar(Model.Where(m => !m.SubTitle.Equals("ALL", StringComparison.OrdinalIgnoreCase)).Select(m => (double)m.WhatifExposure)) 
 
\t \t \t \t .Name("What-if") 
 
\t \t \t \t .Color("#222222") 
 
\t \t \t \t .Labels(labels => labels.Visible(true).Format("{0:,0}")); 
 
\t \t } 
 

 
\t }) 
 
\t .CategoryAxis(axis => axis 
 
\t \t .Name("label-axis") 
 
\t \t .Categories(Model.Where(m => !m.SubTitle.Equals("ALL", StringComparison.OrdinalIgnoreCase)).Select(m => m.Title + "\n" + m.SubTitle)) 
 

 
\t) 
 
\t .ValueAxis(axis => axis 
 
\t \t .Numeric() 
 
\t \t .Labels(labels => labels.Format("{0:,0}").Rotation(-90)) 
 
\t \t .Line(line => line.Visible(false)) 
 
\t \t .AxisCrossingValue(0, int.MinValue) 
 
\t) 
 
\t .Tooltip(tooltip => tooltip 
 
\t \t .Visible(true) 
 
\t \t .Format("{0:,0}") 
 
\t \t .Template("#= series.name #: #= kendo.toString(value, 'n0') #") 
 
\t) 
 
) 
 
</div> 
 
</text>) 
 
)

Ich habe versucht, das resize Ereignis in JavaScript erfassen , aber es trifft dieses Ereignis nicht:

$(".chart-wrapper").resize(function() 
{ 
    alert("RESIZED !!!"); 
}); 

Jede Hilfe wird geschätzt. In der Zwischenzeit wird behalte ich die Erforschung ...

Dank, Bob

Answer 1

Es stellte sich heraus, dass die .ChartArea() Eigenschaft für die Höhe verwenden ist, was funktioniert.

So ist die Linie, die das Diagramm verursacht vollständig auf die Höhe zu machen, ist angegeben:

.ChartArea(chartArea => chartArea.Background("transparent").Height(600))