# -*- 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