[英]Django D3 reading csv data from mongodb to plot graph
我試圖從mongodb讀取csv數據以繪制圖形,基本上獲取csv文件的代碼在view.py中(正在運行),但此刻我想獲取csv數據以繪制圖形。 我已經嘗試了獲取數據(其中之一是ajax)以從鏈接獲取數據的方法,但是失敗了。以下是輸出的代碼和屏幕截圖。
HTML代碼
//....
var dataset
d3.csv("{% url 'system:data' %}", type, function(error, data){
if (error) throw error;
dataset = data
initialDomain = d3.extent(data, function(d) { return d.Timestamp; });
x.domain(initialDomain);
ydomain = d3.extent(data, function(d) { return d['AGV Mileage']; });
y.domain(ydomain);
x2.domain(x.domain());
y2.domain(y.domain());
//....
JS
/*var csvData;
$(document).ready(function() {
csvData = $.ajax({
type: "GET",
url: "http://..../system/diagnostics/data",
dataType: "text/csv",
success: function (result) {
alert(result);
alert(result.getAllResponseHeaders())
}
});
})*/
view.py
//...
class DataView(DiagnosticMixin, TemplateView):
def render_to_response(self, request):
results = []
end = timezone.now()
start = end - timezone.timedelta(seconds=86400)
cursor = get_database().Diagnostic.find({
'timestamp': {
'$gte': start,
'$lt': end
},
}).sort('timestamp')
first = True
for doc in cursor:
if first:
keys = ['Timestamp']
for st in doc['status']:
for kv in st['values']:
keys.append(kv['key'])
if len(keys) < 240:
continue
results.append('"%s"\n' % '","'.join(keys))
first = False
values = [timezone.make_naive(doc['timestamp'])]
for st in doc['status']:
for kv in st['values']:
values.append(kv['value'])
results.append('"%s"\n' % '","'.join(['%s' % v for v in values]))
return StreamingHttpResponse(results, content_type='text/csv')
url.py
//...
url(r'^diagnostics/data$', DataView.as_view(), name='data'),
將數據字(... / system / diagnostic / data)添加到鏈接后的html頁面附在此處
基本上csv在那兒,我已經嘗試過從中獲取數據的方法,但未能獲取它,我現在完全迷失了。
請對此有所啟發,謝謝。
編輯 csv數據已成功加載,但是當將變量csvData放入d3.csv()時,又出現了另一個問題,出現了錯誤,並且不會顯示圖形
the code :
var global_csvData;
$(document).ready(function() {
var csvData = $.ajax({
type: "GET",
url: "http://../system/diagnostics/data",
success: function (result) {
console.log(result);
console.log(csvData.getAllResponseHeaders());
global_csvData = csvData;
}
});
})
var csvData = global_csvData;
d3.csv(csvData, type, function(error, data) {\\....}
對於長度錯誤,我嘗試聲明變量global_csv變量,但結果仍然相同。
如下修改您的js
var csvData;
$(document).ready(function() {
csvData = $.ajax({
type: "GET",
url: "http://..../system/diagnostics/data",
success: function (result) {
console.log(result);
console.log(csvData.getAllResponseHeaders());
}
});
})
從ajax刪除dataType
屬性,然后它將起作用。 或將dateType='text/csv'
更改為dataType:'text'
因為ajax函數無法理解dateType ='text / csv',因此關閉success
函數后會調用error
函數
采樣電子表格10-rows.csv
1,"Eldon Base for stackable storage shelf, platinum",Muhammed MacIntyre,3,-213.25,38.94,35,Nunavut,Storage & Organization,0.8
2,"1.7 Cubic Foot Compact ""Cube"" Office Refrigerators",Barry French,293,457.81,208.16,68.02,Nunavut,Appliances,0.58
3,"Cardinal Slant-D� Ring Binder, Heavy Gauge Vinyl",Barry French,293,46.71,8.69,2.99,Nunavut,Binders and Binder Accessories,0.39
4,R380,Clay Rozendal,483,1198.97,195.99,3.99,Nunavut,Telephones and Communication,0.58
5,Holmes HEPA Air Purifier,Carlos Soltero,515,30.94,21.78,5.94,Nunavut,Appliances,0.5
6,G.E. Longer-Life Indoor Recessed Floodlight Bulbs,Carlos Soltero,515,4.43,6.64,4.95,Nunavut,Office Furnishings,0.37
7,"Angle-D Binders with Locking Rings, Label Holders",Carl Jackson,613,-54.04,7.3,7.72,Nunavut,Binders and Binder Accessories,0.38
8,"SAFCO Mobile Desk Side File, Wire Frame",Carl Jackson,613,127.70,42.76,6.22,Nunavut,Storage & Organization,
9,"SAFCO Commercial Wire Shelving, Black",Monica Federle,643,-695.26,138.14,35,Nunavut,Storage & Organization,
10,Xerox 198,Dorothy Badders,678,-226.36,4.98,8.33,Nunavut,Paper,0.38
的test.html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var x = $.ajax({
url:"Sample-Spreadsheet-10-rows.csv",type:"GET",
dataType:"text",
success:function(result){
console.log("success");
console.log(x.responseText);
},
error:function(result){
console.log(x.responseText)
}
});
});
});
</script>
</head>
<body>
<button>Get RESPONSE TEXT</button>
</body>
</html>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.