Гистограмма с помощью Chart.js на Django

141
25 июня 2019, 14:50

Прошу не кидать камнями, я только недавно начал заниматься Django, поэтому многое еще не понятно. Мне необходимо на странице, кроме того, что на ней есть основной контент (текст, таблица) отобразить гистограмму. Решил делать это с помощью Chart.js (https://www.chartjs.org/). Пока взял пример с сайта Chart.js и он работает. Но мне необходимо передавать из файла views.py данные в шаблон для построения этой гистограммы. Мой views.py выглядит так:

class List_DisturbResearchInstallation(TemplateView):
template_name = 'home_page.html'
def get(self, request):
    qs_disturb_ri = DisturbResearchInstallation.objects.all().order_by('-data_disturb')
    context = {
        'qs_disturb_ri': qs_disturb_ri,
    }
    return render(request, self.template_name, context)
def post(self, request):
    if 'button_stat_by_category' in request.POST:
        get_data = get_data_stat_by_category(request)
        context = {
            'queryset_disturb_ri': get_data[0],
            'input_data_disturb_start': request.POST['input_data_disturb_start'],
            'input_data_disturb_end': request.POST['input_data_disturb_end'],
            # данные для js
            'x_value' : ["массив значений x"]
            'y_value' : ["массив значений y"]
        }
        return render(request, 'perform_result_disturb_ri.html', context)

Шаблон выглядит так:

<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script>
{% block jquery %}
var defaultData = {{ y_value }}
var labels = {{ x_value }}
    var ctx = document.getElementById("myChart").getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [{
                label: '# of Votes',
                data: defaultData,
                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: [
                    'rgba(255,99,132,1)',
                    '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
                    }
                }]
            }
        }
    });
{% endblock %}
</script>
<div style="float: left; width: 50%; margin: 5px 5px 0 0">
<canvas id="myChart" width="400" height="300"></canvas>
</div>

Но данные из views.py не передаются в js, который находится в шаблоне. Ребята буду очень признателен вашей помощи!

READ ALSO
Запрос для нахождения схожих записей

Запрос для нахождения схожих записей

Есть таблица, 5000 строк:

116
MYSQL SELECT помогите

MYSQL SELECT помогите

Не могу написать корректный sql select запросПрисутствуют 2 таблицы - garage_items и users_items

153
Нахождение нужного &lt;template&gt; по заголовку из JSONa

Нахождение нужного <template> по заголовку из JSONa

На странице очень много элементовЯ получаю json и нужно найти темплейт в котором есть заголовок, который равен заголовку из jsonа и затем извлечь...

148