如何使用Kendo UI实现垂直条形图？

要将Kendo Chart的水平条形图改为垂直样式，只需把代码中的series.Bar()替换为series.Column()即可。

修改后的完整代码：

@(Html.Kendo().Chart()
                .Name("chart")
                 .Title("Last 3 Month Emergency Assistance Status Summery")
                .Legend(legend => legend.Position(ChartLegendPosition.Bottom).Visible(true))
                .ChartArea(chartArea => chartArea
                .Background("transparent")
                )
                .Series(series =>
                {
                    series.Column(MonthwiseDataList.Select(x => x.Last3MonthTotalApproved).ToArray()).Name("Total Approved");
                    series.Column(MonthwiseDataList.Select(x => x.Last3MonthTotalDenied).ToArray()).Name("Total Denied");
                })
                .CategoryAxis(axis => axis.Name("label-axis").Labels(labels => labels.Rotation("auto")).Categories(MonthwiseDataList.Select(x => x.ApplicationDate.ToString("MMM-yyyy")).ToArray()).MinorGridLines(x => x.Visible(false)))
                .ValueAxis(axis => axis.Numeric("StatusCount").Min(0).Max(MonthwiseDataList.Max(x => x.Total) + 1).Visible(true).Title("").Color("#dcdee8"))
                .Tooltip(tooltip => tooltip
                .Visible(true)
                .Template("#= series.name #: #= value #")
                )
)

说明 #

Kendo UI Chart里，Bar()方法默认生成水平条形图，Column()方法则对应垂直柱状图，替换后就能实现你需要的垂直布局效果。

内容的提问来源于stack exchange，提问作者Mizanur Rahaman