Django: Как загрузить данные Dynami c в chartjs - PullRequest
Новая
       5

Django: Как загрузить данные Dynami c в chartjs

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

Я хочу загрузить данные своих моделей в диаграмму, используя диаграмму js.

Любопытно, что работают только «фиктивные данные», которые выглядят следующим образом: 

data: {
        labels: ['red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                            datasets: [{
                                label: '# of Votes',
                                data: [12, 19, 3, 5, 2, 7],

Мои необработанные данные выглядят так: 

labels = ['/truck-alerts-analysis/fleet-history', '/truck-alerts-analysis/map-view', 
          '/truck-alerts-analysis/fleet-status', '/truck-alerts-analy
          sis/truck-history', '/truck-alerts-analysis/truck-history', '/truck-alerts- 
          analysis/fleet-status', '/truck-alerts-analysis/truck-histor
          y', '/setup/QCFcKp', '/reset-password', '/login']


data = [251, 243, 238, 220, 174, 158, 151, 88, 87, 86]

Используя django, я определил эти значения в views.py следующим образом: 


def pages(request):
    showData = start_date
    pageV = PageView.objects.all()
    FPage = FinalPage.objects.all()

    typeUser = list(FinalPage.objects.values_list('page', flat=True))
    count = list(FinalPage.objects.values_list('sessionCount', flat=True))

    # manipulation in order to get the right labels that I want
    t=[]
    for i in typeUser:
        new = i.split("?", 1)[0]
        t.append(new)

    k = t[-10:]
    c = count[-10:]

    # Where the labels and data is being returned 
    return render(request, 'gaapp/pages.html', {"showData": showData,
                                                "labels": k,
                                                "data": c})

Любопытно, что при вызове {{labels}} и {{data}} в файле HTML (где обрабатывается диаграмма), исключается только {{data}}? Другими словами, {{labels}} не действительны. Я не понимаю почему? Пожалуйста, помогите

Мой HTML: 

<div class="PageMines">
        <canvas id="myChart1" width="40" height="30"></canvas>
            <script>
                $(document).ready(function(){
                    var ctx = document.getElementById('myChart1').getContext('2d');

                    var myChart1 = new Chart(ctx, {
                        type: 'bar',
                        data: {
                            labels: {{names}},
                            datasets: [{
                                label: '# of Votes',
                                data: {{numbers}},

                                backgroundColor: [
                                    'blue',
                                    'blue',
                                    'blue',
                                    'blue',
                                    'blue',
                                    'blue',
                                ],
                                borderColor: [
                                    'blue',
                                    'blue',
                                    'blue',
                                    'blue',
                                    'blue',
                                    'blue',
                                ],
                                borderWidth: 1
                            }]
                        },
                        options: {


                            scales: {

                                yAxes: [{
                                    ticks: {
                                        beginAtZero: true

                                    }

                                }]
                            }
                        }
                    });
                });
            </script>
            </div>
...