highcharts_highcharts csdn-优快云博客

本文链接：https://blog.youkuaiyun.com/xinzhengLUCK/article/details/136807973

包含标识的曲线图 | 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，内包含表格的内容