Передача данных в массиве из массива на график js с django - PullRequest
Новая
       2

Передача данных в массиве из массива на график js с django

0 голосов
/ 04 апреля 2020

Итак, я пытаюсь передать некоторые данные в диаграмму (используя диаграмму js и django) и могу распечатать свои данные на своей веб-странице, но не могу передать их в качестве аргументов диаграмме. Кроме того, если я добавлю данные в таблицу в жестком коде, это сработает, но с моими собственными данными из массива я ничего не вижу ...

Я пытался {{data | сейф}} и {{метки | safe}} но я получаю ошибку, поэтому я не понимаю, что я делаю неправильно. Кто-нибудь может мне помочь?

Чтобы объяснить лучше:

views.py 

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
                  })

home. html 

<!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>

Результат на моей странице:

Моя страница результатов

Ответы [ 2 ]

0 голосов
/ 04 апреля 2020

вам необходимо использовать тег шаблона с именем json_script, {{your_array | json_script: "chart_data"}}, а затем получить доступ к этим данным в javascript - var value = JSON .parse (document.getElementById ('chart_data') .textContent);

https://docs.djangoproject.com/en/2.2/ref/templates/builtins/#json -скрипт Django документация

0 голосов
/ 04 апреля 2020

Попробуйте, пожалуйста 

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>
...