使用charts.js在Django中创建带有循环的图表

Question

我在Django创建了一个项目。我的项目需要图表

我使用chart.js库和Json

我使用API获取值。在API页面中有5个对象。每个对象都有title、value1和value2

当我创建一个表时，它就工作了。我可以获取值，但无法在图表中显示值。如何使用循环创建多个图表

视图.py

def Jdeneme(request):
    response = requests.get('https://api....t')
    data = response.json()
    return render(request, 'charts.html', {'data': data})

charts.html

{% extends "layouts/base.html" %}
{% load static %}
{% block content %}

    <div class="content">
        <div class="page-inner">
            <h4 class="page-title">Chart.js</h4>
            <div class="page-category"></div>
        {% for dt in data %}

            <div class="row">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <div class="card-title">{{ dt.title }} Doughnut Chart</div>
                        </div>
                        <div class="card-body">
                            <div class="chart-container">
                                <canvas id="doughnutChart" style="width: 50%; height: 50%"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        {% endfor %}


        </div>
    </div>


{% endblock content %}

{% block javascripts %}

    <script>

        doughnutChart = document.getElementById('doughnutChart').getContext('2d');
        var myDoughnutChart = new Chart(doughnutChart, {
            type: 'doughnut',
            data: {
                datasets: [
                    {
                    data: [ {{ dt.value1 }}, {{ dt.value2 }} ],
                    backgroundColor: ['#e95bda','#4bbffd']
                }
                ],

                labels: [
                'value 1',
                'value 2'
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                legend : {
                    position: 'bottom'
                },
                layout: {
                    padding: {
                        left: 20,
                        right: 20,
                        top: 20,
                        bottom: 20
                    }
                }
            }
        });


        // Chart with HTML Legends

        var gradientStroke = htmlLegendsChart.createLinearGradient(500, 0, 100, 0);
        gradientStroke.addColorStop(0, '#177dff');
        gradientStroke.addColorStop(...

        var myHtmlLegendsChart = new Chart(htmlLegendsChart, {
            ...
        var myLegendContainer = document.getElementById("myChartLegend");

        // generate HTML legend
        myLegendContainer.innerHTML = myHtmlLegendsChart.generateLegend();

        ...
        }

    </script>

{% endblock javascripts %}

Answer 1

1. 您正在for循环外部引用（模板）for循环变量dt
2. 您还将为所有创建的画布提供相同的固定id
3. 您在javascript代码中只构建了一个图表

尝试如下更改代码：

{% extends "layouts/base.html" %}
{% load static %}
{% block content %}

    <div class="content">
        <div class="page-inner">
            <h4 class="page-title">Chart.js</h4>
            <div class="page-category"></div>
        {% for dt in data %}

            <div class="row">
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-header">
                            <div class="card-title">{{ dt.title }} Doughnut Chart</div>
                        </div>
                        <div class="card-body">
                            <div class="chart-container">
                                <canvas id="doughnutChart{{ forloop.counter }}" style="width: 50%; height: 50%"></canvas> {# CHANGE THIS #}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        {% endfor %}


        </div>
    </div>


{% endblock content %}

{% block javascripts %}

    <script>

      {% for dt in data %} {# ADD THIS #}
        doughnutChart = document.getElementById('doughnutChart{{ forloop.counter }}').getContext('2d');    {# CHANGE THIS #}
        var myDoughnutChart{{ forloop.counter }} = new Chart(doughnutChart, { {# CHANGE THIS #}
            type: 'doughnut',
            data: {
                datasets: [
                    {
                    data: [ {{ dt.value1 }}, {{ dt.value2 }} ],
                    backgroundColor: ['#e95bda','#4bbffd']
                }
                ],

                labels: [
                'value 1',
                'value 2'
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                legend : {
                    position: 'bottom'
                },
                layout: {
                    padding: {
                        left: 20,
                        right: 20,
                        top: 20,
                        bottom: 20
                    }
                }
            }
        });
      {% endfor %}  {# ADD THIS #}

        // Chart with HTML Legends

        var gradientStroke = htmlLegendsChart.createLinearGradient(500, 0, 100, 0);
        gradientStroke.addColorStop(0, '#177dff');
        gradientStroke.addColorStop(...

        var myHtmlLegendsChart = new Chart(htmlLegendsChart, {
            ...
        var myLegendContainer = document.getElementById("myChartLegend");

        // generate HTML legend
        myLegendContainer.innerHTML = myHtmlLegendsChart.generateLegend();

        ...
        }

    </script>

{% endblock javascripts %}

顺便说一句，这只是为了让您的代码按照您编写代码的方式工作，但通过Django模板动态生成Javascript代码是否是一个好主意还存在争议