Telerik UI ASP.NET MVC - 图表呈现问题

时间:2016-05-04 19:12:41

标签: kendo-grid kendo-asp.net-mvc telerik-mvc

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

调整width的大小似乎开箱即用(据我所知,没有额外的javascript代码可以处理)。

这是图表:

enter image description here

以及我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 !!!");
});

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

感谢, 鲍勃

1 个答案:

答案 0 :(得分:0)

事实证明,使用MYDIR=$(mktemp -d -t xxxxxx) ln -sf /usr/local/libfoo.a ${MYDIR}/libfoo.a clang -o foo -L${MYDIR} -l foo rm -rf ${MYDIR} 属性作为高度是有效的。

因此,使图表完全渲染到指定高度的线是:

.ChartArea()

enter image description here