Telerik UI ASP.NET MVC - 图表渲染问题

Question

我有一个通过 Telerik MVC 包装器呈现的条形图。我正在尝试增加图表的 height，并让图表填满整个区域。这就是我遇到问题的地方。

调整 width 的大小似乎开箱即用（据我所知，没有额外的 javascript 代码来处理这个问题）。

这是图表：

以及我的 cshtml 页面中的图表定义：

@* 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()
 .Name("chart")
 .Theme("Material")
 //.Title("Comparison Chart")
 .Legend(legend => legend.Position(ChartLegendPosition.Top))
 .ChartArea(chartArea => chartArea.Background("transparent"))
 .Series(series =>
 {
  series.Bar(Model.Where(m => !m.SubTitle.Equals("ALL", StringComparison.OrdinalIgnoreCase)).Select(m => (double)m.Utilisation))
   .Name(Settings.Whatif.SummaryCurrentExposureName)
   .Color("#5cb85c")
   .Labels(labels => labels.Visible(true).Format("{0:,0}"))
   .Spacing(0)
   .Gap(2);

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

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

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

我试图在 JavaScript 中捕获 resize 事件，但它没有命中此事件：

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

感谢任何帮助。同时，我会继续研究...

谢谢，鲍勃

Answer 1

事实证明，使用 .ChartArea() 属性作为高度是可行的。

所以导致图表完全呈现到指定高度的线是：

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

Telerik UI ASP.NET MVC - 图表渲染问题

Telerik UI ASP.NET MVC - issues with chart rendering

kendo-grid

kendo-asp.net-mvc

telerik-mvc