使用ChartJS在Django中生成多个折线图

chhkpiq4  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(204)

我在Django中工作,用我的模块的函数来绘制一些图形。如果我有2个模块,我想要2个图表,如果8个模块,8个图表。模块被集成在一个插件中。所以我可以列出在一个插件中找到的所有模块。我在Django中这样做:

def plugin_graph(request, hub_uid, plugin_uid):
request.session['is_admin'] = True
hub = Hub.objects.get(mac=hub_uid)
fields = []
if request.method == 'GET':
    if 'field' in request.GET:
        fields.append(request.GET['field'])
plugin = Plugin.objects.get(uid=plugin_uid, hub=Hub.objects.get(mac=hub_uid))

# on recupere lensemble desmodules de ce plug

modules = plugin.get_modules_list()

# pour chak module, tracer son graph

for m in modules:
    modules_list = {'uid':m.uid,
        'name':m.name,
        'version':m.version,
        'type':m.type,
        'time':m.last_time(),
        'rssi':m.rssi(),
        'status_icon':m.status_icon()}
    module = Module.objects.get(uid=m.uid, plugin=Plugin.objects.get(uid=plugin_uid, hub=Hub.objects.get(mac=hub_uid)))
    historic = sorted(ModuleDocument.objects.filter(module=module), key=getKey)
    values = get_graph_values(historic=historic, dates=None, fields=fields)
    print values
    field = None if len(fields) < 1 else fields[0]
return render(request, "admin/graph2.html",
        {
            'values': values,
            'hub': hub_uid,
            'plugin': plugin_uid,
            'uid': m.uid,
            'module': module,
            'fields': module.get_number_fields(),
            'field': field,
            'level': 'module',
        }
    )

在恢复我所有的模块后,我画的图表,就像在javascript:

<script>
  var ctx = document.querySelector("#chart");
  var data = JSON.parse('{{ values }}'.replace(/&quot;/g, '"'));
  var labels = [];
  var values = [];
  var beginAtZero = true;
  for (obj in data) {
    labels.push(data[obj].x);
    values.push(data[obj].y);
    if (data[obj].y < 0) {
      beginAtZero = false;
    }
  }
  var lineChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: labels,
        datasets: [{
          label: "{{field}}",
          data: values,
          borderColor: '#97168F'
        }]
      },
      options: {
         scales: {
            xAxes: [{
                time: {
                    unit: 'day'
                }
            }], 
            yAxes: [{
               ticks: {
                   beginAtZero:beginAtZero
               }
            }]
         }
     }
  });
</script>

我的问题是只打印了一个图表。我想把它放在一个for循环中来恢复每个模块的所有数据和标签,以正常绘制我想要的所有图表。
谢谢你的帮助

r6hnlfcb

r6hnlfcb1#

你需要使用django模板中的forloop.counter方法来动态命名一些项目,否则图表每次都会被覆盖,你只剩下最后一个图表。值得注意的是,我在块内容中包含了这段代码,而不是特定的js块。
在下面的示例中,动态命名的项为:

  • 容器div
<div id = 'emg-{{forloop.counter}}'>
  • 画布
<canvas id="myChart-{{forloop.counter}}">
  • 图表JS函数名称
var func_name = "container-{{forloop.counter}}";
func_name = new Chart(
    document.getElementById('myChart-{{forloop.counter}}'),{
    type: 'scatter',

我在下面提供了完整的代码。我很感激我的例子与你发布的代码不同,但是它演示了动态创建某些元素的概念。

{% for time, name_list, value_list, latitude_list, longitude_list, polyline_list in data %}
    {% with forloop.counter as track_object_counter %}
    <div id = 'emg-{{forloop.counter}}'>
    {% for item in emg_data %}
    {% if item.loop_id == track_object_counter %}
    <div id = "emg-plot" style="height:15rem; padding-top: 1rem;">
      <canvas id="myChart-{{forloop.counter}}">
        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
        <script>
          var y_data  = {{item.data|strip_apostrophe}}
          var x_data = '{{item.name}}'

          var func_name = "container-{{forloop.counter}}";
          func_name = new Chart(
            document.getElementById('myChart-{{forloop.counter}}'),{
              type: 'scatter',
              data: {
                datasets: [{
                  showLine: true,
                  label: x_data,
                  data:  y_data,
                  backgroundColor: 'rgba(141,49,123,0.7)',
                  borderWidth: 2,
                  borderColor: 'rgba(141,49,123,0.7)'
                }],
              },                              
          });
        </script>
      </canvas>
    </div>
    {% endif %}
    {% endfor %}
    </div>
    {% endwith %}
    {% endfor %}

相关问题