簡體   English   中英

Django D3從mongodb中讀取csv數據以繪制圖形

[英]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'),

html頁面附在這里 HTML

將數據字(... / 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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM