javascript - Django D3从mongodb读取csv数据来绘制图表

Question

我正在尝试从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 页面附在此处

将数据字(.../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 变量，但结果仍然相同。

Answer 1

修改你的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 函数

示例-Spreadsheet-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

测试.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>