我有一个通过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 !!!");
});
感谢任何帮助。与此同时,我会继续研究......
感谢, 鲍勃