Диаграмма JS: не отображается в html в Django - PullRequest
Новая
       11

Диаграмма JS: не отображается в html в Django

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

Я построю горизонтальную гистограмму в html, но она не отображается. Я посылаю 2 переменные из views.py: {{top5StockCode}} и {{top5TotalSales}}.
Значения {{top5StockCode}}, которые отправляет views.py, равны

['23166', '21108', '85123A', '48185', '22470']

и {{top5TotalSales}}

[2671740, 227322, 171770, 158120, 143808].

Это мой код в файле html. 

<div class="top5">
    <p class="topicTop5">Top 5 Selling Products</p>
    <canvas id="top5"></canvas>
</div>
<script>
    var top5 = document.getElementById('top5').getContext('2d');
    var chart = new Chart(top5, {
        type: 'horizontalBar',
        data: {
            labels: {{top5StockCode}},
            datasets: [{
                label: 'Top 5 selling products ',
                backgroundColor: '#CE3B21',
                borderColor: 'rgb(255, 99, 132)',
                data: {{top5TotalSales}}
            }]
        },
        options: {   
            legend: { 
                display: false
            },
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                yAxes: [{
                    ticks: {
                         beginAtZero:true
                    }
                }]
            }
        }
    });
</script>

Я так растерялся, почему на нем не отображается график. Пожалуйста, помогите мне. Спасибо

1 Ответ

3 голосов
/ 23 апреля 2020

Ваш код работает нормально. Вот jsfiddle , использующий ваши данные.

Так что, вероятно, вам нужно записать массив в шаблоне как json как {{ top5StockCode|safe }} и {{top5TotalSales|safe}}

, поэтому Ваш окончательный код должен быть: 

<div class="top5">
    <p class="topicTop5">Top 5 Selling Products</p>
    <canvas id="top5"></canvas>
</div>
<script>
    var top5 = document.getElementById('top5').getContext('2d');
    var chart = new Chart(top5, {
        type: 'horizontalBar',
        data: {
            labels: {{top5StockCode|safe}},
            datasets: [{
                label: 'Top 5 selling products ',
                backgroundColor: '#CE3B21',
                borderColor: 'rgb(255, 99, 132)',
                data: {{top5TotalSales|safe}}
            }]
        },
        options: {   
            legend: { 
                display: false
            },
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                yAxes: [{
                    ticks: {
                         beginAtZero:true
                    }
                }]
            }
        }
    });
</script>
...