Question

我正在构建一个Web应用程序，允许用户比较他们在锻炼期间燃烧的卡路里量与他们在用餐时消耗的量。为此，我使用ChartJS。刚开始我正在硬编码数据，以了解图表在页面上的工作原理。

问题是当我运行应用程序时，图表页面是空白的。以下是我尝试实施图表的方法：

视图

这是我创建图表视图的地方。数据暂时是硬编码的。

class ChartView(View):
    def get(self, request, *args, **kwargs):
        return render(request, 'nutrition/chart.html', {"users": 10})

def get_data(request, *args, **kwargs):
    data = {
        "calories_in": 200,
        "calories_out": 300
    }
    return JsonResponse(data)


class ChartData(APIView):
    authentication_classes = []
    permission_classes = []

    def get(self, request, format=None):
        qs_count = User.objects.all().count()
        labels = ["Users", "Blue", "Yellow", "Green", "Purple", "Orange"]
        default_items = [qs_count, 12, 22, 13, 11, 15]
        data = {
                "labels": labels,
                "default": default_items,
        }
        return Response(data)

HTML

这是我用来显示图表的html页面。我添加了chartjs javascript所需的所有相关导入。

<script>

        {% block jquery %}
            var endpoint = 'nutrition/api/chart/data/'
            var defaultData = []
            var labels = [];
            $.ajax({
                method: "GET",
                url: endpoint,
                success: function(data) {
                    labels = data.labels
                    defaultData = data.default
                    setChart()
                },
                error: function (error_data) {
                    console.log("error")
                    console.log(error_data)

                }
            })

            function setChart() {
                var ctx = document.getElementById("myChart");
                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
                                }
                            }]
                        }
                    }
                });
            }

    {#        var ctx = document.getElementById("myChart");#}


        {% endblock %}
    </script>

    {% block body %}

        <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
        <script type="text/javascript"></script>

        <div class="row">
            <div class="container">
                <div class="col-sm-12" url-endpoint="'{% url "nutrition:chart" %}">
                    <h1>Chart</h1>
                    <canvas id="myChart" width="400" height="400"></canvas>

                </div>
            </div>
        </div>
    {% endblock body %}

网址

我的所有网址都是nutrition/

的扩展名

urlpatterns = [
    # url for the webpage to display the chart
    url('^chart/$', ChartView.as_view(), name='chart'),
    # url to show the data using the django rest_framework
    url('^api/chart/data/$', ChartData.as_view()),
]

修改这是我在nutrition/api/chart/data网址的网络标签下查看时看到的内容。

Answer 1

您的Django服务设置为返回HTML响应而不是JSON有效内容。将以下设置添加到settings.py文件中，理论上您的应用程序应该已启动并运行。

REST_FRAMEWORK = {
    'DEFAULT_RENDERER_CLASSES': (
        'rest_framework.renderers.JSONRenderer',
    ),
}
`

Answer 2

我在YouTube上关注了类似的教程。我是一个新手，当我试图弄清楚这东西是如何工作时遇到了这个问题。
据我了解 <div class="col-sm-12" url-endpoint="'{% url "nutrition:chart" %}"> 我认为Url端点出了点问题，为什么当您进入ChartData（）时它指向ChartView（）。
另外，您的网址格式也不会与Charts.html端点保持一致。同样，我是一个新手，我只是在谈论与教程中所见模式不同的模式。我指的是
“ CodingEntrepreneurs -channel：Django + Chart.js //学习将Chart.js与Django -video集成在一起

实现ChartJs

2 个答案: