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：從鍵值對創建圖形

回答

相關問題