HighCharts - MVC 3数据库-Java 学习之路

我正在使用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;}
}

EDIT

好吧，我正在构建一个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; }
}

EDIT

以下代码就是我所拥有的 . 我在转换日期时遇到问题 . 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);
        }
    }
}

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

结果如下图：
enter image description here

您可能感兴趣的第二个图表是柱形图，它将两次测量的当前值与记录的时间进行比较 . 这是示例代码：

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

这是页面上的图表：
enter image description here

我希望这对你有所帮助 .

回复于 2024-05-15T14:38:30+08:00

HighCharts - MVC 3数据库

1 回答

相关问题