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

Question

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

我使用 chart.js 库和 Json。

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

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

views.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 代码是否是一个好主意还有待商榷。