asp.net-mvc-3 - 如何使用 dotnet highcharts dll 在 MVC3 中显示 HighCharts？

Question

我正在尝试一种将数据绑定(bind)到饼图的方法

  Public ActionResult Charts
  {
      Highcharts chart = new Highcharts("chart")
        .InitChart(new Chart { PlotShadow = false })
        .SetTitle(new Title { Text = "Browser market shares at a specific website, 2010" })
        .SetTooltip(new Tooltip { Formatter = "function() { return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %'; }" })
        .SetPlotOptions(new PlotOptions
        {
            Pie = new PlotOptionsPie
            {
                AllowPointSelect = true,
                Cursor = Cursors.Pointer,
                DataLabels = new PlotOptionsPieDataLabels
                {
                    Color = ColorTranslator.FromHtml("#000000"),
                    ConnectorColor = ColorTranslator.FromHtml("#000000"),
                    Formatter = "function() { return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %'; }"
                }
            }
        })
        .SetSeries(new Series
        {
            Type = ChartTypes.Pie,
            Name = "Browser share",
            Data = new Data(new object[]
                                   {
                                       new object[] { "Firefox", 45.0 },
                                       new object[] { "IE", 26.8 },
                                       new DotNet.Highcharts.Options.Point
                                       {
                                           Name = "Chrome",
                                           Y = 12.8,
                                           Sliced = true,
                                           Selected = true
                                       },
                                       new object[] { "Safari", 8.5 },
                                       new object[] { "Opera", 6.2 },
                                       new object[] { "Others", 0.7 }
                                   })
                             });
        }
    }

    public JsonResult GetData()
    {
        int Param1;
        Param1 = 1;     
        var reports = db.ExecuteStoreQuery<ResourceReports>("ResourceReports @EmployeeID", new SqlParameter("@EmployeeID", Param1)).ToList();
        return Json(reports, JsonRequestBehavior.AllowGet);
    }

我要更换

    .SetSeries(new Series
    {
        Type = ChartTypes.Pie,
        Name = "Browser share",
        Data = new Data(new object[]
                                   {
                                       new object[] { "Firefox", 45.0 },
                                       new object[] { "IE", 26.8 },
                                       new DotNet.Highcharts.Options.Point
                                       {
                                           Name = "Chrome",
                                           Y = 12.8,
                                           Sliced = true,
                                           Selected = true
                                       },
                                       new object[] { "Safari", 8.5 },
                                       new object[] { "Opera", 6.2 },
                                       new object[] { "Others", 0.7 }
                                   })
        });
    }

使用我的GetData()我该如何做到这一点，.SetSeries中的数据应该是我在GetData方法中返回的数据

Answer 1

看来您正在使用 Dotnet.Highcharts。您可以创建一个Series 列表和一个Point 列表。

List<Series> mySeries = new List<Series>();
List<Point> myPoints = new List<Point>();

我将循环遍历您需要创建和生成点数据的每个系列，如下所示:

myPoints.Add(new Point {
    X = (detailRec.RecordTime - new DateTime(1970, 1, 1, 0, 0, 0)).TotalMilliseconds,
    Y = detailRec.TotalCount
});

然后您可以使用其数据的点列表来创建系列本身，如下所示:

mySeries.Add(new Series{
  Name = distinctDistrict.Name,
  Data = new Data(myPoints.ToArray())
});

然后要设置系列，您可以使用以下语句:

.SetSeries(mySeries.Select(s => new Series { 
  Name = s.Name, 
  Data = s.Data 
}).ToArray())

如果您使用 Visual Studio 中的对象浏览器，您可以看到 Series 和 Point 类的其他属性和方法。要使用上述代码，您必须包含以下 using 语句:

using DotNet.Highcharts;
using DotNet.Highcharts.Enums;
using DotNet.Highcharts.Helpers;
using DotNet.Highcharts.Options;
using Point = DotNet.Highcharts.Options.Point;