zoukankan      html  css  js  c++  java
  • python-Web-django-图表统计

    下载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日日期:

  • 相关阅读:
    Jemter---基础概念
    Jmeter---线程操作
    性能接口面试题
    Linux---网络命令
    测试所用链接地址
    Linux---压缩解压命令
    Linux----用户管理命令
    性能面试题
    Linux---帮助命令
    Linux--文件搜索命令
  • 原文地址:https://www.cnblogs.com/person1-0-1/p/11390831.html
Copyright © 2011-2022 走看看