Question

因此，首先，我是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中指定数据时，它起作用了

任何解决方案？

Answer 1

您的代码中有两个问题。首先，您需要更正 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>

Answer 2

我认为您需要通过遍历项目来输出到html中。因此，例如，将labels: {{labels}},更改为

labels: [{% for label in labels %}{{ label }}{% endfor %}]

Answer 3

您的代码中有错字，这可能是个问题。在选项->标题->在图表初始化中显示的选项中，用正确的disblay替换display。如果此修复程序无效，请提供您的JavaScript控制台输出吗？

如何在Django中集成Chart.js？

3 个答案: