0
votes

Passer des données dans un tableau provenant d'un tableau à chartjs avec django

Donc, j'essaie de transmettre des données à un graphique (en utilisant chartjs et django) et je peux imprimer mes données dans ma page Web, mais je ne peux pas les transmettre comme arguments au graphique. De plus, si je mets des données codées en dur dans le graphique, cela fonctionne, mais avec mes propres données d'un tableau, je ne vois rien ...

J'ai essayé {{data | safe}} et {{labels | safe}} mais j'obtiens une erreur, donc je ne comprends pas ce que je fais mal. Quelqu'un peut-il m'aider?

Pour mieux expliquer:

views.py

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
        <title>Crypto Covid</title>
    </head>

    <body>
        <h4>{{data | safe}}</h4>
        <p>--------------</p>
        <h4>{{labels|safe}}</h4>
        <div class="container">
            <canvas id="chart">

            </canvas>
        </div>

    </body>

    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
    <script> src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"</script>
  <script>

    var config = {
      type: 'pie',
      data: {
        datasets: [{
          data: {data} ,
          backgroundColor: [
            '#696969', '#808080', '#A9A9A9', '#C0C0C0', '#D3D3D3'
          ],
          label: 'Population'
        }],
        labels: {labels}
      },
      options: {
        responsive: true
      }
    };

    window.onload = function() {
      var ctx = document.getElementById('chart').getContext('2d');
      window.myPie = new Chart(ctx, config);
    };
</script>
</html>

home.html

import csv

def home(request):
    csvFilePath = "../data/raw_datasets/covid_confirmed.csv"
    data = []
    labels = []
    with open(csvFilePath, "r") as csvfile:
        csv_reader = csv.reader(csvfile, delimiter=',')
        next(csv_reader)
        for row in csv_reader:
            data.append(row[1])
            labels.append(row[73])

    return render(request, 'home.html',
                  {
                      'data': data,
                      'labels': labels
                  })

Le résultat dans ma page:

ma page de résultats

javascript django python chart.js csv

0 commentaires

3 Réponses :

0
votes

Essayez ceci s'il vous plaît

import csv

def home(request):
    csvFilePath = "../data/raw_datasets/covid_confirmed.csv"
    data_list = []
    with open(csvFilePath, "r") as csvfile:
        csv_reader = csv.reader(csvfile, delimiter=',')
        next(csv_reader)
        for row in csv_reader:
            data_list.append({'label' : row[73], "y" : row[1]})
    t = json.dumps(data_list)    

    return render(request, 'home.html',
                  {
                      'output':t
                  }) 

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
        <title>Crypto Covid</title>
    </head>

    <body>

        <div id="pie-chart" style="width: 100%;height:370px;">
          </div> <!-- edited -->

    </body>


   <script src="https://canvasjs.com/assets/script/canvasjs.min.js"> <!-- edited--></script>
    <!-- edited -->
    data = JSON.parse("{{ output|escapejs }}")
    window.onload = function() {
    var chart = new CanvasJS.Chart("pie-chart", {
    type: 'pie',
    data: [{type: "pie",dataPoints: data}],
    options: {
      responsive: true
  }
});      
  chart.render();
};
</script>
</html>

2 commentaires

Non, il renvoie une page noire comme si de rien n'était

vérifier que les données arrivent ou non. Ecrire console.log ("données", données)

0
votes

vous devez utiliser la balise template appelée json_script, {{your_array | json_script: "chart_data"}}, puis accéder à ces données en javascript - var value = JSON.parse (document.getElementById ('chart_data'). textContent);

https://docs.djangoproject.com/en/2.2/ref/templates/builtins/#json-script Documentation Django

0 commentaires

0
votes

Essayez de passer la liste de données par liste (j'utilise render_template sur Flask) et récupérez-la sur javascript (sous forme de tableau) avec:

labels: [{% for item in families %}
         "{{ item }}",
         {% endfor %}]

... même si pylint peut dire critiquer la syntaxe html. Ça fonctionne bien.

0 commentaires