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

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

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

  1. def plugin_graph(request, hub_uid, plugin_uid):
  2. request.session['is_admin'] = True
  3. hub = Hub.objects.get(mac=hub_uid)
  4. fields = []
  5. if request.method == 'GET':
  6. if 'field' in request.GET:
  7. fields.append(request.GET['field'])
  8. plugin = Plugin.objects.get(uid=plugin_uid, hub=Hub.objects.get(mac=hub_uid))
  9. # on recupere lensemble desmodules de ce plug
  10. modules = plugin.get_modules_list()
  11. # pour chak module, tracer son graph
  12. for m in modules:
  13. modules_list = {'uid':m.uid,
  14. 'name':m.name,
  15. 'version':m.version,
  16. 'type':m.type,
  17. 'time':m.last_time(),
  18. 'rssi':m.rssi(),
  19. 'status_icon':m.status_icon()}
  20. module = Module.objects.get(uid=m.uid, plugin=Plugin.objects.get(uid=plugin_uid, hub=Hub.objects.get(mac=hub_uid)))
  21. historic = sorted(ModuleDocument.objects.filter(module=module), key=getKey)
  22. values = get_graph_values(historic=historic, dates=None, fields=fields)
  23. print values
  24. field = None if len(fields) < 1 else fields[0]
  25. return render(request, "admin/graph2.html",
  26. {
  27. 'values': values,
  28. 'hub': hub_uid,
  29. 'plugin': plugin_uid,
  30. 'uid': m.uid,
  31. 'module': module,
  32. 'fields': module.get_number_fields(),
  33. 'field': field,
  34. 'level': 'module',
  35. }
  36. )

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

  1. <script>
  2. var ctx = document.querySelector("#chart");
  3. var data = JSON.parse('{{ values }}'.replace(/&quot;/g, '"'));
  4. var labels = [];
  5. var values = [];
  6. var beginAtZero = true;
  7. for (obj in data) {
  8. labels.push(data[obj].x);
  9. values.push(data[obj].y);
  10. if (data[obj].y < 0) {
  11. beginAtZero = false;
  12. }
  13. }
  14. var lineChart = new Chart(ctx, {
  15. type: 'line',
  16. data: {
  17. labels: labels,
  18. datasets: [{
  19. label: "{{field}}",
  20. data: values,
  21. borderColor: '#97168F'
  22. }]
  23. },
  24. options: {
  25. scales: {
  26. xAxes: [{
  27. time: {
  28. unit: 'day'
  29. }
  30. }],
  31. yAxes: [{
  32. ticks: {
  33. beginAtZero:beginAtZero
  34. }
  35. }]
  36. }
  37. }
  38. });
  39. </script>

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

r6hnlfcb

r6hnlfcb1#

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

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

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

  1. {% for time, name_list, value_list, latitude_list, longitude_list, polyline_list in data %}
  2. {% with forloop.counter as track_object_counter %}
  3. <div id = 'emg-{{forloop.counter}}'>
  4. {% for item in emg_data %}
  5. {% if item.loop_id == track_object_counter %}
  6. <div id = "emg-plot" style="height:15rem; padding-top: 1rem;">
  7. <canvas id="myChart-{{forloop.counter}}">
  8. <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  9. <script>
  10. var y_data = {{item.data|strip_apostrophe}}
  11. var x_data = '{{item.name}}'
  12. var func_name = "container-{{forloop.counter}}";
  13. func_name = new Chart(
  14. document.getElementById('myChart-{{forloop.counter}}'),{
  15. type: 'scatter',
  16. data: {
  17. datasets: [{
  18. showLine: true,
  19. label: x_data,
  20. data: y_data,
  21. backgroundColor: 'rgba(141,49,123,0.7)',
  22. borderWidth: 2,
  23. borderColor: 'rgba(141,49,123,0.7)'
  24. }],
  25. },
  26. });
  27. </script>
  28. </canvas>
  29. </div>
  30. {% endif %}
  31. {% endfor %}
  32. </div>
  33. {% endwith %}
  34. {% endfor %}
展开查看全部

相关问题