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()) 
          } 
         }); 

這裏是頁的表格：

我希望這是對你有幫助。