盾ui图表:动态生成系列? [英] shield ui chart: generate series dynamically?

问题描述

是否可以在不提前知道图表中有多少个序列的情况下向图表添加序列?例如，我想在年份的可变选择中按月在X轴上绘制图形.每年都会是一个系列.

Is there a way to add series to a chart without knowing ahead of time how many series will be in it? For example I want to graph something on the X axis by month over a variable selection of years. Each year would be a series.

我考虑过在按年分组时绑定到IEnumerable，并在每个分组项上创建一个序列，但是我无法真正设想代码.

I thought about binding to IEnumerable while grouping by year--and creating a series on each group item, but I couldn't really envision the code.

推荐答案

我将其与自定义帮助程序(HtmlHelper扩展方法)一起使用.我改编自 http://demos.shieldui.com/aspnet/aspnet-chart/programmatic-chart-creation ，但该示例适用于ASP.NET Web表单.我在做MVC.我的解决方案涉及在助手中使用ChartBuilder<>对象.

I got this to work with a custom helper (HtmlHelper extension method). I adapted an example from http://demos.shieldui.com/aspnet/aspnet-chart/programmatic-chart-creation, but that example is for ASP.NET web forms. I'm doing MVC. My solution involved using the ChartBuilder<> object within a helper.

public static class ChartExtensions
{
    public static ChartBuilder<PropertyPivotAverageAmountPerMonth_Result> AnnualComparison(this HtmlHelper html, int id)
    {
        MyDatabaseEntities db = new MyDatabaseEntities();
        var results = db.PropertyPivotAverageAmountPerMonth(id);
        ChartBuilder<PropertyPivotAverageAmountPerMonth_Result> chart = new ChartBuilder<PropertyPivotAverageAmountPerMonth_Result>(html, results);

        chart.AxisX(axisX => axisX.CategoricalValues("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"));
        chart.PrimaryHeader(header => header.Text("Annual Cost Comparisons"));


        foreach (var year in results)
        {
            chart.DataSeries(s => s.Line()
                .CollectionAlias(year.Year.ToString())
                .Data(new object[]
                    {
                        new { x=0, y=year.C1 },
                        new { x=1, y=year.C2 },
                        new { x=2, y=year.C3 },
                        new { x=3, y=year.C4 },
                        new { x=4, y=year.C5 },
                        new { x=5, y=year.C6 },
                        new { x=6, y=year.C7 },
                        new { x=7, y=year.C8 },
                        new { x=8, y=year.C9 },
                        new { x=9, y=year.C10 },
                        new { x=10, y=year.C11 },
                        new { x=11, y=year.C12 }
                    }));
        }
        return chart;
    }

这篇关于盾ui图表:动态生成系列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！