C# 从linq查询填充highchart图

C# 从linq查询填充highchart图,c#,asp.net-mvc,linq,highcharts,C#,Asp.net Mvc,Linq,Highcharts,我试图用数据库中的数据填充图表。我使用的是实体框架,对asp.net还比较陌生 我试图做的是从linq查询填充图表 var totals = from s in db.ClassInstanceDetails.Include("ClassInstance") where s.ClassInstance.ClassID == 2 group s by s.ClassInstance.Date into grouped

我试图用数据库中的数据填充图表。我使用的是实体框架,对asp.net还比较陌生

我试图做的是从linq查询填充图表

 var totals = from s in db.ClassInstanceDetails.Include("ClassInstance")
                 where s.ClassInstance.ClassID == 2
                    group s by s.ClassInstance.Date into grouped
                    select new
                    {
                        CIDate = grouped.Key,
                        TotalStudentsInClass = grouped.Count(s => s.Attendance)
                    };
linq查询工作正常,它对classinstance中的所有学生进行计数、分组和计数。我的问题是如何提取数据并将其放入图表中。调试时,我可以看到totals变量是

{System.Data.Objects.ObjectQuery<<>f__AnonymousType0<System.DateTime,int>>}
这是一个很好的查询,它发现有多少学生参加了一个特定的班级实例。我试着用海图把这些数据放到一个折线图中。我尝试将linq结果分成两个数组,一个数组包含日期,另一个数组包含TotalStudentsInClass值,但由于类型不同,所以运气不佳???这样做对吗

我在网上找到的例子是从一个数组中提取的

.SetSeries(new[]
                       {
                           new Series { Name = "Tokyo", Data = new Data(ChartsData.TokioData) },
                           new Series { Name = "New York", Data = new Data(ChartsData.NewYorkData) },
                           new Series { Name = "Berlin", Data = new Data(ChartsData.BerlinData) },
                           new Series { Name = "London", Data = new Data(ChartsData.LondonData) }
                       }
数据来自一个对象

public static object[] TokioData = new object[] { 7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6 };
我曾尝试将我的linq查询运行到一个对象中,但这给我带来的错误比我所知道的要多


任何帮助都将不胜感激

您使用的是Highcharts.Net吗?如果是这样的话,我不知道我能帮上多少忙(我只是手工做的,创建自己的对象并转换成JSON等,我发现这让我可以完全控制,尽管需要付出更多的努力) 无论如何,这通常很大程度上取决于你的X轴需要如何表现。。。它看起来就像是离散的日期时间值(不是自动顺序的),因此您的对象数组可能需要由X值和Y值组成,而不仅仅是Y值,就像您在那里看到的那样

下一部分实际上取决于您的实现如何工作,因此请原谅伪代码。。。 您需要一个二维阵列: 例如:数据=[[1,1],[2,5],[3,4]…]

或者更具体一点:我使用一个具有X和Y属性的类(除其他外),但是您可以尝试匿名类型吗? 例如[{x=1,y=1},{x=2,y=5},{x=3,y=4}…]等等

这有帮助吗? 注意:您可能想了解一下如何转换x轴的日期时间值-我必须根据历元等图表计算刻度

public static Highcharts TimeSeriesZoomable(Series[] Series, Number MinRange, Number PointInterval, DateTime PointStartDate, AxisTypes XAxisType = AxisTypes.Datetime, string Title = "", string SubTitle = "", string XAxisTitle = "", string YAxisTitle = "", string ToolTipFormat = "", string YAxisLabel = "")
    {
        Highcharts chart = new Highcharts("chart")
            .SetOptions(new GlobalOptions { Global = new Global { UseUTC = false } })
            .InitChart(new Chart { ZoomType = ZoomTypes.X, SpacingRight = 20, DefaultSeriesType = ChartTypes.Area, Height = 300, BorderRadius = 0 })
            .SetTitle(new Title { Text = Title })
            .SetSubtitle(new Subtitle { Text = SubTitle })
            .SetXAxis(new XAxis
            {
                Type = XAxisType,
                MinRange = MinRange,
                Title = new XAxisTitle { Text = XAxisTitle }
            })
            .SetYAxis(new YAxis
            {
                Title = new YAxisTitle { Text = YAxisTitle },
                Min = 0.6,
                StartOnTick = false,
                EndOnTick = false,
                Labels = new YAxisLabels
                {
                    Formatter = @"function() { return this.value +' " + YAxisLabel + "';}"
                }
            })
            .SetTooltip(new Tooltip { Shared = true/*, Formatter = @"function() { return ''+ this.x +' - '+ this.y +' " + ToolTipFormat + "'; }" */})
            .SetLegend(new Legend { Enabled = true, VerticalAlign = VerticalAligns.Top })
            .SetPlotOptions(new PlotOptions
            {
                Line = new PlotOptionsLine
                {
                    LineWidth = 3,
                    Marker = new PlotOptionsLineMarker
                    {
                        Enabled = false,
                        States = new PlotOptionsLineMarkerStates
                        {
                            Hover = new PlotOptionsLineMarkerStatesHover
                            {
                                Enabled = true,
                                Radius = 5
                            }
                        }
                    },
                    Shadow = false,
                    States = new PlotOptionsLineStates { Hover = new PlotOptionsLineStatesHover { LineWidth = 3 } },
                    PointInterval = PointInterval,
                    PointStart = new PointStart(PointStartDate)
                },
                Spline = new PlotOptionsSpline
                {
                    LineWidth = 3,
                    Marker = new PlotOptionsSplineMarker
                    {
                        Enabled = false,
                        States = new PlotOptionsSplineMarkerStates
                        {
                            Hover = new PlotOptionsSplineMarkerStatesHover
                            {
                                Enabled = true,
                                Radius = 5
                            }
                        }
                    },
                    Shadow = false,
                    States = new PlotOptionsSplineStates { Hover = new PlotOptionsSplineStatesHover { LineWidth = 3 } },
                    PointInterval = PointInterval,
                    PointStart = new PointStart(PointStartDate)
                },
                Area = new PlotOptionsArea
                {
                    //FillColor = new BackColorOrGradient(new Gradient
                    //{
                    //    LinearGradient = new[] { 0, 0, 0, 300 },
                    //    Stops = new object[,] { { 0, "rgb(116, 116, 116)" }, { 1, Color.Gold } }
                    //}),
                    LineWidth = 1,
                    Marker = new PlotOptionsAreaMarker
                    {
                        Enabled = false,
                        States = new PlotOptionsAreaMarkerStates
                        {
                            Hover = new PlotOptionsAreaMarkerStatesHover
                            {
                                Enabled = true,
                                Radius = 5
                            }
                        }
                    },
                    Shadow = false,
                    States = new PlotOptionsAreaStates { Hover = new PlotOptionsAreaStatesHover { LineWidth = 1 } },
                    PointInterval = PointInterval,
                    PointStart = new PointStart(PointStartDate)
                }
            })
            .SetSeries(Series);
        return chart;
    }
图表数据

public static Series GetTimeSeriesData(IQueryable<YourModel> model, ChartTypes ChartType)
    {
        List<Series> Series = new List<Series>();

        var chartSeries = model.GroupBy(x => x.Name)
                        .Select(g => new
                        {
                            Name = g.Key,
                            Data = g.Select(x => x.Value).ToArray()
                        }).ToArray();

        foreach (var item in chartSeries)
        {
            object[] data = item.Data.Cast<object>().ToArray();
            Series localSeries = new Series { Name = item.Name, Data = new Data(data), Type = ChartType };
            Series.Add(localSeries);
        }

        return Series;
    }
公共静态系列GetTimeSeriesData(IQueryable模型,ChartTypes ChartType)
{
列表系列=新列表();
var chartSeries=model.GroupBy(x=>x.Name)
.选择(g=>new
{
名称=g.键,
Data=g.Select(x=>x.Value).ToArray()
}).ToArray();
foreach(chartSeries中的var项)
{
object[]data=item.data.Cast().ToArray();
Series localSeries=newseries{Name=item.Name,Data=newdata(Data),Type=ChartType};
Series.Add(localSeries);
}
返回序列;
}
用法

IQueryable模型;
ChartData ChartData=新的ChartData();
Highcharts图表=新的HighChart(“图表时间序列”);
尝试
{
model=db.ClassInstanceDetails.AsQueryable();
chartData=GetTimeSeriesData(模型,ChartTypes.Line);
chart=TimeSeriesZoomable(chartData.ToArray(),另一个_选项);
}
捕获(例外e)
{
}

图表的完整示例:

您使用的是dotNetHighCharts吗?如果您使用dotNetHighCharts dll,我有TimeSeriesGoomable的完整示例,如果您需要,我可以在这里编写。也许它给你指明了方向。嗨@AliRızaAdıyahşi那太好了,我非常感谢!你好@baldric,是的,我正在使用highcharts.net。我对发展还是个新手,所以有点挣扎。
public static Series GetTimeSeriesData(IQueryable<YourModel> model, ChartTypes ChartType)
    {
        List<Series> Series = new List<Series>();

        var chartSeries = model.GroupBy(x => x.Name)
                        .Select(g => new
                        {
                            Name = g.Key,
                            Data = g.Select(x => x.Value).ToArray()
                        }).ToArray();

        foreach (var item in chartSeries)
        {
            object[] data = item.Data.Cast<object>().ToArray();
            Series localSeries = new Series { Name = item.Name, Data = new Data(data), Type = ChartType };
            Series.Add(localSeries);
        }

        return Series;
    }
IQueryable<YourModel> model;
ChartData chartData = new ChartData();
Highcharts chart = new HighChart("chart_time_series");

try
{
    model = db.ClassInstanceDetails.AsQueryable();
    chartData = GetTimeSeriesData(model, ChartTypes.Line);
    chart = TimeSeriesZoomable(chartData.ToArray(), another_options);
}
catch (Exception e)
{
}