使用Json.Net为Flot Graph Javascript库准备数据

本文关键字：数据 Javascript Graph Json Net Flot 使用 | 更新日期: 2023-09-27 18:17:33

我正在使用Json.net为Flot Javascript库创建一个数据结构

public ActionResult PrepareChartData(int id)
{
    List<DeviceChannel> deviceChannel = (from dc in db.DeviceChannels.Include(c => c.Device)
                                .Include(c => c.Channel).OrderBy(c => c.ChannelID)
                                .Where(c => c.DeviceID == id)
                                select dc).ToList();
    List<ChannelData> channelData = (from cd in db.ChannelDatas
                                    join dc in db.DeviceChannels on cd.DeviceChannelID equals dc.DeviceChannelID
                                    where cd.DeviceChannelID == id
                                    select cd).ToList();
    JObject retVal = new JObject(new JProperty("",
                                new JArray(
                                    from x in deviceChannel
                                    select new JObject (
                                        new JProperty("label", x.Channel.Description),
                                        new JProperty("data",
                                        new JArray(
                                                from cd in  channelData
                                                select new JArray(new JValue(cd.DataDateTime),new JValue(cd.Value))
                                            )
                                        )
                                    )
                                )    
                            )
                        );
    return Json(retVal, JsonRequestBehavior.AllowGet);
}

问题似乎是JSon。Net不允许在jobobject中直接使用JArray，所以我添加了一个JProperty，但这与Flot库所需的结构不匹配

"": [
    {
      "label": "Voltage A",
      "data": [
        [
          "2014-06-25T14:24:38.41",
          750.0
        ],
        [
          "2014-06-25T15:28:04.427",
          750.0
        ],
        [
          "2014-06-25T16:29:13.757",
          750.0
        ]
      ]
    },
    {
      "label": "Voltage B",
      "data": [
        [
          "2014-06-25T14:24:38.41",
          750.0
        ],
        [
          "2014-06-25T15:28:04.427",
          750.0
        ],
        [
          "2014-06-25T16:29:13.757",
          750.0
        ],
      ]
    }
   ]

问题:我是否使用不同的方法来生成数据结构，或者我可以用JSON.Net这样做?

使用Json.Net为Flot Graph Javascript库准备数据

除了@Stijn在他的评论中所说的，flot也不会喜欢那些日期时间字符串。在处理时间时需要javascript epoch。您需要类似(未测试):

JArray retVal = new JArray(
      from x in deviceChannel
      select new JObject (
          new JProperty("label", x.Channel.Description),
          new JProperty("data",
          new JArray(
                from cd in channelData
                select new JArray(new JValue((cd.DataDateTime - new DateTime(1970,1,1)).TotalSeconds * 1000),new JValue(cd.Value))
            )
        )
    )
);

基本上MVC框架不知道如何序列化JSON。网络对象。你可以很简单地强迫它，看看这个问题和这个问题。但是在您沿着这条路走下去之前，您应该决定为您的应用程序使用哪个JSON库。MVC使用内置的JavascriptSerializer，除非你非常需要使用JSON。. NET(它更快)，我会坚持使用它。下面是类似的代码(我没有你的linq结构，所以这只是一个演示):

    public class FlotSeries
    {
        public List<double[]> data;
        public string label;
    }
    public ActionResult Test()
    {
        FlotSeries flotSeries = new FlotSeries();
        flotSeries.label = "Series1";
        flotSeries.data = new List<double[]>();
        flotSeries.data.Add(new double[] { (DateTime.Now - new DateTime(1970, 1, 1)).TotalSeconds * 1000, 23.0 });
        flotSeries.data.Add(new double[] { (DateTime.Now - new DateTime(1970, 1, 1)).TotalSeconds * 1000, 12.0 });
        return Json(flotSeries, JsonRequestBehavior.AllowGet);
    }

生成的JSON: 

{"data":[[1407837905793.7207,23],[1407837905793.7207,12]],"label":"Series1"}
更新:

public ActionResult PrepareChartData(int id)
{
    List<FlotSeries> _flotSeries = new List<FlotSeries>();
    var deviceChannels = db.DeviceChannels
                        .Include(c=>c.Channel)
                        .OrderBy(c=>c.ChannelID)
                        .Where(c=>c.DeviceID==id);
    foreach (var dc in deviceChannels)
    {
        FlotSeries fs = new FlotSeries();
        fs.data = new List<double[]>();
        fs.label = dc.Channel.Description;
        var channelDatas = db.ChannelDatas
                        .OrderBy(c => c.DataDateTime)
                        .Where(c => c.DeviceChannelID == dc.DeviceChannelID);
        foreach (var q in channelDatas)
        {
            fs.data.Add( new Double[] {(q.DataDateTime - new DateTime(1970, 1, 1)).TotalSeconds * 1000, q.Value }  );   
        }
        _flotSeries.Add(fs);
    }
    return Json(_flotSeries, JsonRequestBehavior.AllowGet);
}
相关文章：