HighCharts - MVC 3数据库

Question

我正在使用Visual Studio 2010中的DotNet.Highcharts。我正在创建一个MVC 3 Web应用程序。我可以通过静态分配数据来获得HighCharts的工作。我希望能够将数据库中的数据发送到HighCharts进行显示。

我可以创建一个类来控制数据，然后将该类发送到HighCharts？如果是这样，谁能告诉我如何做到这一点？此外，如果有人有一个工作项目来证明这一点，并愿意分享，那就太棒了。

我看到有人在另一个问题中发布了下面的类。但是，我不知道如何使用它或将该类发送到HighCharts脚本。任何帮助将不胜感激。

class HighChartsPoint 
{ 
    public double x {set; get;} 
    public double y {set; get;} 
    public string color {set; get;} 
    public string id {set; get;} 
    public string name {set; get;} 
    public bool sliced {set; get;} 
} 

编辑

好，我建立一个Web应用程序，以显示来自太阳的监测收集的数据信息。所以它将由功率，电压，电流等组合，逆变器等组成。我相信这将是X和Y数据。但是，如果通过一个对象数组进行编码会更简单，那我就是为了它。我希望能回答你的问题。以下是我对数据的模型类。我没有完全做到。我仍然需要添加验证并更改链接到其他表的字段。要将power_string类中的combiner_id字段链接到power_combiner类中的id字段，我将使用：public virtual power_combiner combiner_id {get;组; }

public class AESSmartEntities : DbContext 
{ 
    public DbSet<power_combiner> PowerCombiners { get; set; } 
    public DbSet<power_combinerhistory> PowerCombinerHistorys { get; set; } 
    public DbSet<power_coordinator> PowerCoordinators { get; set; } 
    public DbSet<power_installation> PowerInstallations { get; set; } 
    public DbSet<power_inverter> PowerInverters { get; set; } 
    public DbSet<power_string> PowerStrings { get; set; } 
    public DbSet<power_stringhistory> PowerStringHistorys { get; set; } 
} 

public class power_combiner 
{ 
    [ScaffoldColumn(false)] 
    public int id { get; set; } 

    [Required] 
    [DisplayName("Name")] 
    [StringLength(128, ErrorMessage = "The 'name' cannot be longer than 128 characters")] 
    public string name { get; set; } 

    [Required] 
    [DisplayName("Mac Address")] 
    [StringLength(24, ErrorMessage = "The 'mac' cannot be longer than 24 characters")] 
    public string mac { get; set; } 

    [DisplayName("Location")] 
    [StringLength(512, ErrorMessage = "The 'name' cannot be longer than 512 characters")] 
    public string location { get; set; } 

    [DisplayName("power_installation")] 
    public int? installation_id { get; set; } 

    [DisplayName("power_inverter")] 
    public int? inverter_id { get; set; } 

    [DisplayName("power_coordinator")] 
    public int coordinator_id { get; set; } 

    [DisplayName("Installation ID")] 
    public virtual power_installation installation_ { get; set; } 

    [DisplayName("Inverter ID")] 
    public virtual power_inverter inverter_ { get; set; } 

    [DisplayName("Coordinator ID")] 
    public virtual power_coordinator coordinator_ { get; set; } 
} 

public class power_combinerhistory 
{ 
    [ScaffoldColumn(false)] 
    public int id { get; set; } 

    [Required] 
    [DisplayName("Voltage")] 
    public double voltage { get; set; } 

    [Required] 
    [DisplayName("Current")] 
    public double current { get; set; } 

    [Required] 
    [DisplayName("Temperature")] 
    public double temperature { get; set; } 

    [Required] 
    [DisplayName("DateTime")] 
    public DateTime recordTime { get; set; } 

    [Required] 
    [DisplayName("power_combiner")] 
    public int combiner_id { get; set; } 

    [DisplayName("Combiner ID")] 
    public virtual power_combiner combiner_ { get; set; } 
} 

public class power_coordinator 
{ 
    [ScaffoldColumn(false)] 
    public int id { get; set; } 

    [Required] 
    [DisplayName("Mac Address")] 
    [StringLength(24, ErrorMessage = "The 'mac' cannot be longer than 24 characters")] 
    public string mac { get; set; } 

    [Required] 
    [DisplayName("Report Time")] 
    public DateTime reportTime { get; set; } 

    [Required] 
    [DisplayName("Command")] 
    [StringLength(2, ErrorMessage = "The 'command' cannot be longer than 2 characters")] 
    public string command { get; set; } 

    [Required] 
    [DisplayName("Collect Time")] 
    public int collect_time { get; set; } 

    [Required] 
    [DisplayName("Interval Time")] 
    public int interval_time { get; set; } 

    [DisplayName("power_installation")] 
    public int? installation_id { get; set; } 

    [DisplayName("Installation ID")] 
    public virtual power_installation installation_ { get; set; } 
} 

public class power_installation 
{ 
    [ScaffoldColumn(false)] 
    public int id { get; set; } 

    [Required] 
    [DisplayName("Name")] 
    [StringLength(128, ErrorMessage = "The 'name' cannot be longer than 128 characters")] 
    public string name { get; set; } 

    [Required] 
    [DisplayName("UUID")] 
    [StringLength(36, ErrorMessage = "The 'uuid' cannot be longer than 36 characters")] 
    public string uuid { get; set; } 

    [DisplayName("Description")] 
    [StringLength(512, ErrorMessage = "The 'description' cannot be longer than 512 characters")] 
    public string description { get; set; } 

    [DisplayName("History Time")] 
    public int historytime { get; set; } 
} 

public class power_inverter 
{ 
    [ScaffoldColumn(false)] 
    public int id { get; set; } 

    [Required] 
    [DisplayName("Name")] 
    [StringLength(128, ErrorMessage = "The 'name' cannot be longer than 128 characters")] 
    public string name { get; set; } 

    [Required] 
    [DisplayName("UUID")] 
    [StringLength(36, ErrorMessage = "The 'uuid' cannot be longer than 36 characters")] 
    public string uuid { get; set; } 

    [Required] 
    [DisplayName("Location")] 
    [StringLength(512, ErrorMessage = "The 'location' cannot be longer than 512 characters")] 
    public string location { get; set; } 

    [DisplayName("power_installation")] 
    public int installation_id { get; set; } 

    [DisplayName("power_coordinator")] 
    public int coordinator_id { get; set; } 

    [DisplayName("Installation ID")] 
    public virtual power_installation installation_ { get; set; } 

    [DisplayName("Coordinator ID")] 
    public virtual power_coordinator coordinator_ { get; set; } 
} 

public class power_string 
{ 
    [ScaffoldColumn(false)] 
    public int id { get; set; } 

    [Required] 
    [DisplayName("UUID")] 
    [StringLength(36, ErrorMessage = "The 'uuid' cannot be longer than 36 characters")] 
    public string uuid { get; set; } 

    [Required] 
    [DisplayName("Position")] 
    public int position { get; set; } 

    [DisplayName("Name")] 
    [StringLength(128, ErrorMessage = "The 'name' cannot be longer than 128 characters")] 
    public string name { get; set; } 

    [DisplayName("Location")] 
    [StringLength(512, ErrorMessage = "The 'location' cannot be longer than 512 characters")] 
    public string location { get; set; } 

    [Required] 
    [DisplayName("power_combiner")] 
    public int combiner_id { get; set; } 

    [DisplayName("Combiner ID")] 
    public virtual power_combiner combiner_ { get; set; } 
} 

public class power_stringhistory 
{ 
    [ScaffoldColumn(false)] 
    public int id { get; set; } 

    [Required] 
    [DisplayName("Current")] 
    public double current { get; set; } 

    [Required] 
    [DisplayName("Record Time")] 
    public DateTime recordTime { get; set; } 

    [Required] 
    [DisplayName("power_string")] 
    public int string_id { get; set; } 

    [DisplayName("String ID")] 
    public virtual power_string string_ { get; set; } 
} 

编辑

下面的代码是我。我在转换日期时遇到问题。 GetTotalMilliseconds在当前上下文中不存在。这是来自HighCharts脚本还是来自我需要包含的其他名称空间？此外，它看起来像我正确使用数据上下文将数据分配给图表？我的x值改为合并ID：

.SetSeries(new[] 
{ 
    new Series 
    { 
     Name = "Combiner", 
     YAxis = 0, 
     Data = new Data(powercombinerhistorys.Select(mm => new Point { X = mm.combiner_id, Y = mm.current}).ToArray()) 
    } 
}); 

，我仍然得到一个错误。错误是： 无法强制类型'System.Int32'键入'DotNet.Highcharts.Helpers.Number'。 LINQ to Entities仅支持投射实体数据模型基元类型。

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Mvc; 
using System.Drawing; 
using DotNet.Highcharts; 
using DotNet.Highcharts.Enums; 
using DotNet.Highcharts.Helpers; 
using DotNet.Highcharts.Options; 
using Point = DotNet.Highcharts.Options.Point; 
using AESSmart.Models; 
using System.Data; 
using System.Data.Entity; 

namespace AESSmart.Controllers 
{ 
    public class HighChartsTestController : Controller 
    { 
     private AESSmartEntities db = new AESSmartEntities(); 

     public ActionResult CombinerHistoryData() 
     { 
      var powercombinerhistorys = db.PowerCombinerHistorys.Include(p => p.combiner_); 

      Highcharts chart = new Highcharts("chart") 
      .InitChart(new Chart { DefaultSeriesType = ChartTypes.Column }) 
      .SetTitle(new Title { Text = "Combiner History" }) 
      .SetXAxis(new XAxis { Type = AxisTypes.Datetime }) 
      .SetYAxis(new YAxis 
      { 
       Min = 0, 
       Title = new YAxisTitle { Text = "Current" } 
      }) 
      .SetSeries(new[] 
         { 
          new Series 
          { 
           Name = "Combiner", 
           YAxis = 0, 
           Data = new Data(powercombinerhistorys.Select(x => new Point { X = GetTotalMilliseconds(x.recordTime), Y = x.current}).ToArray()) 
          } 
         }); 

      return View(chart); 
     } 
    } 
} 

Answer 1

据我了解，你需要一个图表来显示所有的值（温度，电压，电流等）。另外我在模型中看到你有recordTime，它可以是你的xAxis。下面是示例代码：

Highcharts chart = new Highcharts("chart") 
      .InitChart(new Chart { DefaultSeriesType = ChartTypes.Line }) 
      .SetTitle(new Title { Text = "Combiner History" }) 
      .SetXAxis(new XAxis { Type = AxisTypes.Datetime }) 
      .SetYAxis(new[] 
         { 
          new YAxis 
          { 
           Title = new YAxisTitle { Text = "Current" }, 
           GridLineWidth = 1 
          }, 
          new YAxis 
          { 
           Labels = new YAxisLabels { Formatter = "function() { return this.value +'°C'; }", }, 
           Title = new YAxisTitle { Text = "Temperature" }, 
           Opposite = true, 
           GridLineWidth = 0 
          }, 
          new YAxis 
          { 
           Labels = new YAxisLabels { Formatter = "function() { return this.value +' V'; }" }, 
           Title = new YAxisTitle { Text = "Voltage" }, 
           Opposite = true, 
           GridLineWidth = 0 
          } 
         }) 
      .SetSeries(new[] 
         { 
          new Series 
          { 
           Name = "Current", 
           YAxis = 0, 
           Data = new Data(history.Select(x => new Point { X = GetTotalMilliseconds(x.recordTime), Y = x.current}).ToArray()) 
          }, 
          new Series 
          { 
           Name = "Temperature", 
           YAxis = 1, 
           Data = new Data(history.Select(x => new Point { X = GetTotalMilliseconds(x.recordTime), Y = x.temperature}).ToArray()) 
          }, 
          new Series 
          { 
           Name = "Voltage", 
           YAxis = 2, 
           Data = new Data(history.Select(x => new Point { X = GetTotalMilliseconds(x.recordTime), Y = x.voltage}).ToArray()) 
          } 
         }); 

，结果是下图：

第二图表，其可以为你有趣的是，从两种测量与记录的比较电流值的列图时间。下面是示例代码：

Highcharts chart = new Highcharts("chart") 
      .InitChart(new Chart { DefaultSeriesType = ChartTypes.Column }) 
      .SetTitle(new Title { Text = "Combiner History" }) 
      .SetXAxis(new XAxis { Type = AxisTypes.Datetime }) 
      .SetYAxis(new YAxis 
      { 
       Min = 0, 
       Title = new YAxisTitle { Text = "Current" } 
      }) 
      .SetSeries(new[] 
         { 
          new Series 
          { 
           Name = "Combiner", 
           YAxis = 0, 
           Data = new Data(combinerhistories.Select(x => new Point { X = GetTotalMilliseconds(x.recordTime), Y = x.current}).ToArray()) 
          }, 
          new Series 
          { 
           Name = "String", 
           YAxis = 0, 
           Data = new Data(stringhistories.Select(x => new Point { X = GetTotalMilliseconds(x.recordTime), Y = x.current}).ToArray()) 
          } 
         }); 

这里是页的表格：

我希望这是对你有帮助。