Question

我尝试使用flot.js在mvc中创建图表。该图表将是一条线图，上面有3行。我创建了一组3列表keyvaluepair，其日期/值将在图表上绘制，如下面的代码所示。目前我得到：JavaScript运行时错误：＆＃39; listvoltage＆＃39;未定义

这是我尝试过的：

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吗？

Answer 1

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解决方案。

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

1 个答案: