Как интегрировать Chart.js в Django? - PullRequest
0 голосов
/ 24 апреля 2019

Итак, во-первых, я кровавый новичок в Django и Chart.js.Что я хочу сделать: я хочу отобразить круговую диаграмму.Я знаю, что с синтаксисом {{content}} шаблон .html может получать динамические данные, но он не работает для моего шаблона круговой диаграммы.

Что у меня есть: моя круговая диаграмма готова в качестве шаблона .html для моего приложения.Он уже прекрасно работает, когда я напрямую кодирую данные в шаблон.

мой взгляд:


    def index(request):

    return render(
        request, 
        "mep/chart.html",
        {
            labels: ['F', 'M'],
            data: [52, 82],
            colors: ["#FF4136", "#0074D9"]
            }

        )

мой шаблон:


    <!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    <title>Geschlechtsverteilung Patientendaten </title>
</head>
<body>
    <div class="container">
        <canvas id="myChart"></canvas>
    </div>

    <script>
        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'pie',// bar, horizontalBar, pie, line, doughnut, radar, polarArea

            data: {
                labels: {{labels}},
                datasets: [{
                    data: {{data}},
                    backgroundColor: {{colors}}
                }]
            },
            options: {
                title: {
                    display: true,
                    text: 'Geschlechtsverteilung Patientendaten',
                },
                legend: {
                    disblay: true,
                    position: 'right',
                    labels: {
                        fontColor: '#000'
                    }
                }

            }


        });

    </script>
</body>
</html>

Так что, как вы можете видетьЯ пытаюсь передать данные для шаблона в моем views.py, но он не работает.Когда я указал данные прямо в chart.html, они работали

Какие-либо решения ???

Ответы [ 3 ]

1 голос
/ 24 апреля 2019

У вас есть две проблемы в вашем коде. Во-первых, вам нужно исправить свои views.py .

Вам необходимо использовать strings как keys в вашем context dictionary, поэтому вам нужно изменить его на:

def index(request):

    return render(
        request, 
        "base/chart.html",
        {
            'labels': ['F', 'M'],
            'data': [52, 82],
            'colors': ["#FF4136", "#0074D9"]
            }

        )

И затем вам нужно указать внутри django template, что эти переменные safe для рендеринга:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    <title>Geschlechtsverteilung Patientendaten </title>
</head>
<body>
    <div class="container">
        <canvas id="myChart"></canvas>
    </div>

    <script>
        var ctx = document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'pie',// bar, horizontalBar, pie, line, doughnut, radar, polarArea

            data: {
                labels: {{labels|safe}},
                datasets: [{
                    data: {{data|safe}},
                    backgroundColor: {{colors|safe}}
                }]
            },
            options: {
                title: {
                    display: true,
                    text: 'Geschlechtsverteilung Patientendaten',
                },
                legend: {
                    disblay: true,
                    position: 'right',
                    labels: {
                        fontColor: '#000'
                    }
                }

            }


        });

    </script>
</body>
</html>
0 голосов
/ 24 апреля 2019

У вас есть опечатка в коде, это может быть проблемой.Замените disblay на правильный display в настройках -> заголовок -> отобразить при инициализации диаграммы.Не могли бы вы предоставить вывод на консоль javascript, если это исправление не работает?

0 голосов
/ 24 апреля 2019

Я думаю, что вам нужно выводить в html, просматривая элементы.Так, например, измените labels: {{labels}}, на

labels: [{% for label in labels %}{{ label }}{% endfor %}]
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...