使用Django进行数据可视化：图表，地图等等

npm install chart.js

def bar_chart(request):
    data = [50, 40, 30, 20, 10]
    return render(request, 'bar_chart.html', {'data': data})

{% extends 'base.html' %}

{% block content %}
  <canvas id="chart"></canvas>

  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script>
    var ctx = document.getElementById('chart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['pidancode.com', 'Python', 'Django', 'JavaScript', 'HTML'],
            datasets: [{
                data: {{ data|safe }},
                backgroundColor: ['#ff6384', '#36a2eb', '#ffce56', '#4bc0c0', '#9966ff'],
                borderWidth: 1
            }]
        }
    });
  </script>
{% endblock %}

npm install leaflet

def map(request):
    data = [
        {'name': '  pidancode.com', 'lat': 51.5074, 'lng': -0.1278},
        {'name': '皮蛋编程', 'lat': 40.7128, 'lng': -74.0060}
    ]
    return render(request, 'map.html', {'data': data})

{% extends 'base.html' %}

{% block content %}
  <div id="map" style="height: 500px;"></div>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.css"/>
  <script src="https://cdn.jsdelivr.net/npm/leaflet@1.7.1/dist/leaflet.js"></script>
  <script>
    var map = L.map('map').setView([51.5074, -0.1278], 13);
    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=<your-access-token>', {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
                     '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
                     'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 18,
        id: 'mapbox/streets-v11',
        tileSize: 512,
        zoomOffset: -1
    }).addTo(map);
    {% for d in data %}
      L.marker([{{ d.lat }}, {{ d.lng }}]).addTo(map).bindPopup('{{ d.name }}');
    {% endfor %}
  </script>
{% endblock %}