如何使用 JQuery 矢量地图和 Django

【问题标题】：how to use JQuery Vector Map and Django如何使用 JQuery 矢量地图和 Django
【发布时间】：2020-12-11 04:28:18
【问题描述】：

我正在尝试在 jqueryVector Map 上可视化我的 django 模型数据的六列，但我不知道该怎么做。我需要尽快答复。

$(function() {
        $('#map').vectorMap({
          map: 'world_mill_en',
          series: {
            regions: [{
              values: gdpData,
              scale: ['#C8EEFF', '#0071A4'],
              normalizeFunction: 'polynomial'
            }]
          },
          backgroundColor: '#eef3f7',
          onLabelShow: function(e, el, code) {
            el.html(el.html() + ' (GDP - ' + gdpData[code] + ')');
          }
        });
      });

【问题讨论】：

标签： javascript python html jquery django

【解决方案1】：

在 HTML 或 Javascript 中访问 Django 模型数据的常规方法是通过Django's templating system。

首先，您需要将数据放入template variable：

from django.shortcuts import render

def my_view(request):
    return render(request, 'my_template.html', {
        'data': [1,2,3],
    })

然后，您可以访问模板中的数据：

$(function() {
        $('#map').vectorMap({
          map: 'world_mill_en',
          series: {
            regions: [{
              values: [{% for value in data %}{{value}}{% if not forloop.last %},{% endif %}{% endfor %}],
              scale: ['#C8EEFF', '#0071A4'],
              normalizeFunction: 'polynomial'
            }]
          },
          backgroundColor: '#eef3f7',
          onLabelShow: function(e, el, code) {
            el.html(el.html() + ' (GDP - ' + gdpData[code] + ')');
          }
        });
      });

【讨论】：