Как реализовать диаграмму. js в Django? - PullRequest
Новая
       21

Как реализовать диаграмму. js в Django?

0 голосов
/ 05 августа 2020

Я пытаюсь визуализировать свои данные в виде графика с помощью диаграммы. js! Однако я понятия не имею, как это делается ... Не могли бы вы помочь мне с этим, пожалуйста?

Вот код, который у меня был до сих пор: model.py 

class MarksInputOne(models.Model):
user = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE, null=True)
date = models.DateTimeField(auto_now_add=True)
mark = models.CharField(max_length=200)

def __str__(self):
    return self.mark

просмотров. py 

def courseOne(request):
marks = MarksInputOne.objects.filter(user=request.user)
total_assign = TodoList.objects.filter(user=request.user)

total = total_assign.count()
this = total_assign.filter(category__name="MAT292H1").count()

return render(request, 'courses/firstcourse.html', {'marks': marks, 'total_assign': total_assign, 'total': total,
                                                    'this': this})


def lineChart(request):
labels =[]
data = []

queryset = MarksInputOne.objects.values('mark').filter(category__name='MAT292H1').order_by('date')
for entry in queryset:
    labels.append(entry['date'])
    data.append(entry['mark'])

return JsonResponse(data={
    'labels': labels,
    'data': data,
})

и, наконец, диаграмма. html, это фактически пример кода из диаграммы. js

<div class="col">
    <div class="col-md">
        <h5>Graph</h5>
        <hr>
        <div class="card card-body">
            <canvas id="chart" width="800" height="400"></canvas>
            <script>
                var ctx = document.getElementById('chart').getContext('2d');
                var myChart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: [{{data}}],
                        datasets: [{
                            label: 'Academic Performance',
                            data: [{{ labels }}],
                            fill: false,
                            backgroundColor: [
                                'rgba(255, 99, 132, 0.2)',
                                'rgba(54, 162, 235, 0.2)',
                                'rgba(255, 206, 86, 0.2)',
                                'rgba(75, 192, 192, 0.2)',
                                'rgba(153, 102, 255, 0.2)',
                                'rgba(255, 159, 64, 0.2)'
                            ],
                            borderColor: [
                                'rgb(255,99,132)',
                                'rgba(54, 162, 235, 1)',
                                'rgba(255, 206, 86, 1)',
                                'rgba(75, 192, 192, 1)',
                                'rgba(153, 102, 255, 1)',
                                'rgba(255, 159, 64, 1)'
                            ],
                            borderWidth: 1
                        }]
                    },
                    options: {
                        scales: {
                            yAxes: [{
                                ticks: {
                                    beginAtZero: true
                                }
                            }]
                        }
                    }
                });
            </script>
        </div>
    </div>
</div>

Пожалуйста, помогите мне реализовать данные на диаграмме ! Я так долго искал через inte rnet, ничего не нашел: ((

Спасибо за помощь !!

1 Ответ

1 голос
/ 05 августа 2020

Все, что заботит chart.js, - это список меток и список значений. Так что вам придется как-то это обеспечить. Ваша функция просмотра lineChart отвечает списком меток и списком точек данных, поэтому она точно соответствует нашим потребностям. Вам нужно сделать так, чтобы ваша веб-страница отправила запрос на сервер django, чтобы запросить данные, которые она должна отображать. Когда получен ответ, вы можете ввести свои данные в chart.js и построить свою диаграмму. Вот урезанный код того, как все это сочетается со стороны клиента и со стороны сервера:

Серверная 

def lineChart(request):    
    return JsonResponse(data = {
        'labels': ["Red Label", "Yellow Label"],
        'data': [5, 6],
    })

Клиентская 

<canvas id="chart"></canvas>
<script>
  let ctx = document.getElementById('chart');
  $.ajax({
    url: '/lineChart/',
    success: function(response){
      new Chart(ctx, {
        type: 'line',
        data: {
          labels: response.labels,
          datasets: [{
            data: response.data
          }]
        }
      });
    }
  });
</script>

Одна вещь, которую я должен отметить, - это разные языки, с которыми мы здесь имеем дело, и то, как они взаимодействуют. Django отображает страницу HTML. Во время этого процесса рендеринга он имеет доступ к python переменным с именем context variables. После завершения рендеринга он отправляет клиенту последнюю HTML страницу. На стороне клиента chart.js, это библиотека JavaScript, для работы с ней требуется JavaScript переменных. Так что использование Django s context variables на самом деле не сработает. ... если только ... вы не используете django для рендеринга его переменных контекста на странице html как жестко запрограммированные javascript -vaild значения. Я виновен в том, что делал это раньше, но я бы не рекомендовал такой подход. Пахнет ужасно!

...