Django Chart.js绘制折线图_django 折线图坐标精度可调节-CSDN博客

本文链接：https://blog.csdn.net/Cocktail_py/article/details/122281793

本文展示了如何在Django视图中使用`DateEncoder`类将日期和Decimal对象转换为JSON格式，以便在前端展示历史价格趋势的Line Chart。通过反转数据并使用Chart.js库，创建了一个动态的历史价格走势图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

# -*- coding: utf-8 -*-
# @File    : views.py
# @Time    : 2022/1/2 22:12
# @Author  : Cocktail_py
from decimal import Decimal
from datetime import datetime, date

from django.views import View
from django.shortcuts import render


class DateEncoder(json.JSONEncoder):
    def default(self, obj):
        if isinstance(obj, datetime):
            return obj.strftime('%Y-%m-%d %H:%M:%S')
        elif isinstance(obj, date):
            return obj.strftime("%Y-%m-%d")
        elif isinstance(obj, Decimal):
            return float(obj)
        else:
            return json.JSONEncoder.default(self, obj)

# 视图函数
class GoodDetail(View):
    def get(self, request, goods_goodsinfo_id):
        price_x_data = [1,2,3,4]
        update_time_data = ['2022-01-16','2022-01-15','2022-01-14','2022-01-13']


        return render(request, 'good_detail.html', {'price_x_data': json.dumps(price_x_data[::-1],cls=DateEncoder),
                                                    'update_time_data': json.dumps(update_time_data[::-1],cls=DateEncoder),


                                                    })

<canvas id="chartjs-0" class="chartjs" width="962" height="481" style="display: block; height: 385px; width: 770px;"></canva

<script src="{% static 'js/dist/Chart.min.js' %}"></script>

<script type="text/javascript">
    var p_x_data = {{ update_time_data | safe }};
    var p_y_data = {{ price_x_data | safe }};
    new Chart(document.getElementById("chartjs-0"),{"type":"line","data":{"labels":p_x_data,"datasets":[{"label":"历史价格走势图","data":p_y_data,"fill":false,"borderColor":"rgb(75, 192, 192)","lineTension":0.1}]},"options":{}});

</script>

# 路由
from django.urls import path
urlpatterns = [
    path('detail/<detail_id>', GoodDetail.as_view(),name='detail'),
]

在这里插入图片描述

参考:
https://github.com/chartjs/Chart.js
https://www.cnblogs.com/honey01/p/7274135.html
https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js