HighCharts -- MVC 3 数据库答案

【问题标题】：HighCharts -- MVC 3 DatabaseHighCharts -- MVC 3 数据库
【发布时间】：2012-03-06 21:00:48
【问题描述】：

我在 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);
        }
    }
}

【问题讨论】：

您希望在聊天中显示什么样的数据？使用 X 和 Y 数据还是仅使用对象数组？包含数据的域模型是什么？

标签： highcharts asp.net-mvc-3-areas

【解决方案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())
                           }
                       });

这是页面上的图表：

希望对你有帮助。

【讨论】：

首先，感谢您的回复，非常感谢。它看起来确实非常接近我想要实现的目标。我在使用 Visual Studio 和 Highcharts 方面相当陌生。我能够让 highcharts 使用静态数据的方法是在 Controller 中创建图表并将图表传递给视图。我想以这种方式实现它。那么，我该如何从数据库中收集数据并将其分配给历史、组合历史和字符串历史，以便图表可以使用它？
在前面的例子中，combinerhistories 是 IEnumerable，而 stringhistories 是 IEnumerable。如果您使用例如 EntityFramework 从数据库中获取数据，那么您可以从 DataContext 中获取，例如：using(PowerDatabaseContext context = new PowerDatabaseContext()) { IEnumerable<power_combinerhistory> combinerhistory = context.power_combinerhistory; }
嗯，我能够以我想要的方式完成大部分工作。使用您在上面提供的内容，我已经完成了 90% 的工作。我正在做的是在数据库中查询图表所需的数据，然后为每个系列创建一个数组。然后我只是将数组传递给图表。效果很好。我发现甚至不使用类来定义 HighChartsPoint 更容易。我觉得你花费的时间应该得到接受的答案。感谢您的帮助