Flot.js＆JQuery.Ajax：从键值对创建图形

我试图在使用flot.js的mvc中创建图形。该图将是一个线条图，上面有3条线。我已经创建了一组3列表keyvaluepair与日期/价值将被绘制在图表中，如下面的代码所示。目前，我得到：JavaScript的运行时错误： 'listvoltage' 是不确定的Flot.js＆JQuery.Ajax：从键值对创建图形

这是我已经试过：

Index.cshtml：

@if (Model != null) 
      { 
       foreach (var item in Model.BatteryInfo) 
       { 

        var listvoltage = new List<KeyValuePair<double, int>>(); 
        var listtemperature = new List<KeyValuePair<double, int>>(); 
        var listlevel = new List<KeyValuePair<double, int>>(); 



        listvoltage.Add(new KeyValuePair<double, int>(
         TMTMonitorAndCompare_Helpers.DateTimeHelpers.DateTimeToUnixTimestamp(item.TEST_DATE), Convert.ToInt32(item.battery_voltage))); 

        listtemperature.Add(new KeyValuePair<double, int>(
         TMTMonitorAndCompare_Helpers.DateTimeHelpers.DateTimeToUnixTimestamp(item.TEST_DATE), Convert.ToInt32(item.battery_temperature))); 

        listlevel.Add(new KeyValuePair<double, int>(
         TMTMonitorAndCompare_Helpers.DateTimeHelpers.DateTimeToUnixTimestamp(item.TEST_DATE), Convert.ToInt32(item.battery_level)));

CustomGraphinScript.js

$(document).ready(function() { 
$.plot($("#placeholder"), listvoltage, { yaxis: { max: 1000 } }); 
});

任何人都可以告诉我我需要做什么才能在图表上显示这些数据？是ajax要求？

来源

2014-09-30 Baggerz

你能提供完整的脚本吗？ listvoltage var的范围很重要，可能是问题，但从上面的片段中无法确定。 – 2014-09-30 12:48:04

Razor文件正在服务器端执行。 flot.js在客户端/浏览器上执行，它们不共享相同的类型系统。那就是为什么'listvoltage'是未定义的。

把它放入你的razorfile。了解.NET和Javascript之间的日期转换。 flot.js需要Javascript时间戳。

@using System.Web.Script.Serialization 

<script> 
@{ 
    var jsonSerialiser = new JavaScriptSerializer(); 
    var json = jsonSerialiser.Serialize(listvoltage); 
} 
var timeserie = @Html.Raw(json); 
</script>

考虑带有JSON结果和Ajax调用的Web API解决方案。

来源

2014-09-30 12:32:54

嗨安德斯谢谢你的回应，我明白了为什么listvoltage现在是未定义的。我试着把你的代码放进去，但由于上面的代码在一个表体内，listvoltage仍然没有上下文，所以关心它们已经在js时间戳中的日期转换。（使用上面的自定义帮手）有什么建议？ – Baggerz 2014-09-30 13:18:25

我只看到剃须刀文件的一个子集，很难看清发生了什么，但我应该在Controller类中设置listvoltage的逻辑。更易于调试。 – 2014-09-30 13:40:38

Flot.js＆JQuery.Ajax：从键值对创建图形

回答

相关问题