Django jQuery Flot Chart多個系列

Question

我在Django應用程序中將Flot用於圖表。 我想每天繪制一個包含許多數據系列的圖表（折線圖）。 每天，序列號可能都會更改，我不知道該如何處理。 我的代碼差不多是這樣的：

test.py

 data_day_1 = [[1,56],[2,65],[3,45]]
 data_day_2 = [[1,45],[2,23],[3,89]]
 return render_to_response('test.html', {'data_day_1': data_day_1,
                                         'data_day_2': data_day_2,
                                         },
                          context_instance=RequestContext(request))       

test.html

 <div class="portlet-body">
     <div id="site_statistics" class="chart"></div>
 </div>

 <script type="text/javascript">
 var data1 = [];
 {% for x, y in data_day_1 %}
 data1.push([{{x}},{{y}}])
 {% endfor %} 

 var data2 = [];
 {% for x, y in data_day_2 %}
 data2.push([{{x}},{{y}}])
 {% endfor %} 

 $(function () {    
    var Options = { lines: {show: true},                
                          }
        $.plot($("#site_statistics"), 
        [{data: data1,
      color: "#454d7d",
      points: {show: true},
      label: "data_day_1", 
      },
     {data: data2,
      color: "#454d7d",
      points: {show: true},
      label: "data_day_2", 
      }
     ],Options);
});     

有一天，我可能會有另一組設置（例如data_day_3），卻不知道該怎么做。 如何動態管理數據傳輸和新生產線的設計？ 謝謝你的幫助。

Answer 1

您可以將數據編碼為json：

from django.utils import simplejson as json

data_all_days = [
   {'label': 'Day 1',
    'data': [[1, 4], [1,8], [9, 8]],
    'color': '#000',
   },
   {'label': 'Day 2',
    'data':...,
    'color': ...,
    },
   ...]
render_to_response( ... {'charts': json.dumps(data_all_days)})

並在模板中只需使用json作為javascript代碼即可：

var chart_data = {{ charts|safe }};

$.plot($('#site_statistics'), chart_data);

您將在js代碼中具有data_all_days的結構， data_all_days使用一個循環對其進行解析。 閱讀jquery.each 。

在運行此代碼時，請在Chrome或FireFox中將其打開，然后打開開發人員工具（Ctrl + I或F12），然后查看調試控制台，它將顯示JavaScript中是否有錯誤。

|safe是一個模板過濾器，用於防止代碼被html引用。