Диаграммы django на сайте

@BenWade · Регистрация: 05.03.2015

Студворк — интернет-сервис помощи студентам

Здравствуйте!
Прошу Вас помочь с решением проблемы по отображению графиков среди остального контента в шаблоне django.
У меня стоит следующая задача - есть некий контент страницы сайты, например таблица, текст и т.д. и мне необходимо добавить гистограмму на эту таблицу.
Недавно стал погружаться в вопрос построения графиков в django и вот к чему пришел:
Файл views.py:

Python
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
from matplotlib import pylab
from pylab import *
import PIL, PIL.Image
import io
 
def gr(request):
    x = [1, 2, 3, 4, 5, 6]
    y = [5, 2, 6, 8, 2, 7]
    plot(x, y, linewidth=2)
 
    xlabel('x axis')
    ylabel('y axis')
    title('sample graph')
    grid(True)
    buffer = io.BytesIO()
    canvas = pylab.get_current_fig_manager().canvas
    canvas.draw()
    graphIMG = PIL.Image.frombytes("RGB", canvas.get_width_height(), canvas.tostring_rgb())
    graphIMG.save(buffer, "PNG")
    pylab.close()

Проблема в том, что я не понимаю как вставить график на страницу. Код который привел это из стандартных примеров, которые накапал в инете.
У меня естественно шаблон заполняется из вьюшки через контекст, например так:

Python
1
2
3
4
            context = {
                'array_stat': array_stat,
            }
            return render(request, 'perform_result.html', context)

Однако как сюда интегрировать график я пока не понимаю. Заранее спасибо!

@BenWade · 20.12.2018, 15:59 **[ТС]**

Да, это я понял, что картинки создаются в виде текста. Передачу переменных в js я так полагаю можно делать в виде например так:
views.py:

Python
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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)

В шаблоне в скрипте далаю примерно так:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<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>

Но данные для js не передаются..

@dondublon · 20.12.2018, 16:26

Видимо, потому что там сложное значение. Составьте строку. Возможно, https://docs.djangoproject.com... #make-list поможет (альтернативно, если не составлять строку самостоятельно).

@BenWade · 21.12.2018, 10:11 **[ТС]**

Решил проблему. Пишется следующий код в шаблоне:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<div style="float: left; width: 50%; margin: 5px 5px 0 0">
    <canvas id="BarChart_by_category" width="400" height="300"></canvas>
</div>
 
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script>
{% block jquery %}
var x_values = [{% for x in x_by_catagory %} "{{ x }}", {% endfor %}]
var y_values = [{% for y in y_by_category %} "{{ y }}", {% endfor %}]
var ctx = document.getElementById("BarChart_by_category").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: x_values,
        datasets: [{
            label: '# of Votes',
            data: y_values,
            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>

Данные из вьюхи передаются как обычно..
Вообщем все довольно просто. И выглядит конечно симпатичнее чем графики matplotlib

Новые блоги и статьи Все статьи Все блоги /
Запустил конкурс "тем и промптов для текстовых квестов созданных почти чисто ИИ" Adler 06.10.2026 Всем привет! За последние три-четыре дня я создал более 16 текстовых квестовых игр используя преимущественно по одному запросу к ИИ на игру. Мне так понравилось смотреть все ветки/ сцены во всех. . .	ИИ не может найти нужный язык в списке Supersumestria 05.10.2026 Я ему даю вот такое изображение и прошу найти и подчеркнуть немецкий язык. Возвращает он вот это: https:/ / i. **********/ vqBWLe2. png Нужную строчку в 3й колонке просто выдумал. . Это. . .	Новая последняя моя музыка в SUNO zorxor 05.10.2026 Здравствуйте, дорогие мои друзья! С большой радостью я хотел бы представить вам свою новую последнею музыку, которую сгенерировала мне по моей просьбе нейросеть SUNO. С уважением, zorxor. Это. . .	Программный домашний кинотеатр russiannick 27.09.2026 Сподобился на программный домашний кинотеатр. В качестве ЯВУ по традиции выбрал js. В помощники взял Яндекс-Алису. Было создано три зала на разные интересы. исторические и ретро сериал Хичкок. . .
Беседа с ИИ о программистах, недопускающих к созданию и правке кода генеративные ИИ и причины этого zorxor 21.09.2026 Раньше я радовался или получал некоторые эмоции, пусть небольшие, но всё же, от самого процесса написания кода, рекомпиляции и запуска, видя постепенное развитие программы и прочее. А теперь лень. . .	Мобильное приложение ColorStep pavlinmavlin 17.09.2026 Реализовал приложение Красный, Зеленый, Синий в Unity3d + c#. Название изменил на ColorStep. Приложение прошло модерацию и теперь доступно для скачивания. Делал его сам, шаг за шагом — и вот,. . .	Запрет дублирования строк в табличной части Maks 13.09.2026 Реализация из решения ниже выполнена на нетиповом справочнике "Нормы ТО" с табличной часть "Виды ТО", разработанного в КА2, со следующими реквизитами: - ВидТО (СправочникСсылка. ВидыТО); - ВидГСМ. . .	Скрипты Tampermonkey для CyberForum, ChatGPT, Claude и пр. Jin X 06.09.2026 Скрипты Tampermonkey для CyberForum, ChatGPT, Claude и пр. Работая с форумом и нейросетями в браузере часто хочется что-то подкорректировать или добавить какого-то функционала. Ниже прикреплён. . .

@dondublon 4663 / 2082 / 367 Регистрация: 17.03.2012 Сообщений: 10,203 Записей в блоге: 6
	20.12.2018, 16:26
	Видимо, потому что там сложное значение. Составьте строку. Возможно, https://docs.djangoproject.com... #make-list поможет (альтернативно, если не составлять строку самостоятельно). 0