下载highchart插件包,放在static下
<script src="/static/highcharts/highcharts.js"></script> <script src="/static/highcharts/highcharts-zh_CN.js"></script>
建路由
# 图表 re_path('click/click/',click.click,name='click/click/')
建方法:
from django.shortcuts import render from app01.models import * from back.views.ddff import defense_url @defense_url def click(request): '''点击量和点赞量图表''' recent_seven_day = recent_seven_days() list_week_day = recent_seven_day[::-1] clicknum_list = [] praise_num_list = [] for v in list_week_day: res1 = Praise.objects.filter(addtime__icontains = v,praise_type=0).count() res2 = Praise.objects.filter(addtime__icontains = v,praise_type=1).count() clicknum = res1 praise_num = res2 clicknum_list.append(clicknum) praise_num_list.append(praise_num) return render(request,'click/click.html',locals()) import datetime def recent_seven_days(): '''获取7天日期''' d = datetime.datetime.now() list1 = [] for i in range(1,8): oneday = datetime.timedelta(days=i) day = d - oneday date_to = datetime.datetime(day.year,day.month,day.day) list1.append(str(date_to)[0:10]) return list1
建html:
<script> var chart = Highcharts.chart('container', { chart: { type: 'line' }, title: { text: '日点击量和点赞量统计' }, subtitle: { text: '数据来源: yunhe.cn' }, xAxis: { categories: {{ list_week_day|safe }} }, yAxis: { title: { text: '点击量 (click)' } }, plotOptions: { line: { dataLabels: { // 开启数据标签 enabled: true }, // 关闭鼠标跟踪,对应的提示框、点击事件会失效 enableMouseTracking: false } }, series: [{ name: '点击量', data:{{ clicknum_list|safe }} }, { name: '点赞量', data: {{ praise_num_list|safe }} }] }); </script>
复制highchart里的html代码和js代码到自己页面中
改js路径
获取近7日日期: