用jQuery Flot繪製外部數據

我想用flot插件來繪製一些寫入JSON文件的數據。這似乎並不難，但我找不到有用的東西......請幫助我。用jQuery Flot繪製外部數據

這是我寫的頁面：

$(function() { 
    var data; 
    $.getJSON("1.json", function(json) { 
     var data = json; 
    }); 

    var options = { 
      legend: { 
       show: true, 
       margin: 10, 
       backgroundOpacity: 0.5 
      }, 
      points: { 
       show: true, 
       radius: 3 
      }, 
      lines: { 
       show: true 
      } 
    }; 

    var plotarea = $("#placeholder"); 

    $.plot(plotarea , data, options); 
});

而1.json文件coitain以下所有條件：

{ label: "Values", 
    data: [ 
     [1, 50.026], 
     [2, 50.028], 
     [3, 50.029], 
     [4, 50.026], 
     [5, 50.025], 
     [6, 50.016] 
     ] 
}

@MarcoJohannesen即使我寫的「控制檯。日誌（數據）「在JSON調用之後腳本仍然沒有工作，並且屏幕上沒有消息出現。使用Chrome實用程序（我不記得名稱;-)）我可以看到hte文件1.json已正確加載。我認爲問題在於首先執行腳本，然後加載文件1.json。我在頁面上做了一些修改。你可以看到a demo on this page 這是在網頁「1.htm」代碼：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <script language="javascript" type="text/javascript" src="jquery.js"></script> 
    <script language="javascript" type="text/javascript" src="jquery.flot.js"></script> 
</head> 
    <body> 
    <h1>Graph</h1> 

    <div id="placeholder" style="width:600px;height:300px;"></div> 
<script language="javascript" type="text/javascript"> 
$(function() { 
    var data; 
    $.getJSON("1.json", function(json) { 
     var data = json; 
    }); 
    console.log(data); 

    var plotarea = $("#placeholder"); 

    $.plot(plotarea , data); 
}); 
</script> 
</body> 
</html>

，這是1.json（我已經添加了方括號）

[{ label: "Values", 
    data: [ 
     [1, 50.026], 
     [2, 50.028], 
     [3, 50.029], 
     [4, 50.026], 
     [5, 50.025], 
     [6, 50.016] 
     ] 
}}

我絕對找到了一種製作工作頁面的方法。這是我使用的代碼：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <script language="javascript" type="text/javascript" src="jquery.js"></script> 
    <script language="javascript" type="text/javascript" src="jquery.flot.js"></script> 
</head> 
    <body> 
    <h1>Graph</h1> 
<script language="javascript" type="text/javascript"> 
$(document).ready(function(){ 
    $.getJSON("1.json", function(json) { 
     //succes - data loaded, now use plot: 
     var plotarea = $("#placeholder"); 
     var data=[json.data]; 
     $.plot(plotarea , data); 
    }); 
}); 

</script>  
    <div id="placeholder" style="width:600px;height:300px;"></div> 

</body> 
</html>

，這就是JSON文件（從海軍報官方exaples以確保採取正確的格式）

{ 
    "label": "Europe (EU27)", 
    "data": [[1999, 1], [2000, 0.23], [2001, 3], [2002, 4], [2003, 1.3], [2004, 2.5], [2005, 2.0], [2006, 3.1], [2007, 2.9], [2008, 0.9]] 
}

現在我要睡覺，但我明天我們應該嘗試將標籤添加到情節並嘗試使用多個系列的值。

來源

2011-10-22 Nicolaesse

你能嘗試檢查什麼$ .plot獲取數據變量？ –

@Marco，我該如何檢查？ – Nicolaesse

你使用什麼瀏覽器？如果您使用IE Developer或Firefox Firebug或Chrome Firebug Lite，則可以使用console.log（data）;在getJSON調用:) –

我用它來生成項目進度的自動更新信息網站。

我的小例子使用多種類型的圖表：線條和條形圖。

我覺得更容易理解，如果我有一個正在運行的例子，所以我們在這裏：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <script language="javascript" type="text/javascript" src="jquery.js"></script> 
    <script language="javascript" type="text/javascript" src="jquery.flot.js"></script> 
</head> 
<body> 
<h1>Graph</h1> 
<script language="javascript" type="text/javascript"> 
$(document).ready(function(){ 
    $.getJSON("barLine.json", function(json) { 
     //succes - data loaded, now use plot: 
      var plotarea = $("#placeholder"); 
      var dataBar=json.dataBar; 
      var dataLine=json.dataLine; 
      $.plot(plotarea , [ 
       { 
        data: dataBar, 
        bars: {show: true} 
       }, 
       { 
        data: dataLine, 
        lines: { show: true, steps: false } 
       }    
      ] 
     ); 
    }); 
}); 

</script>  
    <div id="placeholder" style="width:600px;height:300px;"></div> 
</body> 
</html>

而且數據（barLine.json）：

{ 
"label": "Europe (EU27)", 
"dataBar": [[1999, 1], [2000, 0.23], [2001, 3], [2002, 4], [2003, 1.3], [2004, 2.5], [2005, 2.0], [2006, 3.1], [2007, 2.9], [2008, 0.9]], 
"dataLine": [[1999, 2], [2000, 3.23], [2001, 1], [2002, 5], [2003, 2.3], [2004, 6.5], [2005, 4.0], [2006, 3.1], [2007, 0.9], [2008, 6.9], [2009, 9.9] ] 
}

來源

2012-09-18 14:34:25

試試這個：

$(function() { 
    var data; 
    var plotarea = $("#placeholder"); 

    $.getJSON("1.json", function(json) { 
     //succes - data loaded, now use plot: 
     $.plot(plotarea , data); 
    }); 
});

而在你的JSON文件中有語法錯誤（開始用「[」和一個「}」你能試試這個結局：

{ label: "Values", 
    data: [ 
     [1, 50.026], 
     [2, 50.028], 
     [3, 50.029], 
     [4, 50.026], 
     [5, 50.025], 
     [6, 50.016] 
     ] 
}

來源

2011-11-07 19:36:43

直到不能工作......我已經在線更新了這些文件，所以如果您有調試器，您可以嘗試。我發現了一些有趣的東西，但我可以完全理解腳本http://people.iola.dk/olau/flot/examples/ajax.html和http://burnsforce.com/flot-format-data- flot-readable-json/ – Nicolaesse

我做了一個工作版本...檢查上面的帖子 – Nicolaesse

$ .plot（plotarea，json）; –

用jQuery Flot繪製外部數據

回答

相關問題