highcharts

原创 已于 2024-03-18 17:46:34 修改 · 262 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#python #开发语言

于 2024-03-18 14:48:59 首次发布

包含标识的曲线图 | Highcharts

web/controllers/chart.py

# -*- coding: utf-8 -*-
from app import  app,db
from flask import Blueprint,jsonify
from common.libs.Helper import ops_render
from common.libs.Helper import getFormatDate
from common.models.stat.StatDailySite import StatDailySite
import datetime
route_chart = Blueprint( 'chart_page',__name__ )

@route_chart.route("/dashboard")
def dashboard():
    now = datetime.datetime.now()
    date_before_30days = now + datetime.timedelta(days=-30)
    date_from = getFormatDate(date=date_before_30days, format="%Y-%m-%d")
    date_to = getFormatDate(date=now, format="%Y-%m-%d")

    list = StatDailySite.query.filter(StatDailySite.date >= date_from) \
        .filter(StatDailySite.date <= date_to).order_by(StatDailySite.id.asc()) \
        .all()

    resp = {'code': 200, 'msg': '操作成功~~', 'data': {}}
    data = {
        "categories":[],
        "series":[
            {
                "name":"会员总数",
                "data":[]
            },
            {
                "name": "订单总数",
                "data": []
            },
        ]
    }

    if list:
        for item in list:
            data['categories'].append( getFormatDate( date = item.date ,format = "%Y-%m-%d") )
            data['series'][0]['data'].append( item.total_member_count )
            data['series'][1]['data'].append( item.total_order_count )

    resp['data'] = data
    return jsonify(resp)

@route_chart.route("/finance")
def finance():
    now = datetime.datetime.now()
    date_before_30days = now + datetime.timedelta(days=-30)
    date_from = getFormatDate(date=date_before_30days, format="%Y-%m-%d")
    date_to = getFormatDate(date=now, format="%Y-%m-%d")

    list = StatDailySite.query.filter(StatDailySite.date >= date_from) \
        .filter(StatDailySite.date <= date_to).order_by(StatDailySite.id.asc()) \
        .all()

    resp = {'code': 200, 'msg': '操作成功~~', 'data': {}}
    data = {
        "categories":[],
        "series":[
            {
                "name":"日营收报表",
                "data":[]
            }
        ]
    }

    if list:
        for item in list:
            data['categories'].append( getFormatDate( date = item.date ,format = "%Y-%m-%d") )
            data['series'][0]['data'].append( float( item.total_pay_money ) )

    resp['data'] = data
    return jsonify(resp)

@route_chart.route("/share")
def share():
    now = datetime.datetime.now()
    date_before_30days = now + datetime.timedelta(days=-30)
    date_from = getFormatDate(date=date_before_30days, format="%Y-%m-%d")
    date_to = getFormatDate(date=now, format="%Y-%m-%d")

    list = StatDailySite.query.filter(StatDailySite.date >= date_from) \
        .filter(StatDailySite.date <= date_to).order_by(StatDailySite.id.asc()) \
        .all()

    resp = {'code': 200, 'msg': '操作成功~~', 'data': {}}
    data = {
        "categories":[],
        "series":[
            {
                "name":"日分享",
                "data":[]
            }
        ]
    }

    if list:
        for item in list:
            data['categories'].append( getFormatDate( date = item.date ,format = "%Y-%m-%d") )
            data['series'][0]['data'].append( item.total_shared_count )

    resp['data'] = data
    return jsonify(resp)

web/static/js/chart.js

;
var dashboard_index_ops ={
    init:function () {
        this.drawChart()
    },
    drawChart:function () {
        var chart =
            Highcharts.chart('member_order', {
                chart: {
                    type: 'spline'
                },
                title: {
                    text: '两地月平均温度'
                },
                subtitle: {
                    text: '数据来源: WorldClimate.com'
                },
                xAxis: {
                    categories: ['一月', '二月', '三月', '四月', '五月', '六月',
                        '七月', '八月', '九月', '十月', '十一月', '十二月']
                },
                yAxis: {
                    title: {
                        text: '温度'
                    },
                    labels: {
                        formatter: function () {
                            return this.value + '°';
                        }
                    }
                },
                tooltip: {
                    crosshairs: true,
                    shared: true
                },
                plotOptions: {
                    spline: {
                        marker: {
                            radius: 4,
                            lineColor: '#666666',
                            lineWidth: 1
                        }
                    }
                },
                series: [{
                    name: '东京',
                    marker: {
                        symbol: 'square'
                    },
                    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, {
                        y: 26.5,
                        marker: {
                            symbol: 'url(https://code.hcharts.cn/graphics/sun.png)'
                        }
                    }, 23.3, 18.3, 13.9, 9.6]
                }, {
                    name: '伦敦',
                    marker: {
                        symbol: 'diamond'
                    },
                    data: [{
                        y: 3.9,
                        marker: {
                            symbol: 'url(https://code.hcharts.cn/graphics/snow.png)'
                        }
                    }, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
                }]
            });
    }

};


$(document).ready(function ( ) {
    dashboard_index_ops.init()
});

这段代码是一个画图通用组件，使用的是Highcharts库。它通过设置一些默认的配置选项来实现统一的样式和功能。

web/static/js/index/index.js

;
var dashboard_index_ops ={
    init:function () {
        this.drawChart()
    },
    drawChart:function () {
        var chart =
            Highcharts.chart('member_order', {
                chart: {
                    type: 'spline'
                },
                title: {
                    text: '两地月平均温度'
                },
                subtitle: {
                    text: '数据来源: WorldClimate.com'
                },
                xAxis: {
                    categories: ['一月', '二月', '三月', '四月', '五月', '六月',
                        '七月', '八月', '九月', '十月', '十一月', '十二月']
                },
                yAxis: {
                    title: {
                        text: '温度'
                    },
                    labels: {
                        formatter: function () {
                            return this.value + '°';
                        }
                    }
                },
                tooltip: {
                    crosshairs: true,
                    shared: true
                },
                plotOptions: {
                    spline: {
                        marker: {
                            radius: 4,
                            lineColor: '#666666',
                            lineWidth: 1
                        }
                    }
                },
                series: [{
                    name: '东京',
                    marker: {
                        symbol: 'square'
                    },
                    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, {
                        y: 26.5,
                        marker: {
                            symbol: 'url(https://code.hcharts.cn/graphics/sun.png)'
                        }
                    }, 23.3, 18.3, 13.9, 9.6]
                }, {
                    name: '伦敦',
                    marker: {
                        symbol: 'diamond'
                    },
                    data: [{
                        y: 3.9,
                        marker: {
                            symbol: 'url(https://code.hcharts.cn/graphics/snow.png)'
                        }
                    }, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
                }]
            });
    }

};


$(document).ready(function ( ) {
    dashboard_index_ops.init()
});

web/templates/index/index.html

{% extends "common/layout_main.html" %}
{% block content %}
<div class="wrapper wrapper-content">
            <div class="row">
                <div class="col-lg-3">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <span class="label label-primary pull-right">日统计</span>
                            <h5>营收概况</h5>
                        </div>
                        <div class="ibox-content">
                            <h1 class="no-margins">{{ data.finance.today }}</h1>
                            <small>近30日：{{ data.finance.month }}</small>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <span class="label label-primary pull-right">日统计</span>
                            <h5>订单</h5>
                        </div>
                        <div class="ibox-content">
                            <h1 class="no-margins">{{ data.order.today }}</h1>
                            <small>近30日：{{ data.order.today }}</small>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <span class="label label-primary pull-right">日统计</span>
                            <h5>会员</h5>
                        </div>
                        <div class="ibox-content">
                            <h1 class="no-margins">{{ data.member.total }}</h1>
                            <small>今日新增：{{ data.member.today_new }}</small>
                            <small>近30日新增：{{ data.member.month_new }}</small>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <span class="label label-primary pull-right">日统计</span>
                            <h5>分享</h5>
                        </div>
                        <div class="ibox-content">
                            <h1 class="no-margins">{{ data.shared.today }}</h1>
                            <small>近30日：{{ data.shared.month }}</small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12" id="member_order" style="height: 400px;border: 1px solid #e6e6e6;padding-top: 20px;">
                    使用highchart画图
                </div>
                <div class="col-lg-12" id="finance" style="height: 400px;border: 1px solid #e6e6e6;padding-top: 20px;">
                    使用highchart画图
                </div>
            </div>
        </div>
{% endblock %}
{% block js %}
<script src="{{ buildStaticUrl('/plugins/highcharts/highcharts.js') }}"></script>
<script src="{{ buildStaticUrl('/js/chart.js') }}"></script>
<script src="{{ buildStaticUrl('/js/index/index.js') }}"></script>
{% endblock %}

在script里使用了 buildStaticUrl 引入了index.js， 内包含表格的内容

Highcharts
06-14
Highcharts是一款强大的JavaScript图表库，它能够帮助开发者创建各种丰富的数据可视化效果，广泛应用于Web应用程序中。这款库以其易用性、灵活性和丰富的图表类型而备受赞誉。在Highcharts中，你可以选择不同的图表...
echart图表之highcharts
panda_225400的博客
03-15 3307
前段时间公司要统计各个站的OEE机台的使用率，在网页上前端上展现OEE图表，难点在与如何将这些数据转成合理的数据展现出来提示：以下是本篇文章正文内容，下面案例可供参考发现截来的图片和系统执行出来的图，不能完全一模一样，估计是使用脚本的版本不一样导致。
Highcharts图表库 v9.3.3.zip
03-21
Highcharts图表库是一款广泛应用于网页数据可视化的JavaScript库，它提供了丰富的图表类型，如柱状图、折线图、饼图、散点图等，帮助开发者轻松创建交互式的图表。v9.3.3是Highcharts的一个更新版本，带来了更多功能...
Highcharts图表库 v11.4.0.zip
最新发布
03-21
Highcharts图表库是一款广泛应用于网页数据可视化的JavaScript库，它提供了丰富的图表类型，如柱状图、折线图、饼图、散点图等，帮助开发者轻松创建交互式的图表。v11.4.0是Highcharts的一个版本更新，可能包含了...
Highcharts-Gantt-7.2.1_highcharts_highchartsgantt_
10-02
Highcharts Gantt 7.2.1是一款强大的JavaScript图表库，专为呈现Gantt图而设计，用于在网页上绘制时间轴和项目管理图表。它基于Highcharts的基础框架，提供了丰富的功能，使得开发者能够轻松创建复杂的甘特图，用于...
HighCharts
09-14
Highcharts 是一个用纯JavaScript编写的一个图表库， 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。
highcharts使用
08-08
NULL 博文链接：https://lqis.iteye.com/blog/2147182
highcharts实例demo
06-16
highcharts在项目中的应用，根据年月日周季显示图形，形象的展示数据。http://blog.csdn.net/chenwei7878/article/details/46509881
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xinzheng新政

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值