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

  • 相关阅读:
    HDFS工作流程
    HADOOP 安全模式
    Hadoop环境的搭建
    面向对象-绑定与非绑定方法
    面向对象-封装
    面向对象-继承与派生
    面向对象-多态与多态性
    面向对象-绑定方法
    LOL游戏基本代码
    1 面向对象的程序设计
  • 原文地址:https://www.cnblogs.com/person1-0-1/p/11390831.html
Copyright © 2011-2022 走看看